1. Habit
  2. Skills
  3. GSAP React skill
greensock · 64K installs

GSAP React skill
Runs by itself, PR changes GSAP components.

No leaking GSAP animations in React.

Install the GSAP React skill and make it a habit: follow https://gethabit.dev/skills/greensock/gsap-react.md

  1. 1Copy
  2. 2Paste into Claude Code, Codex or Cursor
  3. 3It runs by itself

64K installs17K starsMIT licenceSource on GitHub ↗

GSAP React

by greensock · 64K installs

The skill

The gsap react skill is the official GreenSock guide to GSAP in React and Next.js: the useGSAP hook, refs and scope, gsap.context() with cleanup, contextSafe callbacks and server rendering.

Only when you ask.

The habit

No leaking GSAP animations in React.

↻ Runs by itselfPR changes GSAP components

How the habit works.
You don't have to.

Three questionsWhen does it start? How does it check its work? What does it remember?

01

It starts by itself

PR changes GSAP components. Runs in GitHub Actions or Claude Code routine.

  • ↻ PR changes GSAP components
  • pull_request touching React files that import gsap or @gsap/react

02

It checks its work

cleanup and scope check. If a check fails, it tells you.

  • ✓build passes
  • ✓every useGSAP() call passes a scope
  • ✓every gsap.context() inside useEffect returns a cleanup that calls ctx.revert()
  • ✓no gsap or ScrollTrigger call runs at module top level during server render

03

It remembers

component findings list. The next run reads it first: components already fixed and ones still open.

loops/gsap-react-cleanup-loop/findings.md

One run, step by step.
Then it stops.

Stop ruleStops after one pull request per run.

  1. 01

    Find components

    List React components in the diff that create GSAP tweens, timelines or ScrollTriggers.

  2. 02

    Check the hook

    Prefer useGSAP() from @gsap/react over useEffect, with a ref passed as scope.

  3. 03

    Check cleanup

    Where useEffect is used, make sure gsap.context() is reverted in the cleanup.

  4. 04

    Check handlers

    Wrap animations made in event handlers with contextSafe and remove the listeners on cleanup.

  5. 05

    Check SSR

    Make sure no GSAP code runs on the server in Next.js or similar.

  6. 06

    Report

    Post findings on the pull request and update the list.

What it may do.
Nothing more.

Safe by defaultIt writes only in its own folder and asks you before anything goes out.

Is it for you?
Use it when it fits.

Quick checkRead both lists. If the left one sounds like you, the GSAP React skill helps.

Use it when

  • ✓ You animate React or Next.js components
  • ✓ Animations keep running after unmount
  • ✓ You move from useEffect to useGSAP

Skip it when

  • – You use another animation library
  • – Your app is not built on React

Questions

GSAP React skill, answered.

Why does scope matter?

Without a scope, selectors like .box can match elements outside the component.

Does it work for Vue or Svelte?

No. Those frameworks have a separate skill, gsap-frameworks.

How do I install the GSAP React skill?

Copy the prompt at the top into your agent. It installs the skill from greensock/gsap-skills and sets up the habit. Or run npx skills add greensock/gsap-skills --skill gsap-react.

Is the GSAP React skill free?

Yes. It is published under MIT. Habit is free too.

GSAP React. Now as a habit.

Install the GSAP React skill and make it a habit: follow https://gethabit.dev/skills/greensock/gsap-react.md

  • Free
  • No account
  • Undo in one line

All greensock skills →More code skills →

Works in

  • Claude Code
  • Codex
  • Cursor
  • ChatGPT
  • Claude app

Made by greensock, published under MIT. Habit links to the original and never changes it. Is this your skill?

Copying didn't work here. Select the line and copy it by hand.