GreenSock TimelineLite Animation Step by Step.

If you want to automate the step by step animation frame, GreenSock TimelineLite animation is going to do that for you. In this part of the GreenSock tutorial series, we are going to cover the step by step of TimelineLite in GreenSock. If you are new to GreenSock technology, we recommend you to take a  look at our beginner tutorial on GSAP first, then come to this part.

What is GreenSock TimelineLite Animation?

We have already covered the TweenLite and TweenMax . TimelineLite is similar to those class. GreenSock TimelineLite animation feature will help you managing sequences of TweenLite, TweenMax, TimelineLite, and/or TimelineMax instances. If you have worked with Adobe Flash or any other animation studio, you are familiar with the timeline concept.

How it works?

First, we create an instance of TimelineLite class.

var timeLine = new TimelineLite();

Second, let’s select the objects to an array.

var letters = $('.letter').toArray();

Now we can apply the to(), from or staggerFrom functions. You already know that staggerFrom function will accept an array argument and it will automate the sequences for animation to happen. Here is how we do that.

timeLine.staggerFrom(letters,2,{
  y:"-100px",
  ease: Elastic.easOut
},1);

As you can see, we used the timeline object we have created and applied the staggerFrom function to it. The Last value for staggerFrom function will specify the time interval between each object to animate. You can use floating point number if you want.

Alternatively, you can use to() or from() function. But, you know that if you use those functions, you will need to select every object separately. For example:

timeLine.from(letter[0],2,{
  y:"-200px",
  ease: Elastic.easeOut
});

timeLine.from(letter[1],2,{
  y:"-200px",
  ease: Elastic.easeOut
});

timeLine.from(letter[2],2,{
  y:"-200px",
  ease: Elastic.easeOut
});

The staggerFrom is a lot easy and flexible to use.

Here is the final demo.

[codepen_embed height=”265″ theme_id=”dark” slug_hash=”KMzZvo” default_tab=”result” user=”Hujjat”]See the Pen <a href=’http://codepen.io/Hujjat/pen/KMzZvo/’>GreenSock Practice #7 Timeline animation</a> by Hujjat Nazari (<a href=’http://codepen.io/Hujjat’>@Hujjat</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

Conclusion

It was how you can use TimelineLite instead of TweenMax or TweenLite. We hope it has been informative for you, if you have any questions related to this topic, feel free to comment bellow. 🙂