Change path with bounceOut ease effect in Tweenjs (Createjs)

Question

I would like to make an animation with a circle where it cames from top left, and going down to the bottom of canvas and bouncing to the right bottom. If you can't imagine my question, you can see an example at

http://www.createjs.com/demos/tweenjs/tween_sparktable

(third demo)

I found a code that animated a div using ease, but that's it. It goes to straight line even tough i change the ease effect to bounceOut, here is the code

createjs.Tween.get(gg).to({x:400}, 1000);
createjs.Ticker.addEventListener("tick", stage);

http://jsfiddle.net/TeVZ6/

i know that i have to change the path in "to" function, but I don't know what should I do to achieve "curving, bouncing" path

I can't seem to find any tutorial regarding this

Any suggestion?

Answer 1

What you are describing has a bounce-out ease on the y-position, and an ease-out on the x-position. If you want to move in 2 dimensions, but have different eases, you need two separate tweens.

@inverse's answer is correct about the bounce ease, but changing it to bounce on they y instead, and adding a second ease on the x will give you the effect I think you are looking for:

createjs.Tween.get(gg).to({x:400}, 1000, createjs.Ease.quadOut);
createjs.Tween.get(gg).to({y:400}, 1000, createjs.Ease.bounceOut);

Here is an updated fiddle