Greensock timeline tweens

[paul_james123]

Hi All,

A general question here. (I'm a beginner in AnimateCC):

I have looked over and used a few timeline tweens from Greensock animation platform in my Canvas project:

https://greensock.com/

The claim in the opener video above, is that using Greensock timeline animations allows a faster and easier workflow and avoids the bugs common with other approaches.

They look nice but animating with these products means one is doing, what I'll call, "script-based" animation: Code in the script drives the animation while the play head stays on one frame.

Most of the animation done with Animate CC, I think, is timeline-based animation where keyframes are used and the animation takes place over multiple frames, right?

Which type of animation allows more control and more options... for example, allows you to synchronize more precisely with an audio track?

Does the claim regarding faster/easier workflow sound accurate?

Thanks

[rosebudd · Accepted solution]

It depends.

I used creatjs frame scripts on keyframes prior to the GUI easing being added in 2017.

I chose to put each createjs tween on keyframes on the timeline, because it made i easier to keep track of what object they pertained to.

I did it sparingly, because I did have to do a lot more previewing and tweaking the scripts, because there was no scrubbing the timeline.

I don't use GSAP because I have too may sizes/versions. Animate is faster for me.

If you want to try a createjs code tween, there is one in code snippets. It is pretty fun, because it is so crazy.

/* Tweens the specified Object using ease bounce out effect.

*/

var target = this.movieClip_1;

var tween = createjs.Tween.get(target, {

loop: true

})

.to({

x: target.x,

y: canvas.height - 55,

rotation: -360

}, 1500, createjs.Ease.bounceOut)

.wait(1000)

.to({

x: canvas.width - 55,

rotation: 360

}, 2500, createjs.Ease.bounceOut)

.wait(1000)

.to({

scaleX: 2,

scaleY: 2,

x: canvas.width - 110,

y: canvas.height - 110

}, 2500, createjs.Ease.bounceOut);

[paul_james123]

Thanks, Rosebud.

So it sounds like GSAP doesn't give enough extra functionality to warrant using the platform?

Would you say that you can do whatever animation their packages deliver by just using Animate?

Good point you brought up above: If only using GSAP you don't have the visual preview. (You don't see the frame segments in a timeline allowing you to to visualize your animation and you can't scrub the timeline to preview sections of your project quickly.)

[ClayUUID]

paul_james123  wrote

Which type of animation allows more control and more options... for example, allows you to synchronize more precisely with an audio track?

Nothing. HTML5 audio has no equivalent to SWF streaming audio to force animation and audio to stay in sync.

[rosebudd]

It depends. There are plug ins that aren't part of the free Tween Max Tweenlite like split text. It depends on what you want to achieve. They have a forum, and a sub forum for banner ads, with some very helpful folks.

For me, it was deadlines are crunch time for me.

[paul_james123]

Clay UUid wrote:
Nothing. HTML5 audio has no equivalent to SWF streaming audio to force animation and audio to stay in sync

That's disappointing. I've used a method that used settimeouts (set the queue points using timeouts after starting the soundtrack...but found it not the the best. There was quite a bit of slipping.

How do people do interactive animation on the web and sync it tightly with sound?  What is the best method?Thanks