I'm a little confused about how to return a timeline for later use.
I have a number of elements that I am looping through and playing my timeline on, however, I need to return the timeline outside of this loop, so that I can call the .kill() method on it, inside of another function.
So my functions looks like this:
dtnavs = {
runStuff: function(){
dtnavs.cellFloatyTweens();
},
killStuff: function(){
// not sure how to kill the cellFloatTL here?
},
cellFloatyTweens: function(){
dtnavs.cell.each(function(){
cellFloatTL = new TimelineMax()
.to(this, dtnavs.getRandomNum(8,17), {xPercent: dtnavs.getRandomNum(0.5,12.5), yPercent: dtnavs.getRandomNum(1.5,14), rotation: "'-=" + dtnavs.getRandomNum(-20,1) + "'", yoyo:true, repeat:-1, ease: Power2.easeInOut});
cellFloatTL.seek(9); //So when it starts it's already moving
});
}
}
Is it possible to call kill on this timeline, inside another method/function? I thought I could possibly do this, but it doesn't seem to be working:
dtnavs = {
runStuff: function(){
dtnavs.cellFloatyTweens().play();
},
killStuff: function(){
dtnavs.cellFloatyTweens().kill();
},
cellFloatyTweens: function(){
cellFloatTL = new TimelineMax();
dtnavs.cell.each(function(){
cellFloatTL.to(this, dtnavs.getRandomNum(8,17), {xPercent: dtnavs.getRandomNum(0.5,12.5), yPercent: dtnavs.getRandomNum(1.5,14), rotation: "'-=" + dtnavs.getRandomNum(-20,1) + "'", yoyo:true, repeat:-1, ease: Power2.easeInOut});
cellFloatTL.seek(9); //So when it starts it's already moving
});
return cellFloatTL;
}
}
The above code only runs my tween on one of the dtnavs.cell elements, and I need it to loop through them all and then be able to kill the whole thing at a later time. Thanks in advance for any insight. PS: I can add a codepen if you need, but my issue is really in syntax, not with the tween it's self, so I thought that just code would be sufficient here.