GSAP animation - detect a percentage of animation progress

[fd_alistair]

Hi there - I'm trying to detect the percentage progress of an animation so I can warn the user that it's nearly finished.

 

I could do an onStart and combine it with a setTimeout, but hoping there was a better solution using just GSAP

 

Any help would be appreciated

See the Pen MWVqXxd by fuzzyduck (@fuzzyduck) on CodePen

[akapowl]

Hello @fd_alistair

 

You could add an onUpdate eventCallback and check on the progress() of the tween.

 

And then, whenever you gave the warning, make sure to remove the callback.

 

Something like this maybe:

 

See the Pen GRxXGVy by akapowl (@akapowl) on CodePen

 

 

Or as an alternative, use a timeline and add a .call() at whatever point in time you'd like, making use of the position parameter

See the Pen wvmExKY by akapowl (@akapowl) on CodePen

 

[fd_alistair]

29 minutes ago, akapowl said:

Hello @fd_alistair

 

You could add an onUpdate eventCallback and check on the progress() of the tween.

 

And then, whenever you gave the warning, make sure to remove the callback.

 

Something like this maybe:

 

 

 

 

Many thanks for getting back to me - The first option (the eventCallback) seems to work best, however I've updated the Pen to include the button which decreases the height - basically I need to warn the user when it gets to a certain percentage, the users clicks the 'empty button', the animation starts again and then I need to start the percentage detection process again.

Thanks again

[akapowl]

 

Then you'll need to adjust the logic of your code to work with that. One way you could do it is to pause the waste tween on click (and maybe just in case also reset the eventCallback to null again), tween the progress of the waste tween to 0 and in an onComplete callback of that tween, restart the waste tween again and re-add that eventCallback to the waste tween. Just an idea, maybe give it a shot yourself.