Last time we’ve covered how to create a few simple tweens with GreenSock TweenLite, but what if we wanted to control the playback of all the tweens with one single timeline?

That’s where GreenSock TimelineLite comes very handy.

What you’ll learn

• How to create a simple timeline
• How to add tweens to a timeline
• How to create a slider to preview timeline
• How to overlap and delay tweens
• How to use labels
• How to use the staggerFrom() and staggerFromTo() methods

VIEW FINAL DEMO

Before We Start Animating

Today we’ll cover most of the TimelineLite section from the GreenSock Cheat Sheet, now it’s a good time to download and print it out.

DOWNLOAD GREENSOCK CHEAT CHEAT

1. Start Here

To follow this tutorial step by step, simply fork the starting CodePen and code with me.

FORK STARTING PEN

What we have for start are 3 boxes that are centered on a page and 3 simple Tweens fading the boxes in from the top and autoAlpha: 0.

This should all make sense if you’ve followed the Simple GreenSock TweenLite tutorial.

The start of these individual tweens is controlled by the delay: 0.5 and delay: 1.

Essentially all tweens have their own timeline and there is no way for us to easily control the playback of all of them in one sequence.

This might be ok for a few tweens but imagine if you would have 30 tweens and you would decide to include a new tween at the start of your “sequence”.

You would need to update all the delays of the following tweens to keep everything in sync.

Managing longer animation sequences with GreenSock TimelineLite is super easy, lets create one.

2. Create a New Timeline

Include TimelineLite.min.js in your CodePen.

<!-- You can find all the GreenSock Plugins on CDN -->
http://cdnjs.com/libraries/gsap

<!-- Include TimelineLite in your CodePen -->
https://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TimelineLite.min.js

Note: GreenSock TimelineLite does not include TweenLite, that’s why we have to include both of them at the same time.

Now we can create the new timeline.
// 1. Create a variable
var $box = $('#box'),
    $box2 = $('#box2'),
    $box3 = $('#box3'),
    tl = new TimelineLite();

Think about the new timeline as a new container that we can add all our tweens to.
3. Add Tweens to a Timeline
The syntax for including tweens to a timeline is pretty simple.
Add the following code to your CodePen and comment out the individual tweens.
// 2. Create tweens for our boxes
/*
TweenLite.from($box, 1, {y: '-=40', autoAlpha: 0, ease:Power4.easeInOut});
TweenLite.from($box2, 1, {y: '-=40', autoAlpha: 0, ease:Power4.easeInOut, delay: 0.5});
TweenLite.from($box3, 1, {y: '-=40', autoAlpha: 0, ease:Power4.easeInOut, delay: 1});
*/

// 3. Add Tweens to Timeline
tl.from($box, 1, {y: '-=40', autoAlpha: 0, ease:Power4.easeInOut}) // no comma or semi-colon
  .from($box2, 1, {y: '-=40', autoAlpha: 0, ease:Power4.easeInOut}) // no comma or semi-colon
  .from($box3, 1, {y: '-=40', autoAlpha: 0, ease:Power4.easeInOut}); // semi-colon after last tween

You can see that we are simply chaining the tweens without any delays.
This means that each tween will start when the previous finishes.
If you are more of a visual learner, here is a picture of what we have now.

What a beauty, one single timeline “container” and 3 tweens sitting next to each other.
4. Create a Slider to Control Playback

We’ll create a simple jQuery UI slider, that we’ll use to control our timeline.
Include jQuery UI CSS in the external stylesheet section. (Go to Settings > CSS > + add another resource)
//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css

Include jQuery UI JavaScript reference. (Go to Settings > JavaScript > + add another resource)
//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js

The html markup of our slider is already included in the html at the bottom of the page.
<div id="controls">
  <div id="slider"></div>
</div>

Now copy and paste the following CSS. It will center the slider just under our 3 boxes.
#controls {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 310px;
  transform: translate(-50%, 120px);
}

Initiate the jQuery slider and create a callback function that will run on every frame of our timeline:
// 4. Create a Slider to Control Playback
$("#slider").slider();

// updateSlider function
function updateSlider() {
  $("#slider").slider("value", tl.progress() *100);
}

As we’ve learned in the Simple GreenSock Tutorial, we can run the updateSlider function on every frame by using the onUpdate callback function.
Add the onUpdate callback to the tl timeline:
tl = new TimelineLite({onUpdate: updateSlider});

