Katu93

you know, doing it that way makes appear two scrollbar in my proyect,

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

Hello, I am tring to recreate one of the animation from this link https://qwery.ancorathemes.com/marquee-text/ while scrolling the text appears fron right to left and at the same time each letter appears from the bottom I tries to make a demo but the text shows small https://stackblitz.com/edit/stackblitz-starters-xpqpr5?file=app%2Fpage.tsx What have I done so far? the text show smoothly from the right while scrolling with this code useGSAP(() => { if (texto.current) { const text = new SplitType(texto.current, { types: "chars" }); // gsap.from(".char", { // y: 500, // stagger: 0.5, // delay: 0.1, // }); } gsap.to(texto.current, { xPercent: -100, ease: "none", scrollTrigger: { trigger: container.current, pin: true, scrub: 3, markers: true, start: "10% top", }, }); }); then, with the commented function gsap.from(".char", { y: 500, stagger: 0.5, delay: 0.1, }); more or less the animation for the text to appear from the bottom works but a the same time until it ends a seccond scrollbar appears, and dissapear when the animation ends gsap.from(".char", { y: 500, stagger: 0.5, delay: 0.1, scrollTrigger: { trigger: container.current, scrub: true, pin: true, markers: true, }, }); and if i add the scroll trigger it jsut doesn´t work as i want I also tried with a "forEach" for the individial letters vut didn´t work i can´t find a similar animation within the demos, I hope someone can give me a hint at last Thank you!