Controlling The Edge Animate Timeline With Greensock

Controlling The Edge Animate Timeline With Greensock TimlineMax

I recently answered a question on the Greensock forums about how to control the Edge Animate timeline with Greensock. The question was regarding whether it was possible to use Greensock to tween between two Edge Animate timeline labels.

I had done this before using time positions but it got me thinking about how you might do this. The answer is actually quite simple and is based on the same principle – time.

In Edge Animate there’s a handy function called getLabelPosition() like this:

sym.getLabelPosition('myLabel');

…where ‘sym’ is the main timeline (or it could be a symbol). Using this you can simply convert any label to a time value (just remember that Greensock uses seconds and Edge Animate used milliseconds).

The concept is to create a GSAP TimelineMax instance (you could just as easily use TimelineLite) and duplicate the properties of the Edge Animate timeline you want to control – so you duplicate its duration and label positions. Then you run the TimelineMax (using its super flexible controls) and, using its onUpdate functionality, you tell the Edge Animate playhead to be wherever the TimelineMax playhead is. Pretty simple eh?

So if you have an Edge Animate timeline that’s 10 seconds long your code would be:

//new TimelineMax instance - ensure it's paused to start with and assign a function to its onUpdate - this will control 
//the Edge Animate timeline
var t = new TimelineMax({paused:true, onUpdate:playEdgeTimeline});

//create an empty tween - currently in GSAP you can't create a blank one and just give it a duration value. This is a little hack
//that creates a blank jQuery element in an empty tween with a duration of 0 and places it at 10 seconds
var emptyTween = TweenMax.to($(''), 0, {x:0});

//add the empty tween at 10 seconds
t.add(emptyTween, 10);

//get the time positions of your Edge labels - divide by 1000 to get secs (this assumes you have 2 EA labels 
//called 'myEdgeLabel1' and 'myEdgeLabel2'
var timeFrom = sym.getLabelPosition('myEdgeLabel1')/1000; 

var timeTo = sym.getLabelPosition('myEdgeLabel2')/1000; 

//add label copies to your TimelineMax at the same positions 
t.addLabel('myMaxLabel1', timeFrom); 
t.addLabel('myMaxLabel2', timeTo); 

//Tween it! 
t.tweenFromTo('myMaxLabel1','myMaxLabel2'); 

//playEdgeTimeline is called onUpdate (every frame) and tells the EA timeline playhead to be at 
//the same time as the TimelineMax playhead - remember to multiply by 1000 for EA's timeline 
function playEdgeTimeline(){ 
 sym.stop(t.time()*1000); 
}

And that’s it!

If you want to control that specific tween (like reverse it onComplete) you just assign tweenFromTo to a variable like this:

var myLabelTween = t.tweenFromTo('myMaxLabel1','myMaxLabel2');
myLabelTween.vars.onComplete = function(){myLabelTween.reverse();};

Now go forth and tween those labels! πŸ™‚

Note: Carl from Greensock pointed out an easier way of making an empty timeline with a specific duration.

var tl = new TimelineLite();
tl.to({}, 2, {});//no target, 2 second duration, no props
CodeCanyon Scripts & Snippets
Buy my favourite Adobe Edge templates on CodeCanyon!
Chris Gannon
Chris Gannon is CEO of FrameSpark Interactive and is an interactive designer, animator and emerging user interface enthusiast. His current startup is Cerebrax, a funky quiz and training tool.

3 thoughts on “Controlling The Edge Animate Timeline With Greensock

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s