Text animation is not smooth (Locomotive scroll+GSAP+scrolltrigger)

[thefrontendfreak]

Animation not working perfectly. The main goal is to achieve smoothness. But I am not able to getting it. When you scroll down to the page animation feels like laggy or working a bit slowly specially if you scroll faster you will see it stuck into the page sometimes. Please help me on this one. I am really stuck into this from last couple of days. 

See the Pen wvygmBR by thefrontendfreak (@thefrontendfreak) on CodePen

[Cassie]

Hi there

Please keep in mind that we can't offer support for 3rd party libraries, but we're happy to answer any GSAP-specific questions.

Have you taken a look at ScrollSmoother?

https://greensock.com/scrollsmoother/

[GreenSock]

Yep, Cassie is right. Also, you're putting a LOT of pressure on the browser by animating all those characters individually simultaneously. You may want to consider setting will-change: transform on those. And you're using invalid eases on several of your tweens. 

 

It's typically better to use <div> elements too because I think most browsers won't render transforms on inline elements.