Globally easing a timeline

[Matt Severin]

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.

 

http://web.mac.com/mattparkerseverin/flash/example.html

 

Thank you in advance.

[Carl]

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();
newBox.x=i*62;
addChild(newBox)
tl.append(TweenMax.fromTo(newBox, .8, {alpha:0}, {alpha:1, immediateRender:true}), -.6);
}

//setup the buttons	
normal.buttonMode=true;
normal.mouseChildren=false;
eased.buttonMode=true;
eased.mouseChildren = false;


normal.addEventListener(MouseEvent.CLICK, playNormal)

//function to play the timeline normal
function playNormal(e:MouseEvent):void{
easedTimeline.kill();
tl.restart();
}



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{
	easedTimeline.restart();
}

 

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

 

enjoy

 

Carl

[GreenSock]

Yep, Carl's suggestion is right on. You could also just tween the TimelineLite's (or TimelineMax's) timeScale property to speed it up or slow it down.

[Matt Severin]

Thank you for your help!