LeeT

Hello all, I have a question regarding timeline capabilities. As with the codepen provided - a user is able to scroll and change colour of the text. Instead of having this dictated by user scroll, what I'd like is the following - At 25% through the scroll timeline, trigger a function that changes the colour of first text At 50% through the scroll timeline, trigger a function that changes the colour of second text At 75% through the scroll timeline, trigger a function that changes the colour of third text So instead of the duration being specified, a function is triggered at certain points which allows me to manipulate it further. If anyone is able to point me in the right direct for that kind of thing I'd appreciate it.

@akapowl That did the trick thanks!. In the live project it's built out in React components so wrapping an outside container wasn't possible however I pinned using the main page outermost container class and worked like a charm. Saved me a ton of time much appreciated.

This is a basic example of what I'm trying to do. As a scroll trigger event is triggered, I'm trying to have it where there is no whitespace e.g. the red div scrolling up. I'd like to fix the above/below sections in place while the scroll trigger functionality scrolls through the text (changing to blue individually). Essentially it would hit the section, stay there while the scroll animates the color change - and then once done scroll onwards without any whitespace being introduced at any point. Please let me know if that isn't clear enough and I'll try to make it a bit of a better example.