GreenSock for Beginners (Part 2): GSAP’s Timeline

The aim of this second part of GreenSock for Beginners is to introduce you to GreenSock's TimelineMax. You'll be learning:

• Why you need a timeline
• How to include multiple tweens in a timeline
• How to package multiple timelines into functions and nest them inside a master timeline for greater flexibility.

By the end of this tutorial, you'll be comfortable working with GreenSock's timeline to manipulate and fully control multiple tweens.

For an introduction to the basics of GreenSock, including how to work with TweenMax for sequencing and staggering simple animations, head over to part 1 of this multi-part article.

The GreenSock articles are part of the series Beyond CSS: Dynamic DOM Animation Libraries. Here's what I covered in the past instalments:

• Animating the DOM with Anime.js touches on how to make the best use of animation on the web and when you could consider using a JavaScript animation library instead of CSS-only animation. It then focuses on Anime.js, a free and lightweight JavaScript animation library
• Fun Animation Effects with KUTE.js introduces you to KUTE.js, a free and feature-rich JavaScript animation library
• Make Your Website Interactive and Fun with Velocity.js (No jQuery) shows you how to use Velocity.js, an open source, robust free animation library, to create performant web animations
• GreenSock for Beginners: a Web Animation Tutorial (Part 1) is an overview of GreenSock, also known as GSAP (GreenSock Animation Platform), where I discuss the library's modules and licensing model. I also show you how to code a simple tween, sequences of tweens, and staggering animations using GSAP TweenMax.

Why Would You Need GreenSock's Timeline to Code Your Web Animations?

In Part 1, you learned how to add different animations to an element or multiple elements by creating a number of independent tweens and coordinating their timings with each tween's delay property.

By default, stacking one tween after another results in all tweens happening at once.

What would be more helpful, however, is to be able to control when a tween is going to happen with respect to other tweens, e.g., at the same time, 1 second or half a second before or after, etc.

Take this basic example with just two tweens. Here's what happens:

• Tween 1: a circle shape grows and shrinks as it rotates on its X and Y axes
• Tween 2: some text pops up.

The GSAP snippet that makes it work looks like this:

[code language="js"]
// scale down the text
// and hide it before the animation begins
TweenMax.set('.example__title', {
scale: 0.2,
autoAlpha: 0
});

// scale the circle shape down before
// the animation begins
TweenMax.set('.example__ball', {
scale: 0.2
});

// tween 1
TweenMax.to('.example__ball', 0.5, {
rotationX: 360,
rotationY: 180,
scale: 1,
ease: Elastic.easeIn.config(2, 1)
});

// tween 2
TweenMax.to('.example__title', 0.5, {
autoAlpha: 1,
scale: 1,
ease: Back.easeOut.config(4)
});
[/code]

As you can see, both tweens happen at the same time, which is not the desired effect:

See the Pen GSAP Tutorial Part 2: Why the Timeline by SitePoint (@SitePoint) on CodePen.

If you want the text to appear just when the shape is about to stop rotating, you'll need to add an appropriate delay to tween2, like this:

[code language="js"]
// tween 2
TweenMax.to('.example__title', 0.5, {
// rest of the code here
delay: 0.6
});
[/code]

See the Pen GSAP Tutorial Part 2: Managing Sequences with Delay by SitePoint (@SitePoint) on CodePen.

This works, but imagine you want to change the duration of the first tween, or the number of times it repeats. You'll soon realize that the second tween doesn't automatically wait for the first one to come to a close before starting. Therefore, you'll need to adjust the delay's value on the second tween. With just two tweens and such a simple animation this won't be much of a problem. Not so when your animations are more ambitious and the number of tweens grows.

That's when you'll be super happy to know that GSAP has you covered with its robust and flexible TimelineLite and TimelineMax, both included in TweenMax.

Coordinating Multiple Tweens with GSAP's Timeline

Continue reading %GreenSock for Beginners (Part 2): GSAP’s Timeline%

by Maria Antonietta Perna via SitePoint