horizontal scroll + Letter animation

[Mlbb lan]

dear GSAP community, my strength is running out, I've been struggling with a simple task for a long time and I'm asking for help. 

My task is to realize the movement of text from right to left while playing a letter-by-letter animation. An example of what I want to do is realized on the site https://www.flshfrm.com/ (I attach a link to a screenshot).

I will be very grateful if you can tell me where I am making a mistake. 

See the Pen GRPNzOO by AlexDevW (@AlexDevW) on CodePen

[mvaneijgen]

Hi @GeorgeErshov,

 

First of, the best thing to do when working with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging. 

 

Second, you're on the GSAP forum, so you'll get GSAP solutions. I've swapped out your text splitting plugin and have used our own SplitText plugin.

 

On my screen, your text element was around 800px in width, that didn't seem right, and that was indeed the case. Swapping out .offsetWidth with .scrollWidth got me the right value.

 

I've set the duration to 10, so we can see what is happening when there is no ScrollTrigger (I've also swapped out your "0" position parameter with "<"). I've set a stagger to the .char elements to animate in with a duration of 0.3 (you can tweak this value to your liking) and set the stagger amount to the duration of the first tween. There is also some CSS I've changed, so that the letters don't get cut off. 

 

See the Pen qBLqvVx?editors=0011 by mvaneijgen (@mvaneijgen) on CodePen

 

Then if you want to do this on scroll it will be just a matter of turning on ScrollTrigger again. Hope it helps and happy tweening! 

 

See the Pen dywOrej?editors=0011 by mvaneijgen (@mvaneijgen) on CodePen

[Mlbb lan]

I realized my mistake! Thank you so much for helping me figure it out!  mvaneijgen