skills.rest
NalinDalal
NalinDalalCOMMUNITY
Explore all skills by this author →
Website𝕏@nalin82929GitHub

gsap-react

Implements GSAP animations in React using the useGSAP hook, refs, and context cleanup.

1|Updated Aug 17, 2026
Search Tags:#React#frontend#Next.js#cleanup#animation#gsap#useGSAP
One-click install
npx skills add https://github.com/NalinDalal/skillset --skill gsap-react-nalindalal
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsap-react
Source: https://github.com/NalinDalal/skillset/tree/main/skills/ui/gsap-react
Command: npx skills add https://github.com/NalinDalal/skillset --skill gsap-react-nalindalal

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires gsap, @gsap/react.

What problem does it solve? GSAP animations in React often leak memory, target wrong elements across re-renders, or break during server-side rendering. This Skill provides the official patterns for integrating GSAP with React and Next.js so animations are scoped, cleaned up on unmount, and run only on the client. ## Core Features & Use Cases - useGSAP Hook Patterns: Set up animations with the @gsap/react useGSAP hook, including scope, dependency arrays, and revertOnUpdate configuration. - gsap.context() Fallback: Use gsap.context() inside useEffect with mandatory ctx.revert() cleanup when useGSAP is unavailable. - Context-Safe Callbacks: Wrap event-handler animations in contextSafe so they revert correctly on unmount. - SSR Safety: Keep all GSAP and ScrollTrigger code client-only in Next.js applications. - Use Case: You are building a Next.js landing page and want staggered entrance animations on a card grid. This Skill guides the agent to register useGSAP, scope selectors to a container ref, and clean up automatically on unmount. ## Quick Start Add a GSAP fade-in animation to this React component using the useGSAP hook with proper scoping and 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 animations in React?▼

Install gsap and @gsap/react, register the useGSAP hook, and place your animation code inside it with a scope ref. The hook handles cleanup automatically on unmount, replacing manual useEffect-based setups.

useGSAP vs useEffect for GSAP in React?▼

useGSAP from @gsap/react is preferred because it handles cleanup, scoping, and contextSafe callbacks automatically. Use gsap.context() inside useEffect only when useGSAP is unavailable, and always call ctx.revert() in the cleanup function.

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

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

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

Leaks happen when animations are created outside the GSAP context, such as in event handlers, or when ctx.revert() is skipped in cleanup. Wrap late-created animations in contextSafe and always revert the context on unmount.

How do I scope GSAP selectors to a single React component?▼

Pass a container ref as the scope option in useGSAP or as the second argument to gsap.context(). This limits selectors like .box to elements inside that component, preventing matches elsewhere in the DOM.

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
hii-saikrishnahii-saikrishna

gsap-scrolltrigger

Create scroll-triggered animations using GSAP and ScrollTrigger libraries.

Community
Advanced
aesthezelaesthezel
8

gsap-core

Create GSAP tweens, timelines, and scroll-driven animations in JavaScript.

Community
Advanced
R1ve3raaTechR1ve3raaTech

gsap-frameworks

Integrate GSAP animations into Vue and Svelte components with lifecycle management.

Community
Intermediate