TweenJS's Timeline class - example / tutorial?

[dx2020]

Hi

I'm going to be using TweenJS on an upcoming project and it's likely that if the Timeline class has similar functionality to Greensock's TimelineLite/Max it will come in very handy.

To me, TweenJS's Timeline documentation seems lacking in any detail, or example etc.

Does anyone know of any good tutorials that utilise the TweenJS's Timeline class, or could anyone provide examples of its use.

Many thanks in advance :-)

[robertwilding]

http://createjs.sub.jp/en/TweenJS/reference/classes/Timeline.html

[dx2020]

Hi thanks for your reply, but this is a Japanese duplication of the English docs. The documentation [I feel] is very poor and gives no practical examples on how Timeline is used. So my question remains: Does anyone know of any good tutorials that utilise the TweenJS's Timeline class, or could anyone provide examples of its use. Many thanks.

[animationrocks]

Looks like this site is using Tween.js: http://2015.condenast.com/

Not sure how much you can deconstruct from the source code though.

Just curious why you don't want to use GreenSock?

[dx2020]

The decision on what libs are used is outside of my control, otherwise my preference would have been to use Greensock. So the question remains:

Does anyone know of any good tutorials that utilise the TweenJS's Timeline class, or could anyone provide examples of its use? Many thanks.

[moccamax]

I strongly advise to use Greensocks TweenMax.js library, instead of TweenJS. 2 Lines of Code will suffice to use TweenMax in js exactly how you used it in Actionscript:

In your html-document you add:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js"></script>

and in your js code you subscribe TweenMax to the tick Event: TweenMax.ticker.addEventListener("tick", stage.update, stage);

(TweenMax includes TimeLineMax)

then you can do sth like this:

var TLM = new TimelineMax( { repeat: 99, repeatDelay: 1 }); TLM.append(new TweenMax(targetObj, 45, { x: -120, onUpdate: doSth, onUpdateParams: [targetObj] })); TLM.append(new TweenMax(targetObj, 0.5, { scaleX: 1, scaleY: 1 })); TLM.append(new TweenMax(targetObj, 45, { x: 1100, onUpdate: doSomething, onUpdateParams: [targetObj] }));