Jump to content
Search Community

Combating cancelled tween on fast scroll

DevC test
Moderator Tag

Go to solution Solved by Trapti,

Recommended Posts

Hi, this demo is designed to color each word as you scroll through the page. I elected to use classes because there are items in the array that need to be styled differently and I couldn't figure out how to do that with `to` properties.

If you scroll fast or back and forth you'll notice words don't drop their class and stay colored. I'm curious how to combat this or how you would build this correctly.

See the Pen WNLpgMw by dcha (@dcha) on CodePen

Link to comment
Share on other sites

  • Solution


I changed the approach to this animation. Check pen. Created a single timeline for all the text animation and triggered it for ".hero" section. I felt having scrolltrigger for all the texts is way too much. Change the duration and the stagger value if it is required. Also setting grey color for text on CSS and changing to black with JS is not great idea. If JS does not load than text will look faded and will not be readable for some users. 

See the Pen LYMLVZM by tripti1410 (@tripti1410) on CodePen



Here is with splitText plugin. Spliting text manually just for animation is not great. 

See the Pen MWZoamx by tripti1410 (@tripti1410) on CodePen

Hope it helps!

  • Like 2
Link to comment
Share on other sites

  • 1 month later...

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...