Skip to content

GSAP Timeline Controls — Sequencing and Managing Animations

DodaTech Updated 2026-06-28 3 min read

In this tutorial, you will learn about GSAP Timeline Controls. We cover key concepts, practical examples, and best practices to help you master this topic.

GSAP timeline controls manage multiple tweens in sequence or in parallel, providing precise timing with position parameters and playback methods.

What You'll Learn

By the end of this guide, you will create timelines with sequential tweens, use position parameters for overlap and gap, control playback with play/pause/reverse, nest timelines inside timelines, and use labels for complex sequencing.

Basic Timeline

var tl = gsap.timeline({ repeat: 1, yoyo: true });

tl.to('.box1', { x: 200, duration: 0.5 })
  .to('.box2', { x: 200, duration: 0.5 })
  .to('.box3', { x: 200, duration: 0.5 });

Position Parameters

var tl = gsap.timeline();

tl.to('.box1', { x: 200, duration: 0.5 })       // 0s
  .to('.box2', { x: 200, duration: 0.5 }, '-=0.2') // overlap
  .to('.box3', { x: 200, duration: 0.5 }, '+=0.5') // gap
  .to('.box4', { x: 200, duration: 0.5 }, 0);       // at start

Playback Control

var tl = gsap.timeline();

// Later
tl.play();
tl.pause();
tl.reverse();
tl.progress(0.5);
tl.time(5);
tl.seek('label1');

Labels

var tl = gsap.timeline();

tl.to('.box1', { x: 200, duration: 0.5 })
  .addLabel('midpoint')
  .to('.box2', { x: 200, duration: 0.5 })
  .to('.box3', { x: 200, duration: 0.5 }, 'midpoint');

Common Mistakes

1. Not Using Relative Position

With absolute positions like 0, tweens start at the beginning. Use relative ('-=0.5') for overlaps.

2. Timeline Repeat on Nested Timelines

Repeating a parent timeline also repeats child animations. Use totalRepeat or repeat on child.

3. Forgetting to Save Timeline Reference

Timelines must be stored in a variable for later control. Unreferenced timelines cannot be paused or reversed.

4. Position Parameter Gaps

Using '+=1' adds a 1-second gap. This can make sequences feel disjointed. Overlap for smoother flow.

5. Missing Defaults

Set timeline defaults for shared properties: gsap.timeline({ defaults: { duration: 0.5, ease: 'power2.out' } }).

Practice Questions

Q1: What is the default position for timeline children? A: '+=0' (end of the previous animation).

Q2: How do you make two tweens run in parallel? A: Use position 0 for both, or position '+=0' on the first and '<' on the second.

Q3: What does '-=0.5' mean as a position? A: Start 0.5 seconds before the end of the previous animation (overlap).

Q4: How do you add a gap between animations? A: Use '+=1' (start 1 second after the previous ends).

Q5: How do you jump to a specific point in a timeline? A: Use tl.seek('labelName') or tl.progress(0.5).

Challenge: Build a 5-step loading animation with overlapping tweens. Each step shows a progress bar segment. Labels mark 20%, 40%, 60%, 80%, 100%.

FAQ

Can timelines be nested?

Yes. Add a child timeline to a parent timeline with tl.add(childTimeline).

How do I clear a timeline?

Call tl.clear() to remove all children.

What is the maximum timeline length?

No hard limit. Performance degrades past 10,000 tweens.

Can I use ScrollTrigger with timelines?

Yes. ScrollTrigger can control a timeline with scrubbing.

How do I reverse only part of a timeline?

Use tween.progress() or tween.time() to jump to a point and reverse from there.

Try It Yourself

Build a sequential box animation with playback controls.

<!DOCTYPE html>
<html>
<head>
    <title>GSAP Timeline Demo</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12/gsap.min.js"></script>
    <style>
        .box { width: 60px; height: 60px; border-radius: 8px; margin: 6px; display: inline-block; }
        .b1 { background: #4ecdc4; } .b2 { background: #ff6b35; } .b3 { background: #2a9d8f; } .b4 { background: #e8a87c; }
        #controls button { margin: 4px; padding: 6px 12px; cursor: pointer; }
    </style>
</head>
<body style="font-family:sans-serif;padding:20px;">
<h2>Timeline Controls</h2>
<div id="controls">
    <button onclick="tl.play()">Play</button>
    <button onclick="tl.pause()">Pause</button>
    <button onclick="tl.reverse()">Reverse</button>
    <button onclick="tl.restart()">Restart</button>
    <button onclick="tl.seek('mid')">Go to Middle</button>
</div>
<div style="margin:10px 0;">
    <div class="box b1" id="box1"></div>
    <div class="box b2" id="box2"></div>
    <div class="box b3" id="box3"></div>
    <div class="box b4" id="box4"></div>
</div>
<script>
var tl = gsap.timeline({ paused: true, defaults: { duration: 0.4, ease: 'power2.out' } });

tl.to('#box1', { x: 300 })
  .to('#box2', { x: 300 }, '-=0.2')
  .addLabel('mid')
  .to('#box3', { x: 300 })
  .to('#box4', { x: 300 }, '-=0.2');
</script>
</body>
</html>

What's Next

Animate along a motion path.

MotionPath — Motion path plugin. Draggable — GSAP Draggable.

← Previous GSAP Callbacks — Events and Lifecycle Hooks Next → GSAP MotionPath — Animating Along SVG Paths

Built by the developers of DodaTech

Doda Browser, DodaZIP & Durga Antivirus Pro

Home Browse Gsap