---
title: 'useGSAP'
excerpt: 'Scope selectors, dependency arrays, and revertOnUpdate for prop-driven motion.'
icon: 'Code2'
---

## Always pass `scope`

`useGSAP` from `@gsap/react` is the React-friendly way to create tweens: it runs after mount, scopes selectors, and **reverts** the GSAP context on unmount so nothing leaks.

Without a `scope`, a selector like `.box` matches **every** `.box` on the page — including demos in other components. Always pass a ref to the local container.

Side-by-side scopes: identical class names, each box only moves inside its own ref.

<ComponentPreview replay>
  <GsapScopeIsolation />

  <DocsFileTabs title="Scope isolation">

```tsx title="scope-isolation.tsx"
useGSAP(() => {
  gsap.to('.box', { x: 40, duration: 0.5, ease: 'power2.out' });
}, { scope: containerRef });
```

```html title="scope-isolation-markup.html"
<!-- Each scope only animates its own .box -->
<div><!-- Scope A -->
  <div class="relative h-12 w-32">
    <div class="box absolute left-1 top-1 size-10 rounded"></div>
  </div>
</div>
<div><!-- Scope B -->
  <div class="relative h-12 w-32">
    <div class="box absolute left-1 top-1 size-10 rounded"></div>
  </div>
</div>
```

  </DocsFileTabs>
</ComponentPreview>

## `revertOnUpdate`

When motion depends on props or state, list those values in `dependencies`. With `revertOnUpdate: true`, GSAP tears down the previous context and re-runs the setup so you never stack duplicate tweens on the same node.

Drag the slider: `targetX` changes, the old tween reverts, a fresh `to` aims at the new position.

<ComponentPreview>
  <GsapRevertOnUpdate />

  <DocsFileTabs title="Revert on update">

```tsx title="revert-on-update.tsx"
useGSAP(
  () => {
    gsap.to('.gsap-target', { x: targetX, duration: 0.4, ease: 'power2.out' });
  },
  { scope, dependencies: [targetX], revertOnUpdate: true }
);
```

```html title="revert-on-update-markup.html"
<div class="relative h-14 rounded bg-muted/40">
  <div class="gsap-target absolute left-2 top-2 size-10 rounded-lg"></div>
</div>
<input type="range" min="0" max="120" />
```

  </DocsFileTabs>
</ComponentPreview>

## Config reference

```tsx
useGSAP(() => { /* gsap code */ }, {
  scope: containerRef,       // ref or element — scopes querySelector
  dependencies: [value],     // re-run when these change
  revertOnUpdate: true,      // revert context on dependency change
});
```

For tweens created in event handlers (click, hover), wrap them with `contextSafe` — covered in [Context-Safe & SSR](/learn/gsap-react/react/context-ssr).