Having issue trying to make the scroll trigger animation end halfway (well, technically quarter-way )

[sherry]

Hi All,

 

I am trying to animate something using scroll trigger (minimal reproducible example in codepen link ).  I want to scale the circle to 1 when scroll progress is 25%. And for that reason I tried setting the timeline duration to 4 and the animation duration to 1 but it doesn't work. It still takes the full progress of the scroll trigger to make it scale to 1. 

 

Your help is highly appreciated.

Thanks

 

Edit: Codepen doesn't seem to be working. Here is a code sandbox instead https://codesandbox.io/s/gsap-scrolll-blimx?file=/src/App.js:0-1097

 

See the Pen ABJdbq by sherryLooper (@sherryLooper) on CodePen

Edited June 3, 2021 by sherry
Codepen was not working

[ZachSaucier]

Someone else may be able to better explain why setting the duration of the timeline doesn't work well, but usually for things like this I add a dummy tween: https://codesandbox.io/s/gsap-scrolll-forked-37lbi?file=/src/App.js

 

Side note: you don't needs quotes around the scale value.

[GreenSock]

As explained in the docs, a timeline's duration is determined by its child animations - it is simply a wrapper, so when you alter the duration() of a timeline it merely adjusts the timeScale accordingly as a convenience. 

 

For example, if you create an empty timeline and then put a 1-second tween into it, that timeline is now 1 second. If you place another 1-second tween into that timeline using a position parameter of "+=1" (a 1-second gap before the tween), now that timeline's duration would be 3 seconds (1 second tween, then 1 second gap, then another 1 second tween). 

 

It wouldn't really make sense to "set" a timeline's duration because what would you expect to happen when you add more child animations to it that extend beyond that duration? Like put a 1-second tween with a startTime of 5 into a timeline whose duration was set to 4. See the problem? It creates a lot of logical inconsistencies. 

 

Does that clear things up? 

[sherry]

On 6/4/2021 at 10:02 AM, GreenSock said:

Does that clear things up? 

Yeah, thanks for the clarification. Got to invest some time into reading docs 😅