ScrollTrigger works very bad

[panamera]

Hello, 

i have this code to animate many typo elements if the user scroll down and the .video_section is visible on my site.

If I scroll very fast, many animations are not really visible. And i don't know, how to add a second trigger Animation for another .class

Can anybody help me to resolve my problem? 

 

Thank you!

 

 

 

gsap.registerPlugin(ScrollTrigger);

let tl = gsap.timeline({
  scrollTrigger: {
    delay: 0.5,
    trigger: ".video_section",
    start: "top top",
    end: "bottom bottom",
    markers: true,
    toggleActions: "play none none reverse",
    scrub: 1,
    defaults: {
      duration: 1,
      ease: "power1.inOut"
    }
  }
});
tl.fromTo(
  ".class1 span.word_inner:nth-child(6)",
  { yPercent: "0", opacity: 1 },
  {
    yPercent: "30",
    opacity: 0
  }
);
tl.fromTo(
  ".class1 span.word_inner:nth-child(5)",
  { yPercent: "0", opacity: 1 },
  {
    yPercent: "30",
    opacity: 0
  }
);
tl.fromTo(
  ".class1 span.word_inner:nth-child(4)",
  { yPercent: "0", opacity: 1 },
  {
    yPercent: "30",
    opacity: 0
  }
);
tl.fromTo(
  ".class1 span.word_inner:nth-child(2)",
  { yPercent: "0", opacity: 1 },
  {
    yPercent: "30",
    opacity: 0
  }
);
tl.fromTo(
  ".class2 span.word_inner:nth-child(6)",
  { yPercent: "0", opacity: 1 },
  {
    yPercent: "30",
    opacity: 0
  }
);
tl.fromTo(
  ".class2 span.word_inner:nth-child(5)",
  { yPercent: "0", opacity: 1 },
  {
    yPercent: "30",
    opacity: 0
  }
);
tl.fromTo(
  ".class2 span.word_inner:nth-child(3)",
  { yPercent: "0", opacity: 1 },
  {
    yPercent: "30",
    opacity: 0
  }
);
tl.fromTo(
  ".menu_wrapper p.menu_items:nth-child(1)",
  { yPercent: "0", opacity: 1 },
  {
    yPercent: "30",
    opacity: 0
  }
);
tl.fromTo(
  ".menu_wrapper p.menu_items:nth-child(2)",
  { yPercent: "0", opacity: 1 },
  {
    yPercent: "30",
    opacity: 0
  }
);
tl.fromTo(
  ".menu_wrapper p.menu_items:nth-child(3)",
  { yPercent: "0", opacity: 1 },
  {
    yPercent: "30",
    opacity: 0
  }
);

 

[Cassie]

Hi - most of the time it is impossible for us to help without a minimal demo.

 

Currently we have no context at all - this issue could be caused by some CSS, some markup, a third party library, your browser, an external script. 🤷🏼‍♀️ Endless reasons.

Please make a demo with some simple divs, basic styling and the little bit of GSAP code you've linked to. If you can't recreate the issue by doing this then incrementally add code in, bit by bit until the issue occurs. Most of the time people manage to solve their own issues using this process. If not, then at least we have a reduced test case and a better idea of how to help.
 

Thanks!