Search the Community
Showing results for tags 'textreveal'.
Found 1 result
-
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!