The slider now updates its position based on the overall progress of the timeline.
eg. 0 = start, 0.5 = half way, 1 = the end.
To control the timeline by dragging the slider left/right, we need to include these settings:
// 4. Create a Slider to Control Playback
$("#slider").slider({
  range: false,
  min: 0,
  max: 100,
  step:.1,
  slide: function ( event, ui ) {
    tl.pause();
    //adjust the timeline’s progress() based on slider value
    tl.progress( ui.value/100 );
    }
});

On slide we are pausing the tl timeline and setting the timeline progress to the current value of the slider.
Drag it left and right to see how it is now connected to the timeline.
5. Position tweens on a timeline
Instead of just positioning all tweens next to each other, we can also insert them to a specific time on the timeline.

Update the second tween to:
// 3. Add Tweens to Timeline
tl.from($box, 1, {y: '-=40', autoAlpha: 0, ease:Power4.easeInOut})
  .from($box2, 1, {y: '-=40', autoAlpha: 0, ease:Power4.easeInOut}, 0)
  .from($box3, 1, {y: '-=40', autoAlpha: 0, ease:Power4.easeInOut});

The position is the fourth parameter of the tween.
This will insert our $box2 tween right at the start of the timeline, 0.5 would position it 0.5 seconds into the timeline.
Using += and -= prefixes
If you look at many animations on the web, you’ll see that tweens often overlap each other instead of starting one after the other.
TimelineLite gives you a great flexibility and lets you offset or delay tweens by using += or -= position values.
How to overlap tweens

If we want to bring the playback of $box2 tween forward, we can set the position value to -=0.5.
.from($box2, 1, {y: '-=40', autoAlpha: 0, ease:Power4.easeInOut}, '-=0.5')

This would overlap the second tween with the first and the start of our third tween would be recalculated automatically.
It would also reduce the total time of our timeline to 2.5 seconds.
How to delay tweens

If we want to delay the $box2 tween, we can set the position value to +=0.5.
.from($box2, 1, {y: '-=40', autoAlpha: 0, ease:Power4.easeInOut}, '+=0.5')

This would create a 0.5 seconds gap between first and second tween.
The overall length of our timeline (tl.time()) is also automatically recalculated.
You can learn more about positioning tweens on a timeline in the Understanding the Position Parameter article by GreenSock.
Note: going forward lets reset the position of the tweens and remove all offsets or delays.
// 3. Add Tweens to Timeline
tl.from($box, 1, {y: '-=40', autoAlpha: 0, ease:Power4.easeInOut})
  .from($box2, 1, {y: '-=40', autoAlpha: 0, ease:Power4.easeInOut})
  .from($box3, 1, {y: '-=40', autoAlpha: 0, ease:Power4.easeInOut});

6. Using Labels on a Timeline
Another powerful tool that lets you to easily modify and control timelines is the use of labels.

To add a label to a timeline is very easy.
Lets add 'moveAway' label and a new tween to the end of the timeline.
// 3. Add Tweens to Timeline
tl.from($box, 1, {y: '-=40', autoAlpha: 0, ease:Power4.easeInOut})
  .from($box2, 1, {y: '-=40', autoAlpha: 0, ease:Power4.easeInOut})
  .add('moveAway')
  .from($box3, 1, {y: '-=40', autoAlpha: 0, ease:Power4.easeInOut})
  .to($box, 1, {x: '-=100', ease:Power1.easeInOut}, 'moveAway');

The above code will add a label between the second and third tween and our new tween will start playing when the timeline’s virtual playhead reaches this label.
This looks like $box doesn’t like the presence of $box3 and moves away when the last box fades in.
We can also add the $box2 to the same tween and move both boxes to the left at the same time.
.to([$box, $box2], 1, {x: '-=100', ease:Power1.easeInOut}, 'moveAway');

To move multiple objects, we need to wrap them in square brackets like this [element1, element2].
7. How to use staggerFrom(), staggerTo() and staggerFromTo() methods

To get familiar with the staggerFrom() method, lets reset again to our 3 tweens on a timeline.
// 7. staggerFrom()
tl.from($box, 1, {y: '-=40', autoAlpha: 0, ease:Power4.easeInOut})
  .from($box2, 1, {y: '-=40', autoAlpha: 0, ease:Power4.easeInOut})
  .from($box3, 1, {y: '-=40', autoAlpha: 0, ease:Power4.easeInOut});

