Chapter 398: Timelines

Core Idea

Just like we've just seen with staggers, It's common to animate more than one thing. But what if we need more control over the order and timing of those animations?

Code Examples

// create a timeline
let tl = gsap.timeline()

// add the tweens to the timeline - Note we're using tl.to not gsap.to
tl.to(".green", { x: 600, duration: 2 });
tl.to(".purple", { x: 600, duration: 1 });
tl.to(".orange", { x: 600, duration: 1 });

• What it demonstrates: typical usage of Timelines in a GSAP animation.

Key Takeaways

1. Just like we've just seen with staggers, It's common to animate more than one thing. But what if we need more control over the order and timing of those animations?

Connects To

• to(): see ch089 — to
• from(): see ch050 — from
• fromTo(): see ch051 — fromTo