---
title: 'Sequencing'
excerpt: 'Modal choreography, onboarding beats, and splash-style letter reveals.'
icon: 'Play'
---

## Why timelines

A **timeline** is a clock that owns multiple tweens. Instead of juggling delays, you place each beat with a **position parameter** so choreography stays readable and editable.

| Position | Meaning |
| --- | --- |
| (default) | Append after the previous end |
| `'<'` | Start with the previous tween |
| `'<0.05'` | 0.05s after the previous starts |
| `'-=0.1'` | Overlap — start 0.1s before the previous ends |
| `'+=0.15'` | Gap — wait 0.15s after the previous ends |

## Modal open sequence

Open a modal as three beats, not one fade: dim the world, grow the panel, then stagger the contents. `defaults` on the timeline apply ease (and other shared vars) to every child unless overridden.

1. Overlay fades in  
2. Panel scales up slightly overlapping (`'<0.05'`)  
3. Children stagger in overlapping the panel finish (`'-=0.1'`)

Watch: backdrop first, then card, then copy and buttons cascade.

<ComponentPreview>
  <GsapModalSequence />

  <DocsFileTabs title="Modal timeline">

```tsx title="modal-timeline.tsx"
const tl = gsap.timeline({ defaults: { ease: 'power2.out' } });
tl.from('.overlay', { autoAlpha: 0, duration: 0.2 })
  .from('.modal', { scale: 0.95, autoAlpha: 0, duration: 0.28 }, '<0.05')
  .from('.modal-item', { y: 12, autoAlpha: 0, stagger: 0.06, duration: 0.22 }, '-=0.1');
```

```html title="modal-timeline-markup.html"
<div class="absolute inset-0 flex items-center justify-center">
  <div class="gsap-overlay absolute inset-0 bg-black/40"></div>
  <div class="gsap-modal relative w-64 rounded-xl border bg-card p-4">
    <p class="gsap-modal-item">Delete project?</p>
    <p class="gsap-modal-item">This cannot be undone.</p>
    <div class="gsap-modal-item flex gap-2">
      <button>Cancel</button>
      <button>Delete</button>
    </div>
  </div>
</div>
```

  </DocsFileTabs>
</ComponentPreview>

## Onboarding three-beat

Sequential steps with breathing room: `'+=0.15'` inserts a gap after each step finishes so the next card does not pile on. Good for checklists and wizards where reading time matters.

Three steps slide in one after another — not a simultaneous stagger.

<ComponentPreview replay>
  <GsapOnboardingBeat />

  <DocsFileTabs title="Onboarding timeline">

```tsx title="onboarding-timeline.tsx"
tl.from('.step-1', { x: -20, autoAlpha: 0 })
  .from('.step-2', { x: -20, autoAlpha: 0 }, '+=0.15')
  .from('.step-3', { x: -20, autoAlpha: 0 }, '+=0.15');
```

```html title="onboarding-timeline-markup.html"
<div class="space-y-3">
  <div class="gsap-step-1 rounded-lg border bg-card px-3 py-2">Connect repository</div>
  <div class="gsap-step-2 rounded-lg border bg-card px-3 py-2">Configure CI</div>
  <div class="gsap-step-3 rounded-lg border bg-card px-3 py-2">Deploy preview</div>
</div>
```

  </DocsFileTabs>
</ComponentPreview>

## Splash-style letters

Letter reveals are often one staggered tween rather than a deep timeline — still “sequencing,” just flattened. `back.out` gives a soft overshoot per glyph.

Splashy marketing moments only — do not stagger every heading in the app.

<ComponentPreview replay>
  <GsapSplashLetters />

  <DocsFileTabs title="Splash letters">

```tsx title="splash-letters.tsx"
gsap.from('.letter', {
  y: 24,
  autoAlpha: 0,
  rotation: 8,
  stagger: 0.04,
  duration: 0.45,
  ease: 'back.out(1.4)',
});
```

```html title="splash-letters-markup.html"
<div class="flex text-2xl font-bold">
  <span class="gsap-letter inline-block">L</span>
  <span class="gsap-letter inline-block">a</span>
  <span class="gsap-letter inline-block">u</span>
  <span class="gsap-letter inline-block">n</span>
  <span class="gsap-letter inline-block">c</span>
  <span class="gsap-letter inline-block">h</span>
</div>
```

  </DocsFileTabs>
</ComponentPreview>

Modals stay **centered** (`transform-origin: center`). Popovers use trigger origin — see [Transforms](/learn/gsap-react/core/transforms).