skills.rest
gyalamanch001a
gyalamanch001aCOMMUNITY
Explore all skills by this author →
GitHub

gsap-react

Builds and cleans up scoped GSAP animations in React and Next.js components.

Updated Apr 2, 2026
Search Tags:#context#react#cleanup#nextjs#animation#gsap#usegsap
One-click install
npx skills add https://github.com/gyalamanch001a/pur-new --skill gsap-react-gyalamanch001a
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsap-react
Source: https://github.com/gyalamanch001a/pur-new/tree/main/.agents/skills/gsap-react
Command: npx skills add https://github.com/gyalamanch001a/pur-new --skill gsap-react-gyalamanch001a

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you create GSAP animations in React and Next.js without common lifecycle bugs, selector collisions, or cleanup issues that cause leaks and broken UI state.

Core Features & Use Cases

  • Client-only animation setup: Keep GSAP work inside React-safe lifecycles so animations run only in the browser.
  • Scoped targeting with refs: Use container refs and gsap.context() to limit selectors to the right component.
  • Automatic cleanup: Revert animations on unmount and avoid stale tweens, detached-node updates, and memory leaks.
  • Event-driven motion: Wrap callbacks with contextSafe when animations are created after the initial hook runs.
  • Use case: Build entrance animations, interactive hover effects, and scroll-ready component motion in React apps while keeping code maintainable and safe.

Quick Start

Use the gsap-react skill to animate a React component with useGSAP, a scoped ref, and automatic 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 prevent GSAP animation memory leaks in React?▼

Prevent GSAP memory leaks in React by using gsap.context() with scoped container refs and calling revert on component unmount. This ensures proper cleanup, avoiding stale tweens and detached-node updates.

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

The best way to scope GSAP selectors in React is using gsap.context() combined with container refs. This limits selector queries to the correct component, preventing selector collisions and ensuring animations only target intended elements.

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

GSAP works with Next.js server-side rendering when animations are restricted to client-only effects within React-safe lifecycles. Keeping GSAP code inside useGSAP ensures animations run exclusively in the browser, avoiding SSR issues.

How do I trigger GSAP animations from React event handlers safely?▼

Trigger GSAP animations from React event handlers safely by wrapping the callback functions with contextSafe. This ensures any animations created after the initial hook runs are properly scoped and cleaned up.

Why do my GSAP animations stop working or cause UI bugs after React re-renders?▼

GSAP animations break after React re-renders due to unmanaged lifecycle bugs and selector collisions. Using useGSAP with scoped refs and automatic cleanup reverts stale tweens on unmount, maintaining correct UI state.

Do I need useGSAP to build interactive motion in React components?▼

You need useGSAP to build interactive motion in React components because it manages client-only animation setup, scoped targeting, and automatic cleanup. This lifecycle management is required to prevent leaks and maintain safe code.

Related Skills

Explore More Software Engineering Skills→
nnececnnecec
2

gsap-react

Orchestrate GSAP animations in React with useGSAP and automatic cleanup.

Community
Intermediate
mattwoodcomattwoodco
3

motion

Create declarative animations and transitions in React and Next.js with Framer Motion.

Community
Intermediate
47thtechcorner47thtechcorner
21

gsap-react

Integrate GSAP animations into React and Next.js with lifecycle cleanup and SSR safety.

Community
Intermediate
47thtechcorner47thtechcorner
21

framer-motion

Implement Disney's 12 animation principles with Framer Motion in React.

Community
Intermediate