gsap-react

Implement GSAP animations in React with useGSAP and automatic cleanup.

Updated Aug 23, 2026

Search Tags:#scoping #react #cleanup #animation #gsap #useGSAP #gsap.context

Ready to run

npx skills add https://github.com/hanzoai/video --skill gsap-react-hanzoai

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

React developers often struggle with implementing GSAP animations correctly, handling cleanup on unmount, and keeping selectors scoped to components.

Core Features & Use Cases

Use the useGSAP hook to run animations inside a component lifecycle with automatic cleanup.
Use gsap.context() to scope selectors to a root element and avoid leaks across renders.
Leverage contextSafe for callbacks to prevent errors after unmount and ensure safe cleanup.

Quick Start

Animate a React component on mount using the useGSAP hook and scope animations to a container.

Frequently Asked Questions about gsap-react

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

FAQPage Schema

How do I scope GSAP animations to a specific React component?▼

Use the useGSAP hook to run GSAP animations inside the React component lifecycle with automatic cleanup on unmount. It handles animation setup and teardown automatically, preventing memory leaks and selector scope issues in your React project.

Why do my GSAP animations break after a React component unmounts?▼

GSAP animations break after unmount due to missing cleanup logic. Use the useGSAP hook or gsap.context() to automatically clean up animations when the React component unmounts, preventing errors from callbacks firing on removed DOM nodes.

What is the best way to use GSAP with React without causing memory leaks?▼

The best way to use GSAP with React without memory leaks is using the useGSAP hook for automatic cleanup and gsap.context() for scoping selectors. This combination isolates animations and destroys them properly upon component unmount.

Does GSAP work with Next.js and React for component animations?▼

Use contextSafe wrappers for GSAP callbacks in React to prevent errors after unmount and ensure safe cleanup. It keeps callback-based animations properly scoped within the component context, avoiding memory leaks and runtime errors.

How do I prevent GSAP selector leaks across React renders?▼

Prevent GSAP selector leaks across React renders by using gsap.context() to scope all selector queries to a specific root element. This ensures animations target only the intended DOM nodes within that component.