Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
mthomson

How to return timeline outside of loop?

Go to solution Solved by Jonathan,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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.

Link to comment
Share on other sites

Hi mthomson :)

 

pls make a Codepen Demo available for your questions .

  • Like 1
Link to comment
Share on other sites

  • Solution

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 :)

  • Like 4
Link to comment
Share on other sites

@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?

Link to comment
Share on other sites

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

 

:)

Link to comment
Share on other sites

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();
Link to comment
Share on other sites

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 :D

 

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/

 

:)

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×