gsap-react

Name: gsap-react
Availability: InStock
Author: kartojal

Automate GSAP animation setup in React with useGSAP and gsap.context.

11|1|Updated Mar 20, 2026

Search Tags:#react #cleanup #animation #hook #gsap #usegsap #gsap.context

Ready to run

npx skills add https://github.com/kartojal/openvps --skill gsap-react-kartojal

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill provides a structured pattern for adding GSAP-based animations to React components, ensuring safe cleanup, scoped selectors, and SSR-friendly usage.

Core Features & Use Cases

useGSAP hook for declarative and cleanup-friendly animation setup.
gsap.context() to scope selectors and ensure proper revert on unmount.
Clear guidance for integrating GSAP in React/Next.js workflows and avoiding SSR pitfalls.

Quick Start

Add GSAP-powered animations to a React component using the useGSAP hook with a scoped ref, ensuring cleanup on unmount.

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 animations in React without causing memory leaks?▼

GSAP context scoping confines animation selectors to specific component refs, ensuring gsap.context() reverts animations exclusively on unmount, preventing selector collisions and memory leaks across React DOM trees.

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

GSAP requires SSR-safe client-side execution for Next.js projects. Using the useGSAP hook ensures animations initialize properly within the client environment, avoiding server-side rendering hydration pitfalls.

What is the best way to scope GSAP selectors in a React component?▼

The best way to scope GSAP selectors in React is using gsap.context() within the useGSAP hook, applying a scoped ref to restrict animation targeting and ensure proper revert on unmount.

Do I need @gsap/react to animate components in React?▼

Yes, you need @gsap/react along with the gsap and React environment to properly operate the useGSAP hook, which automates safe animation setup and cleanup for your project.

Why does my GSAP animation break when navigating between React routes?▼

GSAP animations break during React route navigation due to improper cleanup. Applying gsap.context() with useGSAP ensures structured animation revert on unmount, resolving state conflicts during route transitions.