Scrolltrigger animation, instead of animate on scroll

[Olav]

Hello everyone,

 

I'm new to GSAP so still need to get used to all the possibilities. I've tried my fair share of google searches but can't seem to find what I'm looking for.

As you can see in the codepen example, text changes color based on scroll position. Though if you scroll slow enough, you can pause the scroll in the 'in-between' state of the 2 colours. I'd like for my code to trigger the change of color on scroll, but with a set duration, eliminating the possibility of seeing 50% color. When the trigger hits, .highlight changes to white in 1 second with easing.

 

What do I need to resolve this issue? Or, where can I find a solution?

I appreciate your reading, hope you can help me out with an answer.

See the Pen NWMBBYv by olavgit (@olavgit) on CodePen

[GreenSock]

Thanks for the minimal demo! 

 

You've got "scrub" enabled which scrubs the playhead of the timeline based on the scrollbar position. It sounds like you want "toggleActions" instead which just fires the animation to play as soon as the trigger point is reached (no scrubbing). In that case, just loop through your elements and create an animation for each: 

See the Pen ExLpGPY?editors=1010 by GreenSock (@GreenSock) on CodePen

 

Is that more like what you were looking for? 

[Olav]

Thanks for the quick help Jack! Exactly what I needed.