ScrollTrigger - Horizontal animation - apply two movements to text

[Katu93]

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!

[GSAP Helper]

Howdy! I read your question a few times and wasn't sure quite what you're asking, but I by glancing at that animation, it looked to me like: 

• Create a tween that staggers in the letters moving/fading up, and apply a scrubbed ScrollTrigger
• Create a SEPARATE tween for the xPercent tween of the whole block. That has a scrubbed ScrollTrigger that also pins the element, and the start is something like "center center". 

If you're still struggling, here is some quick advice about how to get the most out of these forums...

 

Keep it simple. Don't list a bunch of requirements ("it should ___, and ____, and then also ____ while _____ ..." - that's too difficult to follow). Just pick the very first thing and see if you can make that work. If you get stuck, post one question focused on that one piece, like "how can I pin each section one at a time?" Keep your CodePen focused only on that one piece with as little code/markup as possible. Then once that's answered, move on to your next question/problem. 

 

Baby steps. 🙂

 

Before you know it, things will fall into place one at a time.

 

Don't worry - this community has got your back when it comes to GSAP-specific questions. I just wanted to provide some pointers on how to help us help you. 

[Katu93]

9 hours ago, GSAP Helper said:

Howdy! I read your question a few times and wasn't sure quite what you're asking, but I by glancing at that animation, it looked to me like: 

• Create a tween that staggers in the letters moving/fading up, and apply a scrubbed ScrollTrigger
• Create a SEPARATE tween for the xPercent tween of the whole block. That has a scrubbed ScrollTrigger that also pins the element, and the start is something like "center center". 

If you're still struggling, here is some quick advice about how to get the most out of these forums...

 

Keep it simple. Don't list a bunch of requirements ("it should ___, and ____, and then also ____ while _____ ..." - that's too difficult to follow). Just pick the very first thing and see if you can make that work. If you get stuck, post one question focused on that one piece, like "how can I pin each section one at a time?" Keep your CodePen focused only on that one piece with as little code/markup as possible. Then once that's answered, move on to your next question/problem. 

 

Baby steps. 🙂

 

Before you know it, things will fall into place one at a time.

 

Don't worry - this community has got your back when it comes to GSAP-specific questions. I just wanted to provide some pointers on how to help us help you. 

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",

      },

    });

  });

 

[Rodrigo]

Hi @Katu93 and welcome to the GSAP Forums!

 

There is no scrolling space in your demo because the styles from Tailwind are not taking any effect.

 

Also in this cases we recommend removing ScrollTrigger from the setup and focus just on the animation. When the animation does exactly what you want, add ScrollTrigger back again.

 

In this case in particular, IMHO having two different ScrollTrigger instances seems unnecessary since this can be achieved with just a single GSAP Timeline and the position parameter. Here is a fork of your demo:

https://stackblitz.com/edit/stackblitz-starters-hvfn2i?file=app%2Fpage.tsx

 

Hopefully this helps.

Happy Tweening!

[Katu93]

2 hours ago, Rodrigo said:

Hi @Katu93 and welcome to the GSAP Forums!

 

There is no scrolling space in your demo because the styles from Tailwind are not taking any effect.

 

Also in this cases we recommend removing ScrollTrigger from the setup and focus just on the animation. When the animation does exactly what you want, add ScrollTrigger back again.

 

In this case in particular, IMHO having two different ScrollTrigger instances seems unnecessary since this can be achieved with just a single GSAP Timeline and the position parameter. Here is a fork of your demo:

https://stackblitz.com/edit/stackblitz-starters-hvfn2i?file=app%2Fpage.tsx

Hopefully this helps.

Happy Tweening!

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

[Rodrigo]

Hi,

 

That's most likely some HTML/CSS mixing things up in your setup when GSAP pins the element, as you can see in the setup I'm using (no tailwind) there is no such scrollbar. Most likely the initial position of the letters is causing this, I'll guess that as soon as letters animation in the Y axis is done (or a little before is done) that extra scroll bar disappears? So, as I mentioned the initial position of the letters, plus the height of the element (h-screen = 100vh), plus the default overflow could be causing this.

 

Unfortunately your previous demo is not showing any of this, if you keep having the problem, it'd be a good idea to create a minimal demo that shows the problem.

 

Happy Tweening!