Please explain this TweenJS code - createjs

Question

Am a newbie in CreateJS and i have use this example code but don't understand it that much coz there is no code by code exaplaination.
The code is the one below:
createjs.Tween.get(circle, { loop: true })
.to({ x: 400 }, 1000, createjs.Ease.getPowInOut(4))
.to({ alpha: 0, y: 175 }, 500, createjs.Ease.getPowInOut(2))
.to({ alpha: 0, y: 225 }, 100)
.to({ alpha: 1, y: 200 }, 500, createjs.Ease.getPowInOut(2))
.to({ x: 100 }, 800, createjs.Ease.getPowInOut(2));
Can someone explain it for me please.Step by step.
Best Regards.

Answer 1

Create a tween for the circle object. It will loop through instructions:
createjs.Tween.get(circle, { loop: true })
Tween calls are "chained", so by appending methods, it will run them in order. Technically, each method just returns a reference to the tween so you can call a bunch in order. The line breaks in the code make it more readable, but it is basically:
tween.to(values).to(values).to(values);
The first tween sets the x position of the circle to 400px in a 1000 millisecond animation. It has an ease on it that has a custom value. Check out the TweenJS Ease class for more.
.to({ x: 400 }, 1000, createjs.Ease.getPowInOut(4))
After the first animation, it will then set the alpha and y values over 500ms, with a slightly different ease.
.to({ alpha: 0, y: 175 }, 500, createjs.Ease.getPowInOut(2))
The rest should make sense.
.to({ alpha: 0, y: 225 }, 100)
.to({ alpha: 1, y: 200 }, 500, createjs.Ease.getPowInOut(2))
.to({ x: 100 }, 800, createjs.Ease.getPowInOut(2));
You can also chain other methods on Tween, such as call() to call a function, or set to change other properties on the tween target that are not being tweened.
Just for reference, this is the same as something more traditional like this:
var tween = createjs.Tween.get(circle, { loop: true });
tween.to({ x: 400 }, 1000, createjs.Ease.getPowInOut(4));
tween.to({ alpha: 0, y: 175 }, 500, createjs.Ease.getPowInOut(2));
tween.to({ alpha: 0, y: 225 }, 100);
tween.to({ alpha: 1, y: 200 }, 500, createjs.Ease.getPowInOut(2));
tween.to({ x: 100 }, 800, createjs.Ease.getPowInOut(2));
Cheers.