How to use the Timeline in tweenjs

Question

Docu says:

Timeline The Timeline class synchronizes multiple tweens and allows them to be controlled as a group.

but there is no example how to use it. If I create a Timeline with

var tl = createjs.Timeline();

none of the shapes are rendered anymore.

Timeline is a great feature in TweenMax and I like to use it in the canvas too.

score 3 · Accepted Answer · answered Feb 26 '16 at 15:00

Creating a Timeline shouldn't affect the rendering of the Shapes - could you provide some more code or explain further what you're trying to do?

The usage of Timeline is quite straight forward:

    var timeline = new createjs.Timeline(); //create the Timeline
    timeline.addTween(tween, tween2); // add some tweens
    timeline.setPaused(true); // pause all tweens 
    timeline.setPosition(300); // set position on all tweens ...

However if you're more used to GSAP you could just use GSAP in combination with EaselJS/CreateJS - they work great together.

score 1 · Answer 2 · edited Jun 23 '16 at 01:22

I have an example:

//First Tween on rav4 object

var ravScaleTween = new createjs.Tween.get(rav4)
        .wait(350)
        .to({scaleX:1, scaleY:1, x:ravEndPoint.x, y:ravEndPoint.y}, 1500, createjs.Ease.quadOut);

//Second Tween on rav4 object

var ravAlphaTween = new createjs.Tween.get(rav4)
        .wait(350)
        .to({alpha:1}, 400);

//Create Timeline class

var ravTimeLine = new createjs.Timeline();
ravTimeLine.addTween(ravScaleTween,ravAlphaTween);

rav4 object starts to scale and go move to x and y position (1500 milliseconds) as alpha of rav4 object fades up at 400 milliseconds

How to use the Timeline in tweenjs

2 Answers2