Horizontal scroll animation

[AndreasBP]

Hello.

Im currently trying to create a horizontal scroll animation on my text, its working half, but i want it to start with the first letter, and then work its way to the last. But i cant seem to get it right.

Any tips?

 

See the Pen BabdRwM by Andreas12131354 (@Andreas12131354) on CodePen

[mvaneijgen]

I had to move somethings around to get things to line up. Instead of using the horizontal xPercent I've used x and moving the total width of all slides (there was an extra slide with just the number "3" in it I have removed that from the HTML). I've set the end trigger to the bottom of the viewport, instead of the default top. I highly recommend turning on markers so you can see what ScrollTrigger is doing.

 

I've wrapped your ScrollTrigger in to a timeline, so it will be easier to see what is ScrollTrigger and what is the animation, this way we also give it a name (tl) and we can use it as the containerAnimation for the letters 

 

I’ve placed some comments in your JS to better explain things, please be sure to read through them! Hope it helps and happy tweening! 

 

See the Pen OJqjmKK?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[AndreasBP]

God damn. I will definitely read it through. 

Thanks a lot for the help!

[AndreasBP]

I didnt even know, there was something in scrolltrigger called Horizontal. Thanks for letting me know.

[mvaneijgen]

It sounds boring, but reading the documentation is highly recommended. You'll be surprised how much is already thought up for you! https://gsap.com/docs/v3/Plugins/ScrollTrigger/

 

Glad you're issue is solved happy tweening!