search

jeremyckahn / shifty

The fastest TypeScript animation engine on the web
https://jeremyckahn.github.io/shifty/doc/
MIT License
1.54k stars 88 forks source link

Is there a way to update the `to` coordinates of an animation? #107

Closed kurtextrem closed 5 years ago

kurtextrem commented 5 years ago

E.g. I'm calling the tween function whenever the X/Y coordinates have been updated. This may mean though, that the previous animation doesn't finish fast enough. So the from stays the same, but the to changes. Is this supported here, or would you recommend a different lib?

jeremyckahn commented 5 years ago

Hi @kurtextrem! There's no API in Shifty to specifically achieve what you're describing, but I think you could get the results you're looking for by doing something like the following:

  1. Keep track of the timeElapsed value in your tween's stepFunction
  2. Calling .stop() on your tween when the to or from data changes
  3. Start a new tween with the updated to and from data
  4. .seek to the latest timeElapsed value of the previous tween
  5. .resume the tween

I haven't tried this myself so it may need a bit of adjusting. Other libraries might have a better API for this, though I don't which one would be the best to recommend to you.

kurtextrem commented 5 years ago

Thank you. Will try that out.