We can combine all three tweens into one staggerFrom tween like this:
// 7. staggerFrom()
tl.staggerFrom([$box,$box2,$box3], 1, {y: '-=40', autoAlpha: 0, ease:Power4.easeInOut});

As you can see this moves all 3 boxes at the same time, because we haven’t included the stagger time.
// 7. staggerFrom()
tl.staggerFrom([$box,$box2,$box3], 1, {y: '-=40', autoAlpha: 0, ease:Power4.easeInOut}, 0.5);

Now we’re spacing the tweens evenly 0.5 seconds apart. The visual timeline would like something like this:

Except the extra stagger time that we need to include, this method works exactly the same way as the from() method, that we’ve covered in this tutorial.
To make our code a bit more compact we can create a new variable $boxes and select all three boxes at the same time.
// add a new variable boxes to our variables
$boxes = $('.box')

// 7. staggerFrom() - update element to $boxes
tl.staggerFrom($boxes, 1, {y: '-=40', autoAlpha: 0, ease:Power4.easeInOut}, 0.5);

This is handy especially if you have a lot elements with the same class.
Using staggerTo() and staggerFromTo()
Now we’ll add two more tweens and explore how staggerTo() and staggerFromTo() methods work.
// 7. staggerFrom(), staggerTo(), staggerFromTo()
tl.staggerFrom($boxes, 1, {y: '-=40', autoAlpha: 0, ease:Power4.easeInOut}, 0.5)
  .staggerTo($boxes, 1, {x: -250, autoAlpha: 0, ease:Power4.easeInOut, clearProps: 'x'}, 0.5)
  .staggerFromTo($boxes, 1, {y: '+=40', immediateRender: false}, {rotation: 45, transformOrigin: 'top right', autoAlpha: 1, ease:Power4.easeInOut}, 0.5)

This sequence moves the boxes 3 times. We are already familiar with the first move, right?
The second .staggerTo() tween moves all 3 boxes to the left and fades them out.
The third .staggerFromTo() tween fades the boxes in from the bottom and rotates them at the same time.

You can see that we are also including clearProps: 'x' in our second tween. This resets the X position of the boxes back to the stylesheet position at the end of the tween.
The final tween has also immediateRender: false in the from vars.
This will make sure that the from values of this tween are only rendered when the virtual playhead reaches this tween.
Change it to true to see how it affects the animation.
Final CodePen Demo
Hover over the CodePen and click on RERUN to see the final animation.

4864

Conclusion
Today you’ve learned how to create a timeline, how to insert tweens into different positions using a few methods, but there is still so much to learn about GreenSock.
Hopefully this guide helped you to get started with GreenSock timelines.
Do you have any GSAP specific questions? Let me know in the comments below.
Happy tweening.
Other GreenSock Learning Resources

Who’s the boss of your tweens?
TimelineLite API Docs
Simple GreenSock Tutorial – Your first steps with GSAP 
GreenSock course workbook – Print + eBook
GreenSock Workshop – Online course with over 8hrs of GreenSock Tutorials

Share this
TwitterFacebookGoogle+
Want More GreenSock Tutorials?
Join me in the GreenSock Workshop and learn how to build 3 interactive projects from start to finish.


    

        

            
Like What You're Reading?
            

                

                    
Sign up to receive my future tutorials and demos straight to your inbox.
                
                

                     
   
     
       
Success! Now check your email to confirm your subscription.
     
           
                            
         
           
There was an error submitting your subscription. Please try again.
         
       
       
         Email Address                         
       
                
                                I'd like to receive the free email course.                          SIGN ME UP!            
   
  
    
                
                

                    
No spam, Unsubscribe at any time. 
                
            
            
   
        
    
 
   
   
     
Download Free Toolkit
     
       
All you need to know to get started with GreenSock and ScrollMagic, in one single package. Straight into your inbox.
     
      
       
Success! Now check your email to confirm your subscription.
     
           
                            
         
           
There was an error submitting your subscription. Please try again.
         
       
       
         Email Address                
       
                
                  Yes, Send It!                       100% Privacy. Guaranteed!           Powered by Kit