---
title: 'Labels & Playback'
excerpt: 'addLabel, tweenTo, notification stacks, and GSDevTools for debugging.'
icon: 'Play'
---

## Named beats

**Labels** mark named times on a timeline so you can seek, branch, or document choreography without magic numbers. `addLabel('details', '+=0.2')` plants a bookmark; `tweenTo('details')` animates the playhead there instead of jumping.

Use labels for multi-step tours, onboarding that can skip ahead, and any timeline you will scrub in DevTools.

## Label tour

Paused timeline with `intro` and `details` labels. Buttons (or `tweenTo`) move between beats — the dot pulses at intro, the panel appears at details.

Watch the playhead travel between named sections rather than raw seconds.

<ComponentPreview>
  <GsapLabelTour />

  <DocsFileTabs title="Label tour">

```tsx title="label-tour.tsx"
const tl = gsap.timeline({ paused: true })
  .addLabel('intro', 0)
  .to('.dot', { scale: 1.3, duration: 0.3 }, 'intro')
  .addLabel('details', '+=0.2')
  .to('.panel', { autoAlpha: 1, y: 0, duration: 0.3 }, 'details');

tl.tweenTo('details'); // seek to label
```

```html title="label-tour-markup.html"
<div>
  <div class="gsap-tour-dot mx-auto size-10 rounded-full"></div>
  <div class="gsap-tour-panel mt-4 rounded-lg border bg-card p-3 opacity-0">
    Step: intro / details / outro
  </div>
</div>
```

  </DocsFileTabs>
</ComponentPreview>

## Notification stack

A stack of toasts is usually a staggered entrance, not deep labels — but it still belongs in the playback chapter: same idea of coordinated timing across siblings. Each notification slides in from the right with a short stagger so the stack builds instead of popping as one block.

Replay to see the cascade rebuild from empty.

<ComponentPreview replay>
  <GsapNotificationStack />

  <DocsFileTabs title="Notification stack">

```tsx title="notification-stack.tsx"
gsap.from('.notif', { x: 40, autoAlpha: 0, stagger: 0.1, duration: 0.35, ease: 'power2.out' });
```

```html title="notification-stack-markup.html"
<div class="flex flex-col gap-2">
  <div class="gsap-notif rounded-lg border bg-card px-3 py-2">Email sent</div>
  <div class="gsap-notif rounded-lg border bg-card px-3 py-2">Profile updated</div>
  <div class="gsap-notif rounded-lg border bg-card px-3 py-2">Invite accepted</div>
</div>
```

  </DocsFileTabs>
</ComponentPreview>

## GSDevTools (dev only)

**GSDevTools** attaches a scrubber UI to any timeline or tween so you can pause, loop, and inspect timing while building. Point it at the animation instance with `GSDevTools.create({ animation: tl })`.

Use it to dial in overlaps and labels — then strip it before shipping.

<ComponentPreview>
  <GsapGSDevToolsDemo />

  <DocsFileTabs title="Gsdevtools">

```tsx title="gsdevtools.tsx"
import { GSDevTools } from 'gsap/GSDevTools';
gsap.registerPlugin(GSDevTools);
GSDevTools.create({ animation: tl });
```

```html title="gsdevtools-markup.html"
<div class="relative h-16 rounded bg-muted/40">
  <div class="gsap-dev-box absolute left-2 top-2 size-12 rounded-lg"></div>
</div>
```

  </DocsFileTabs>
</ComponentPreview>

<Callout variant="warning" title="Do not ship GSDevTools">
  Use only during development to scrub timelines. Remove from production bundles.
</Callout>

<Callout variant="dont" title="ScrollTrigger placement">
  Put ScrollTrigger on the **timeline** or a top-level tween — never on a child tween inside a timeline.
</Callout>