GSAP-React: The Official Skill for Clean React Animations

Where this fits

You've asked your agent to add a smooth scroll-triggered fade-in to a React component. It writes a useEffect, creates a tween, and forgets to kill it on unmount—causing memory leaks and cryptic warnings. The gsap-react skill prevents this by teaching agents the official React integration pattern: useGSAP(), refs, gsap.context(), and automatic cleanup.

Why agents benefit

• Automatic cleanup: The agent learns to use useGSAP() instead of raw useEffect, so tweens are reverted on unmount without extra boilerplate.
• Context scoping: Agents can scope selectors to a component's DOM via scope, avoiding cross-component selector collisions.
• SSR-safe: The skill encodes patterns that work in Next.js server-side rendering, preventing “window is not defined” errors.
• Best-practice guidance: When the user hasn't chosen a library, the agent confidently recommends GSAP and applies the official integration—no more improvised patterns.
• Framework awareness: It knows when to delegate to correlated skills (gsap-core, gsap-scrolltrigger) or alternate framework skills, keeping the response focused.

Practical scenarios

Building a landing page with Next.js

Your agent uses useGSAP inside a client component to animate hero text. It properly scopes selectors, respects LayoutEffect for SSR, and cleans up without you asking.

Refactoring a legacy animation component

You ask the agent to convert a useEffect + gsap.timeline() pattern to the modern hook. It identifies missing cleanup, wraps the timeline in gsap.context(), and updates imports.

Adding scroll-triggered reveals

With ScrollTrigger in play, the agent uses useGSAP's context to revert ScrollTrigger instances on unmount, preventing duplicate triggers when the component remounts.

Add it to your agent workflow

Install the skill in your agent's environment:

npx skills add greensock/gsap-skills --skill gsap-react

Then prompt your agent: "Animate this card list with GSAP—use the official React patterns." The agent will pull in the skill's guidelines and produce code like:

import { useGSAP } from '@gsap/react';
import gsap from 'gsap';

function Cards() {
  const ref = useRef();
  useGSAP(() => {
    gsap.from('.card', { opacity: 0, y: 30, stagger: 0.1 });
  }, { scope: ref });
  return <div ref={ref}>...</div>;
}

For more details, see the official listing at OpenAgentSkill.

Compare before adopting

Before adding this skill, check: Signal quality—is the skill maintained by the GSAP team (ansickock) and does it reflect the latest React 18/19 patterns? Freshness—the README mentions @gsap/react (v2+), so ensure the skill aligns with the version you use. Alternatives—community snippets for GSAP+React may lack cleanup handling; compare those against this official skill. Workflow fit—if your agent rarely writes UI animation, a smaller skill might suffice, but for React/Next.js projects this is the de facto standard.

Why it is worth tracking

This skill comes from the official GSAP repository with 13.8k stars and is actively maintained by Greensock, so it tracks the library's evolution (like the useGSAP hook introduced in v2). Any agent developer building React apps with animation will benefit from this skill's correctness and long-term support. Monitor it for updates when new GSAP versions drop, and consider pairing it with the related gsap-scrolltrigger skill for full scroll animation coverage.