GSAP Timeline Tutorial: Sequence Multiple Animations Like a Pro

A hero often needs its label, heading, paragraph and CTA to appear in order. Separate delays work, but changing one duration can force several recalculations. A timeline lets GSAP manage the sequence.

const tl = gsap.timeline();
tl.from(".label", { opacity: 0, duration: 0.5 })
  .from(".title", { y: 40, opacity: 0, duration: 0.7 })
  .from(".description", { y: 20, opacity: 0, duration: 0.6 })
  .from(".button", { scale: 0.8, opacity: 0, duration: 0.5 });

1. What is a GSAP timeline?

A timeline is a container for multiple tweens. It organizes their order and controls them as one unit.

2. Creating your first timeline

const tl = gsap.timeline(); creates a timeline instance stored in tl. Then tl.to() adds a child tween.

3. Timeline method chaining

Timeline methods return the same timeline, so chaining reads like the intended sequence.

4. Your first interactive timeline

5. Timeline with .to()

tl.to() adds destination tweens in sequence. Review gsap.to().

6. Timeline with .from()

tl.from() is useful for sequenced entrances because each target returns to its current rendered state. Review gsap.from().

7. Timeline with .fromTo()

tl.fromTo() adds a tween with explicit start and end states. Review gsap.fromTo().

8. Mixing to(), from() and fromTo()

One timeline can mix all three methods. Choose each according to whether the start, destination, or both must be explicit.

9. Timeline vs multiple delays

10. Understanding timeline duration

The overall duration depends on child durations and placement. Three sequential tweens lasting .5s, .5s and 1s total approximately 2 seconds.

11. Timeline defaults

const tl = gsap.timeline({ defaults: {
  duration: 0.6, ease: "power2.out"
}});

Defaults remove repetition; an individual child can still override them.

12. paused: true

A paused timeline is built but waits for tl.play(). This suits controlled demos and interactive UI.

13. Basic timeline controls

play(), pause(), resume(), reverse() and restart() affect the complete sequence.

14. Interactive timeline controls

15. Timeline progress

tl.progress() reports 0 at the beginning, 0.5 halfway and 1 at completion. The demo above provides a readable percentage.

16. Timeline with stagger

17. Timeline with easing

Defaults create consistency, while a child can use a special ease such as back.out(1.3). Review easing and expressive easing.

18. Practical hero timeline

19. Service section timeline

20. Building a step-by-step UI sequence

The code can mirror the experience developers plan.

21. Timeline as a storyboard

Plan scenes first: introduce heading, show description, reveal cards, then show the CTA. Translate each scene into a chained child tween.

22. Reusing a timeline

Store a timeline once, then call play(), reverse() or restart() instead of constructing uncontrolled copies.

23. Timeline callbacks

onStart runs when playback begins; onComplete runs when the sequence completes. Keep callback responsibilities focused.

24. Interactive timeline builder demo

25. Timeline visualization

This simplified diagram communicates order rather than advanced position syntax.

26. Why timelines scale better

When animation A changes, a timeline naturally shifts sequential children; separate manually calculated delays may need adjustment.

27. Timeline vs stagger

Combine both: heading → paragraph → cards with stagger → CTA.

28. Timeline vs delay

29. Common timeline mistakes

1. Using tl before creating it.
2. Creating needless timelines.
3. Mixing many manual delays without reason.
4. Forgetting paused: true for controlled demos.
5. Targeting real site UI from a demo.
6. Stacking timelines on repeated clicks.
7. Skipping reset and reduced motion.
8. Confusing stagger with timeline.
9. Loading GSAP twice.

30. Timeline performance

Timelines organize tweens; performance still depends on properties and workload. Prefer suitable transforms and opacity over unnecessary layout-heavy animation.

31. Accessibility

Reduced-motion mode shows final content immediately, shortens decorative sequences and keeps every control and status message available.

32. Mini challenge

Create one timeline that reveals label, title, paragraph and button in that order.

33. Quick reference

34. Mental model

A timeline is the conductor; tweens are individual performers. The conductor maintains sequence and controls playback as a whole.

35. Preview: timeline controls

The next lesson goes deeper into play, pause, resume, reverse, restart, seek, progress and timeScale. It remains unlinked until created.

Review GSAP basics, targeting, stagger and the previous expressive-easing lesson.

Frequently asked questions