How to get gsap.timeline snap. Can't get update new timeline progress value:

[LuLUE7775]

Hi, thank you all gsap team for the wonderful lib and resources.

 

I'm trying to get a slider works as below example in React. The problem is, when the user click fast, the slider x position will be off.  So I'll need to get it snap back to the right position. 

However, I can't get it snap. I assume I'll need to get a updated progress value, so I do it in onUpdate to manually update animation timeline progress value (which is animationRef.current here). If anyone can point out the right direction I'll be really grateful.

 

here's my minimal demo

See the Pen ExvZjZQ?editors=0010 by GreenSock (@GreenSock) on CodePen

[Rodrigo]

Hi @LuLUE7775 and welcome to the GreenSock forums!

 

First thanks for being a Club GreenSock member and supporting GreenSock! 🥳

 

I'm not sure of what the issue is here. You mention click, but my guess is that you mean throw?

 

Perhaps you should take a look into the Endless Horizontal Loop Helper Function here:
https://greensock.com/docs/v3/HelperFunctions#loop

 

Also for React and it's ecosystem (Next, Gatsby, etc.) we recommend using GSAP Context:

https://greensock.com/docs/v3/GSAP/gsap.context()

 

Finally is a good idea to read this article in order to get a better grasp for using GSAP in React environments:

Hopefully this helps. Let us know if you have more questions.

 

Happy Tweening!