---
title: 'Control'
excerpt: 'Store tweens, play/pause/reverse, progress, and overwrite overlapping motion.'
icon: 'Play'
---

## Store the tween

Every tween method returns a **Tween** instance. Hold the reference when you need transport (play/pause), scrubbing (`progress`), or teardown (`kill`). Fire-and-forget is fine for one-shot entrances; interactive UI almost always needs the handle.

```tsx
const tween = gsap.to('.box', { x: 100, duration: 1, paused: true });
tween.play();
tween.pause();
tween.reverse();
tween.progress(0.5);
tween.kill();
```

Start paused when buttons drive playback — otherwise the tween races ahead of the first click.

## Transport controls

Store the tween in a ref, start `paused: true`, then wire buttons to `play` / `pause` / `reverse` / `progress`. Same instance for the whole session — do not create a new tween on every click unless you intend to.

Watch the hero tile: Play runs forward, Pause freezes mid-flight, Reverse walks back.

<ComponentPreview>
  <GsapTransportControls />

  <DocsFileTabs title="Transport controls">

```tsx title="transport-controls.tsx"
tweenRef.current = gsap.to('.gsap-hero', { x: 120, rotation: 360, duration: 2, paused: true });
// tweenRef.current?.play() | pause() | reverse() | progress(0.5)
```

```html title="transport-controls-markup.html"
<div>
  <div class="relative h-16 rounded bg-muted/40">
    <div class="gsap-hero absolute left-2 top-2 size-12 rounded-lg"></div>
  </div>
  <button>Play</button>
  <button>Pause</button>
</div>
```

  </DocsFileTabs>
</ComponentPreview>

## Hover reverse (`contextSafe`)

Hover enters and leaves create tweens **outside** the `useGSAP` setup callback. Wrap handlers in `contextSafe` so those tweens join the same GSAP context and clean up on unmount.

Enter lifts the card; leave returns it. Rapid hover should not leak tweens after the component is gone.

<ComponentPreview>
  <GsapHoverReverse />

  <DocsFileTabs title="Hover reverse">

```tsx title="hover-reverse.tsx"
const onEnter = contextSafe(() => {
  gsap.to('.card', { y: -6, scale: 1.02, duration: 0.2, ease: 'power2.out' });
});
const onLeave = contextSafe(() => {
  gsap.to('.card', { y: 0, scale: 1, duration: 0.2, ease: 'power2.out' });
});
```

```html title="hover-reverse-markup.html"
<div class="gsap-card-lift w-48 rounded-xl border bg-card p-4 shadow-sm">
  <p>Hover me</p>
  <p>Reverses on leave</p>
</div>
```

  </DocsFileTabs>
</ComponentPreview>

## `overwrite: "auto"`

Spam-toggling starts a new tween while the old one still owns `x`. Without overwrite, both fight and the box overshoots or rubber-bands. `overwrite: 'auto'` kills competing tweens **only on shared properties**, so the latest intent wins.

Toggle quickly: the box always heads to the latest target without stacking mid-flight tweens.

<ComponentPreview>
  <GsapOverwriteAuto />

  <DocsFileTabs title="Overwrite auto">

```tsx title="overwrite-auto.tsx"
gsap.to('.box', { x: target, duration: 0.6, ease: 'power2.out', overwrite: 'auto' });
```

```html title="overwrite-auto-markup.html"
<div>
  <div class="relative h-12 rounded bg-muted/40">
    <div class="gsap-toggle-box absolute left-2 top-2 size-8 rounded"></div>
  </div>
  <button>Toggle position</button>
</div>
```

  </DocsFileTabs>
</ComponentPreview>