tween.js icon indicating copy to clipboard operation
tween.js copied to clipboard

Published 20 hours ago • verified publisher icon tweenjs

Multiple `.start()` and `.to(prop:[])`

Open MasatoMakino opened this issue 3 years ago • 3 comments

Related Issues

  • Animation on repeat speeds up over time. #378

Purpose of this Pull Request

This PR fixes the Issue of tween acceleration on multiple .start().

If an object with an array is passed to .to(), _valuesEnd will be irreversibly changed when .start() is executed multiple times. As a result, each time you run .start(), animation will be faster.

Details of the changes

  1. Added test cases.
  2. Added _hasSetupProperty flag to check if _setupProperties() has been executed.
  3. If you reconfigure .to(), startValue will be changed to the current value of the tween target object. Check _valuesStart and keep it if it is already initialized.

https://github.com/tweenjs/tween.js/blob/ae24c58c8b57b2079151ae2c3c63f2bb501c8b2b/src/Tween.ts#L169-L172

I used this code as a reference for change point 3.

Related pull requests

  • Fix dynamic to with array values #585

I think it might be difficult to merge this PR as-is, because of conflicts with features such as dynamic to and _propertiesAreSetUp. In that case, I hope the added test cases will contribute to everyone.

MasatoMakino avatar Apr 14 '21 07:04 MasatoMakino

@MasatoMakino Thanks for this! Would you mind making an example for this?

trusktr avatar Apr 19 '21 17:04 trusktr

The more I see changes and fixes like these, the more I start to want to start working on a Timeline/Keyframe/Tween abstraction. It seems Tween is trying to do too much, all in one.

trusktr avatar Apr 19 '21 17:04 trusktr

@MasatoMakino Thanks for this! Would you mind making an example for this?

@trusktr Thanks for your reply.

I have made examples of multiple start with CodePen. tween.js 18.6.4 : multiple start and array tween.js 18.6.4 + PR #602 : multiple start and array

I also considered adding a new page in ./examples. However, it is hard to tell what is a difference between examples of multiple start and example of repeat, and there is a risk of confusing users. I did not add examples of multiple start to this PR, but made examples with codepen.

MasatoMakino avatar Apr 20 '21 02:04 MasatoMakino

Closes #378

trusktr avatar Apr 23 '23 19:04 trusktr

Looks like this got fixed already!

https://codepen.io/trusktr/pen/XWGpKyX/10faa7d954bf016a3f0261ca626db17e?editors=1010

There's a similar issue with startWithCurrentValues(), but the problem is gone when using start(). See this issue:

  • https://github.com/tweenjs/tween.js/issues/378

trusktr avatar Jan 15 '24 07:01 trusktr