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
}
);