skills.rest
umairshahid622
umairshahid622COMMUNITY
Explore all skills by this author →
GitHub

gsap-react

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

Updated Sep 1, 2026
Search Tags:#frontend#react#next.js#cleanup#animation#gsap#usegsap
One-click install
npx skills add https://github.com/umairshahid622/perfumora --skill gsap-react-umairshahid622
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsap-react
Source: https://github.com/umairshahid622/perfumora/tree/main/perfumora/.agents/skills/gsap-react
Command: npx skills add https://github.com/umairshahid622/perfumora --skill gsap-react-umairshahid622

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 GSAP on the server. This Skill provides the correct patterns for integrating GSAP with React and Next.js. ## Core Features & Use Cases - useGSAP Hook Patterns: Set up animations with the @gsap/react hook, including scope, dependency arrays, and revertOnUpdate configuration. - Safe Cleanup: Use gsap.context() with ctx.revert() in useEffect and contextSafe() for event-handler callbacks to prevent leaks on unmount. - SSR Safety: Keep all GSAP and ScrollTrigger code client-only in Next.js and other server-rendered frameworks. - Use Case: When building a Next.js landing page with staggered entrance animations, apply this Skill to scope selectors to a container ref, wrap click handlers in contextSafe, and ensure everything reverts cleanly on unmount. ## Quick Start Set up a GSAP animation in my React component using the useGSAP hook with a scoped container ref and proper 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 a React component?▼

Use the useGSAP hook from @gsap/react instead of useEffect. Register it with gsap.registerPlugin(useGSAP), then pass a scope ref so selectors like .box only match elements inside your component, and cleanup runs automatically on unmount.

How to clean up GSAP animations on React unmount?▼

With useGSAP, cleanup happens automatically. If using useEffect, wrap animations in gsap.context() and return ctx.revert() in the cleanup function to kill tweens and ScrollTriggers and revert 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 in 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, scope, and contextSafe automatically. Use gsap.context() inside useEffect only when @gsap/react is unavailable or you need specific effect dependency behavior, and always call ctx.revert().

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
47thtechcorner47thtechcorner
21

gsap-scrolltrigger

Implement scroll-linked animations and pinning with GSAP ScrollTrigger.

Community
Intermediate
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