Jump to content


Scrolltrigger animation, instead of animate on scroll

Go to solution Solved by GreenSock,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

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? 

Link to comment
Share on other sites

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

  • Like 2
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.