Olav Posted October 5, 2022 Share Posted October 5, 2022 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 More sharing options...
Solution GreenSock Posted October 5, 2022 Solution Share Posted October 5, 2022 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 More sharing options...
Olav Posted October 6, 2022 Author Share Posted October 6, 2022 Thanks for the quick help Jack! Exactly what I needed. 2 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now