I would like to understand the use of the "reversed" property of TweenJS

Question

I don't find any valid example for understand the use of "reversed" propertie in TweenJs. Could you send me a bit of code, explaining this issue? Thanks!!

Answer 1

The "reversed" property just runs the tween sequence in reverse. All positions are played in the reverse order as defined, and even the eases are applied in reverse (docs).

For example, if you create a tween that animates the x position from 0 to 100, playing it reversed animates it from 100 to 0. If you apply a "quadOut" ease, it will slow down near the end, but in reverse it speeds up as it plays backwards.

Here is a quick example that shows two identical tweens, but one of them is reversed: https://jsfiddle.net/lannymcnie/98k0zvdx/

createjs.Tween.get(s, {loop:true})
    .to({x:300}, 3000, createjs.Ease.bounceOut);
createjs.Tween.get(s2, {loop:true, reversed:true}) // This one is reversed
    .to({x:300}, 3000, createjs.Ease.bounceOut);

I hope that helps!