Combating cancelled tween on fast scroll

[DevC]

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

[Trapti]

Hi, 

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!
 

[DevC]

@Trapti marvelous options here. Thanks for taking the time. Client killed the interaction in-flight so never got back here. It be like that. 😜