Trigger a function at specified points in a scroll trigger timeline

[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. 

See the Pen LYemZMN by ltoye (@ltoye) on CodePen

[Cassie]

Hey there!

 

Not sure exactly why you'd want this but .call() is probably what you're after.

https://greensock.com/docs/v3/GSAP/Timeline/call()

Just a tip - it's usually better to explain what problem you're trying to solve rather than asking how to achieve the thing you think will solve the problem.

You say 'Instead of having this dictated by user scroll' and then go on to explain how you want to trigger functions on scroll, so this seems a bit at odds to me. Maybe you mean 'not tied to the scroll progress?'

 

Hope this helps a little, if not, pop back.