How to return timeline outside of loop?

[mthomson]

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.

[Diaco]

Hi mthomson 

 

pls make a Codepen Demo available for your questions .

[Jonathan]

Usually for building a timeline sequence with different parts you could do something like this:

var masterTL = new TimelineMax({paused:true});

function carMove(){

     var tl = new TimelineMax();

     tl.to("#car", 2, {x:"+=200"})
     /* more tweens go here */

     return tl;
}

function wheelsRotate(){

     var tl = new TimelineMax();

     tl.to("#wheels", 2, {rotation:"+=360"})
     /* more tweens go here */

     return tl;
}

masterTL
.add( carMove())
.add( wheelsRotate() )
.play();

This way you use the different parts for your animation over again depending on what you are animating

[violacase]

@jonathan. I think this word 'usually' may surely be phrased as 'a very good approach'. BTW... Haven't I seen this piece of code earlier?

[Jonathan]

Hello violacase, and Welcome to the GreenSock Forum!

 

If you want to learn more about Timeline management and the above technique. Please see this awesome codepen example by GreenSock. It is the same animated banner on the GreenSock homepage:

 

See the Pen yhEmn by GreenSock (@GreenSock) on CodePen

 

[mthomson]

Thanks Jonathan - That makes things a bit more clear. So would it also work if your carMove and wheelsRotate functions used TweenMax, instead of Timelines? I just want to fully grasp the different ways timelines and tweens work together.

Like this:

var masterTL = new TimelineMax({paused:true});

function carMove(){

     var tween = TweenMax.to("#car", 2, {x:"+=200"})
     /* more tweens go here */

     return tween;
}

function wheelsRotate(){

    var tween = TweenMax.to("#wheels", 2, {rotation:"+=360"})
     /* more tweens go here */

     return tween;
}

masterTL
.add( carMove())
.add( wheelsRotate() )
.play();

[Jonathan]

Yes since the GSAP add() method accepts a timeline, and a tween instance like TweenMax or TweenLite. But it would be best practice just to use a timeline since you will have greater control when you use timelines in GSAP

 

add()

• value : *
  The tween, timeline, callback, or label (or array of them) to add

.add( value:*, position:*, align:String, stagger:Number ) 

http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/add/