Tweening in Edge animate

[kevskeldon]

Hi, is there a way to tween between labels within a symbol's timeline in Edge Animate? I have seen examples on this forum of using tweenTo() etc but how are these integrated to a symbol's timeline that has an animation and labels in Edge? 

[Carl]

Hi and welcome to the GreenSock forums.

 

tweenTo() is a method of TimelineMax which allows you to tween to a time or label in a TimelineMax timeline. A label in a TimelineMax and a label in an Edge symbol's timeline are two very different things.

 

We currently don't have any Edge plugins would specifically handle what you need to do.

As the popularity of Edge grows we will keep our eye on what types of tools folks may need to better control their Edge creations with GSAP.

 

Thanks for posting here.

[chrisgannon]

Hi, is there a way to tween between labels within a symbol's timeline in Edge Animate? I have seen examples on this forum of using tweenTo() etc but how are these integrated to a symbol's timeline that has an animation and labels in Edge? 

Are you trying to use GSAP to tween between labels or is this a pure Edge Animate timeline tweening question?

[kevskeldon]

Are you trying to use GSAP to tween between labels or is this a pure Edge Animate timeline tweening question?

Its a need to tween the timeline of a symbol in Edge Animate back and forward between labels on the click of buttons. I just figured I would probably need Greensock to achieve this?

[chrisgannon]

Its a need to tween the timeline of a symbol in Edge Animate back and forward between labels on the click of buttons. I just figured I would probably need Greensock to achieve this?

It's certainly possible to play and reverse a EA timeline using GSAP based on time - just bear in mind that the EA timeline is ms and GSAP using secs so you just divide by 1000.

 

I like to use TimelineMax for this kind of thing - you basically set up a TimelineMax that is a clone of the EA timeline (i.e. has the same duration). It has an onUpdate function that, when it plays, tells the EA timeline playhead to be the same as the TimelineMax playhead.

 

So if your EA timeline is 10 seconds just create an empty TimelineMax like this:

var t = new TimelineMax({paused:true, onUpdate:playEdgeTimeline});
var emptyTween = TweenMax.to($(''), 0, {x:0});
t.add(emptyTween, 10);

 

//get the time positions of your Edge labels - divide by 1000 to get secs
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);


}

 

 

That's it!

 

If you want to control that specific tween you can do things like:

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

 

 

 

Hope that helps.

[kevskeldon]

It's certainly possible to play and reverse a EA timeline using GSAP based on time - just bear in mind that the EA timeline is ms and GSAP using secs so you just divide by 1000.

 

I like to use TimelineMax for this kind of thing - you basically set up a TimelineMax that is a clone of the EA timeline (i.e. has the same duration). It has an onUpdate function that, when it plays, tells the EA timeline playhead to be the same as the TimelineMax playhead.

 

So if your EA timeline is 10 seconds just create an empty TimelineMax like this:

var t = new TimelineMax({paused:true, onUpdate:playEdgeTimeline});
var emptyTween = TweenMax.to($(''), 0, {x:0});
t.add(emptyTween, 10);

 

//get the time positions of your Edge labels - divide by 1000 to get secs
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);


}

 

 

That's it!

 

If you want to control that specific tween you can do things like:

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

 

 

 

Hope that helps.

Thank you very much Chris, appreciate the help

[Guest KatieCassidy]

Hi, Chris. Newbie here, with a probably very elementary question... how do I build the button clicks?