gsap-react

Name: gsap-react
Availability: InStock
Author: nnecec

Orchestrate GSAP animations in React with useGSAP and automatic cleanup.

2|1|Updated Mar 18, 2021

Search Tags:#react #cleanup #animation #gsap #useGSAP #unmount

Ready to run

npx skills add https://github.com/nnecec/nnecec.studio --skill gsap-react-nnecec

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: gsap-react
Source: https://github.com/nnecec/nnecec.studio/tree/main/.agents/skills/gsap-react
Command: npx skills add https://github.com/nnecec/nnecec.studio --skill gsap-react-nnecec

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provides a clear, reusable pattern for animating React components using GSAP, emphasizing scoped animations, automatic cleanup on unmount, and SSR-safe practices to keep React apps smooth and safe.

Core Features & Use Cases

useGSAP() hook for safe, scoped animations with automatic cleanup.
gsap.context() to confine animations to a component subtree.
ContextSafe callbacks to avoid leaks when actions occur after mount, with proper cleanup.
Guidance for client-only execution and SSR considerations in React and Next.js.

Quick Start

Install gsap and @gsap/react, then import useGSAP and apply it to a component to start animating within a scoped container.

Frequently Asked Questions about gsap-react

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

FAQPage Schema

How do I handle GSAP animation cleanup in React when a component unmounts?▼

Use the useGSAP hook to handle GSAP animation cleanup automatically when a React component unmounts. It scopes animations to a specific container and ensures context-safe callbacks, preventing memory leaks without manual revert calls.

What's the best way to scope GSAP animations to a specific React component subtree?▼

The best way to scope GSAP animations is using gsap.context() with container refs. This confines animations to a specific React component subtree, ensuring automatic cleanup and isolating selector text matches.

Does GSAP work with Next.js server-side rendering without causing hydration errors?▼

GSAP works with Next.js server-side rendering by applying client-only execution patterns. The useGSAP hook manages SSR considerations, ensuring animations execute safely on the client without causing hydration mismatches.

Do I need to install @gsap/react to use the useGSAP hook in my project?▼

Yes, you need to install both the gsap and @gsap/react packages to use the useGSAP hook. This provides the official integration for orchestrating scoped animations with built-in unmount cleanup.

Why are my GSAP animations leaking or causing memory issues after component unmount?▼

GSAP animations leak without scoped contexts during component unmount. Using the useGSAP hook or gsap.context() ensures automatic cleanup and context-safe callbacks, preventing these memory leaks in React apps.