Tween A TimelineLite for Ultimate Sequencing Control and Flexibillity

by carl schooff on March 22, 2011 · View Comments

in GreenSock Tweening Platform Tips

This movie requires Flash Player 9

Here we are going to talk about a tweening technique that will open up a whole new way of controlling sequenced animations. With GreenSock’s Tweenlite we can tween and ease the playback rate of a timeline or tween. Press the butons in the swf above to see how tweening the currentProgress property of a simple TimelineLite can have dramatic effects.

Watch the Video on Tweening currentProgress and timeScale

This tutorial focuses on tweening a TimelineLite instance’s currentProgress and timeScale properties. I want to note that you can also tween these properties on TweenMax tweens as well. TweenLite and TweenNano do not have these properties.

Often people ask how they can adjust the playback of their allTo() tweens. Usually they want to progressively speed up the animation or the delay. Being that allTo() creates an array of tweens, and not a single tween, we need to put the allTo into a TimelineLite/Max first. Once all these tweens are added to a timeline we can tween that timeline’s currentProgress or timeScale properties to get the effect we want.

Sample Code for easing the currentProgress of a TimlineLite

var tl:TimelineLite = new TimelineLite({paused:true});
tl.appendMultiple(TweenMax.allTo(mcs_array, 1, { scaleX:1, scaleY:1, alpha:1 }, .2));

//create a tween that changes the currentProgress of the timeline named tl
var bounceOut:TweenLite = TweenLite.to( tl, 3, { currentProgress:1, ease:Bounce.easeOut } );

restarting a tween of a timeline
If your timeline has already played to the end (without the aid of a tween) note that its currentProgress will be 1. Tweening the currentProgress to 1 will have no effect as the virtual playhead is already at the end.

It may be necessary to rewind the timeline before tweening its currentProgress like so

tl.currentProgress = 0;
bounceOut.restart();

Tween a tween’s timeScale property for smooth fast forward action

This movie requires Flash Player 9

A tween or timeline’s timeScale property dictates the speed at which it play. By default the timeScale of a tween is set to 1. The lower the timeScale, the slower it will play. To speed up a tween or timeline, simply adjust the timeScale to be greater than 1.

AS3 code to smoothly adjust a timeline’s playback speed on the fly

TweenLite.to(tl, .5, {timeScale:8});

Download Source Files

SNORKLtv_easeTimeline_CS4

Additional Resources

Some more TimelineLite/Max Tutorials: From Snork.tv
Offical TimelineLite/Max info: From GreenSock.com

Post to Twitter Post to Facebook

  • http://www.facebook.com/profile.php?id=290301287 Devon Franklyn

    Thanks for the tip Carl. Should save me a few lines of code in the future. :)

  • http://www.snorkl.tv/ carl schooff

    glad you liked it. I continue to be amazed at how you can manage to do so
    much with so little code when using GreenSock.
    thanks for stopping in.

    Carl

  • Snefer

    hi Carl

    what parameters i can use here:
    someTween.reverse( /* HERE */ );
    ?
    I would like be able launch tltween again:
    someTween.reverse({onComplete: function_name});

  • http://www.snorkl.tv/ carl schooff

    for someTween.reverse() the only value you can pass in is a Boolean stating
    whether or not the tween should resume playing when it is reversed:

    http://www.greensock.com/as/docs/tween/com/greensock/core/TweenCore.html#reverse()

    you can add an onReverseComplete:someFunction to a tween or timeline

  • Snefer

    onReverseComplete doesnt happening. It would defeat purpose of having 1 transition timeline.
    On the other hand someTween.reverse(true) does nothing. i am sure that i am using it wrong.

    anyway here is the code:
    http://pastebin.com/23ped7Zj

    alse why arent u sleeping 3 hours ago .. .. autralia ? ;D

  • http://www.snorkl.tv/ carl schooff

    there is nothing built in for having a reverse repeat like you want. so you
    will need an onReverseComplete function to replay the tween forward

    var bgTxtBarsTween:TweenLite = TweenLite.to(tl, 2, {currentProgress:1,
    ease:Quad.easeInOut, onReverseComplete:goAgain});

    bgTxtBarsTween.pause();

    function goAgain(){
    bgTxtBarsTween.play();
    }

    function showBgTxtBars(e:Event = null):void{
    if (showBgTxtBarsOn<1) {
    bgTxtBarsTween.play();
    showBgTxtBarsOn = 1;
    }
    else { // what is cheat code to reverse() and then play() ?
    bgTxtBarsTween.reverse();
    }
    }

  • Snefer

    and then put some conditional like:
    function goAgain(){
    if (showBgTxtBarsOn < 3){ bgTxtBarsTween.play(); }
    }

    thats pretty wicked logic but it works, thx Carl that was v. educational.
    thank you v. much!

  • http://www.facebook.com/people/Marius-Posthumus/100001638378294 Marius Posthumus

    I’m trying to use currentProgress for a preLoader but It’s not really working, is it even possible?

  • http://www.snorkl.tv/ carl schooff

    If your preloader script can generate a number between 0 and 1, that value
    can be passed into a tween tweens the currentProgress of a timeline. so yes,
    it is very possible.

blog comments powered by Disqus

Previous post:

Next post: