Jump to content
Search Community

Globally easing a timeline

Matt Severin test
Moderator Tag

Recommended Posts

Hi, I've been using Tweenlite for some time and am comfortable with it now. I'm just starting to learn TimelineLite/Max.


I'm having a hard time determining if it can do a specific task that I need.


I'd like to animate dozen of clips, they'd all fade in one after the other. I'd like to know if there is a way to globally ease a timeline?


For example, I may want to do a Strong.easeOut over the entire timeline so that the first few clips fade in very fast and the last few clips' timing lingers, not fading in as fast as the first ones.



Here is a crude example I made in After Effects, I made an animation where each square fades in, in .5 seconds, one after the other.


Then I placed that animation within a parent comp where I could ease the timing so the first squares are faster, and the ending squares are slower.




Thank you in advance.

Link to comment
Share on other sites

yes you can use a TweenMax to control the playback rate of a timeline.


the way I'm familiar with allows you to tween a timelines currentProgress property and apply an ease to that tween like so:


TweenMax.fromTo(timeline, 8, {currentProgress:1, ease:Circ.easeOut});


I made a little example that you can view here:

http://www.snorkl.tv/dev/easedTimeline/ ... eline.html


the code looks like this:



import com.greensock.*; 
import com.greensock.easing.*;

var tl:TimelineMax = new TimelineMax({paused:true});

// add a whole mess of boxes to the stage and append tweens for each to a timelinemax instance:
for(var i:Number = 0; i	var newBox:Box = new Box();
tl.append(TweenMax.fromTo(newBox, .8, {alpha:0}, {alpha:1, immediateRender:true}), -.6);

//setup the buttons	
eased.mouseChildren = false;

normal.addEventListener(MouseEvent.CLICK, playNormal)

//function to play the timeline normal
function playNormal(e:MouseEvent):void{

eased.addEventListener(MouseEvent.CLICK, playEased)

//special tween to ease the playback of the timeline:
var easedTimeline:TweenMax = TweenMax.fromTo(tl, 8, {currentProgress:0}, {currentProgress:1, ease:Circ.easeOut, paused:true});

//control the tween that tweens the timeline's currentProgress property
function playEased(e:MouseEvent):void{


there may be a more elegant approach, but this seems to work pretty closely to your example.

fiddle with the easedTimeline duration and ease types


download flash cs4 fla here: http://www.snorkl.tv/dev/easedTimeline/easeTimeline.fla





Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...