skills.rest
josippapez
josippapezCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

gsap-react

Implements GSAP animations in React using the useGSAP hook with scoped selectors and automatic cleanup.

Updated May 5, 2026
Search Tags:#frontend#react#next.js#cleanup#animation#gsap#usegsap
One-click install
npx skills add https://github.com/josippapez/ai-setup --skill gsap-react-josippapez
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsap-react
Source: https://github.com/josippapez/ai-setup/tree/main/claude/plugins/better-design/skills/gsap-react
Command: npx skills add https://github.com/josippapez/ai-setup --skill gsap-react-josippapez

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires gsap, @gsap/react.

What problem does it solve? GSAP animations in React often leak memory, target wrong elements, or break during SSR because developers skip cleanup, misuse selectors, or run animation code on the server. This Skill provides the correct patterns for integrating GSAP with React and Next.js. ## Core Features & Use Cases - useGSAP Hook Patterns: Replace useEffect with the useGSAP hook from @gsap/react, including scope, dependency arrays, and revertOnUpdate configuration. - gsap.context() Fallback: Use gsap.context() inside useEffect with mandatory ctx.revert() cleanup when @gsap/react is unavailable. - Context-Safe Callbacks: Wrap event-handler animations in contextSafe so they are reverted on unmount instead of leaking. - Use Case: A developer building a Next.js landing page needs scroll-triggered entrance animations that clean up properly on route change; this Skill supplies the exact hook setup, ref scoping, and SSR-safe structure. ## Quick Start Set up a GSAP fade-in animation in my React component using the useGSAP hook with a scoped container ref and proper unmount cleanup.

Frequently Asked Questions about gsap-react

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I use GSAP in a React component?▼

Install gsap and @gsap/react, register the useGSAP plugin, then call useGSAP with your animation code and a scope ref. The hook handles cleanup automatically on unmount, replacing manual useEffect-based setup.

How to clean up GSAP animations on React unmount?▼

The useGSAP hook reverts animations and ScrollTriggers automatically on unmount. If using gsap.context() inside useEffect instead, always return a cleanup function that calls ctx.revert() to kill tweens and restore inline styles.

Does GSAP work with Next.js server-side rendering?▼

GSAP runs only in the browser, so never call gsap or ScrollTrigger during SSR. Place all GSAP code inside useGSAP or useEffect so it executes client-side only; dynamic imports inside effects are an option for bundle control.

Why do my GSAP animations leak or fire on unmounted components?▼

Animations created inside event handlers after useGSAP runs are not added to its context, so they never get reverted. Wrap those callbacks in contextSafe from useGSAP and remove event listeners in the cleanup function.

Should I use useGSAP or useEffect with gsap.context?▼

Prefer useGSAP from @gsap/react since it handles cleanup, scoping, and contextSafe callbacks automatically. Use gsap.context() inside useEffect only when @gsap/react is unavailable or you need specific effect dependency behavior.

Related Skills

Explore More Software Engineering Skills→
abhinaaaavvvabhinaaaavvv

gsap-react

Implements GSAP animations in React using the useGSAP hook with scoped selectors and automatic cleanup.

Community
Intermediate
woxiangyangzhimaowoxiangyangzhimao
3

gsap-frameworks

Integrate GSAP animations into Vue and Svelte component lifecycles.

Community
Advanced
AlejandroFiginiAlejandroFigini

gsap-core

Create GSAP tweens and timelines for UI animations across frameworks.

Community
Advanced
ayofemiadeayofemiade

motion-framer

Create React animations with Motion components, gestures, variants, and layout transitions.

Community
Advanced