Skip to main content
paul_james123
paul_james123
Inspiring
February 20, 2019
Answered

Greensock timeline tweens

  • February 20, 2019
  • 2 replies
  • 1554 views

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

    This topic has been closed for replies.
    Correct answer rosebudd10027515

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

    2 replies

    C
    ClayUUID
    Legend
    February 21, 2019

    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.

      R
      rosebudd10027515
      Inspiring
      February 21, 2019

      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.

        R
        rosebudd10027515Correct answer
        Inspiring
        February 20, 2019

        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
          paul_james123Author
          Inspiring
          February 20, 2019

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

          Terms & ConditionsAccessibility statement
          Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices