SVG Animations

Chapter 9. GreenSock’s Timeline

In the last chapter we covered some of the basic syntax for GreenSock tweening. In this chapter, we’ll go over one of my favorite GreenSock features: the timeline.

A Simple Timeline

In the last chapter we talked about GreenSock’s syntax, focusing on the TweenMax part of the statement. You might recall that I mentioned TweenMax includes TimelineMax, GreenSock’s full-featured timeline tool.  Why is this such a good thing?

TimelineMax is a really powerful tool for controlling multiple animations and sequencing. In order to use it, you need to instantiate it. We do this by calling var tl = new TimelineMax(); (you could also use let or const here , if you’re using ES6, and you can call tl whatever you wish—tl tends to be the industry standard).

You could just use TweenMax for everything, but the default for TweenMax is to have everything fire at once. You would have to add delays to each animation to get them to fire one after another.

Let’s say we want to animate the three shapes in Figure 9-1 in a row from left to right, one after another.

Figure 9-1. Animating in a row

So far, we’ve learned to express it like this:

TweenMax.to(".star", 3, {x: 300, ease: Power4.easeOut});
TweenMax.to(".circle", 3, {x: 300, delay:3, ease: Power4.easeOut});
TweenMax.to(".hex", 3, {x: 300, delay:6, ease: Power4.easeOut});

This works, but if we had more elements, we’d ...