Can I save the calculated timelines in a global variables?

[Sophia]

Hello all,

 

In my project, there will be many gsap timelines for different elements, and I will call them at different times. For these timelines will be used for many times, I want to save them in a global variables instead of calculated them each time.

 

 

But it works with an unexpected behavior. It just run to the end state of the timeline directly without any animations. Does the timeline will be destoryed after animating each time?Any help very much appreciated!

 

Just like the simple code below:

var Timelines = {};

function getTimeline(_element, _props){
   var tl = new TimelineMax({paused:true});
   tl.to(_element, 1, _props, 0);
   Timelines[elementId] = tl;
}

$(el).click(function(){
var tl = Timelines[elId];
if(!tl){
 tl = getTimeline(el, _elProps);
}
tl.play();
})

Looking forward to your reply. 

Thank you very much.

[GreenSock]

No, the timeline isn't destroyed after each completion, but it also doesn't automatically rewind itself either. So if you play() it to the end and then try to play() it again, it simply tries to resume from wherever the playhead is (at the end in this case). So to solve you problem, it's probably as simple as calling tl.play(0) instead of tl.play() so that you're telling it to play from a time of 0 (the start). 

 

If that doesn't help, please create a reduced test case (codepen or jsfiddle) and we'd be happy to take a peek and see the issue in context. 

 

Happy tweening!