[Tweening in Edge animate]

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

[Tweening in Edge animate]

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?

[Tweening in Edge animate]

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?