Highlighted

Greensock timeline tweens

Contributor ,
Feb 20, 2019

Copy link to clipboard

Copied

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

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);

Views

571

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Greensock timeline tweens

Contributor ,
Feb 20, 2019

Copy link to clipboard

Copied

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

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);

Views

572

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Feb 20, 2019 0
Enthusiast ,
Feb 20, 2019

Copy link to clipboard

Copied

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);

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 20, 2019 2
Contributor ,
Feb 20, 2019

Copy link to clipboard

Copied

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.)

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 20, 2019 0
Adobe Community Professional ,
Feb 20, 2019

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 20, 2019 1
Enthusiast ,
Feb 21, 2019

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 21, 2019 1
Contributor ,
Feb 21, 2019

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 21, 2019 0