Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

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

Go to solution Solved by ZachSaucier,

Recommended Posts

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.



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 by sherry
Codepen was not working
Link to comment
Share on other sites

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? 

  • Like 4
Link to comment
Share on other sites

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 😅

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