Katu93's post in ScrollTrigger - Horizontal animation - apply two movements to text was marked as the answer
Hello!
i was having problem with this step
Create a tween that staggers in the letters moving/fading up, and apply a scrubbed ScrollTrigger
At first I was taking the Array from here:
const text = new SplitType(texto.current, { types: "chars" });
text.char
text.char was giving me problems
now i am using the good const chars = document.querySelectorAll(".char"); and finally it is working, the code endup looking like this
useGSAP(() => {
if (texto.current) {
const text = new SplitType(texto.current, { types: "chars" });
const chars = document.querySelectorAll(".char");
gsap.from(chars, {
y: 230,
opacity: 0,
ease: "elastic",
stagger: 0.1,
duration: 1.5,
yoyo: true,
delay: 2,
scrollTrigger: {
trigger: container.current,
scrub: true,
start: "top 30%",
end: "=+3000",
},
});
}
gsap.to(texto.current, {
xPercent: -100,
ease: "none",
yoyo: true,
scrollTrigger: {
trigger: container.current,
pin: true,
scrub: 3,
start: "10% top",
end: "=+3000",
},
});
});
