Tweenjs scale with bounceOut and return

1k Views Asked by At

I need to create a motion tween in code that scales up and back to the original size with a bounce effect.

createjs.Tween.get(this.movieClip).wait(200).to({scaleX:1.10,scaleY:1.10}, 1000, createjs.Ease.bounceOut);

As far as I have got is, this scales up with bounce effect but stays at 110% and I need it to return to 100% all within the bounce effect. I can do this with a motion tween with bounce..., but need to be able to do this in code.

1

There are 1 best solutions below

0
Kokodoko On

You can either chain two tweens, or use Ease.backOut to tween slightly over your target and then back.

Chaining two tweens

createjs.Tween.get(circle, {loop: false})
  .to({scaleX: 1.2, scaleY:1.2}, 1000, createjs.Ease.getPowInOut(4))
  .to({scaleX: 1.0, scaleY:1.0}, 200, createjs.Ease.getPowInOut(2))

Overshooting and then moving back

createjs.Tween.get(circle2, {loop: false})
  .to({scaleX: 1.0, scaleY:1.0}, 1000, createjs.Ease.getBackOut(3))

Documentation: https://createjs.com/docs/tweenjs/classes/Ease.html