3

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!!

Lanny
  • 11,244
  • 1
  • 22
  • 30
Perxeo
  • 31
  • 1

1 Answers1

0

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!

Lanny
  • 11,244
  • 1
  • 22
  • 30
  • And....why it doesn't work properly in the ANIMATE environnement? It's curious, but your example it´s ok in html page but it doesn't work inside animate API.... – Perxeo Aug 07 '19 at 10:18
  • The likely reason is that Animate ships with an older version that doesn't support it. You could try replacing the TweenJS version in your export. – Lanny Aug 07 '19 at 20:31