Jump to content
Search Community

horizontal scroll + Letter animation

GeorgeErshov test
Moderator Tag

Go to solution Solved by GeorgeErshov,

Recommended Posts

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. 

Снимок экрана 2023-09-06 в 18.35.40.png

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

Link to comment
Share on other sites

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

  • Like 4
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...