skills.rest
Carlosfwd86
Carlosfwd86COMMUNITY
Explore all skills by this author →
GitHub

gsap-react

Set up GSAP animations in React and Next.js with scoped refs and automatic cleanup.

Updated Jun 4, 2026
Search Tags:#context#react#cleanup#nextjs#animation#gsap#usegsap
One-click install
npx skills add https://github.com/Carlosfwd86/Conectando-Talento-UCR --skill gsap-react-carlosfwd86
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsap-react
Source: https://github.com/Carlosfwd86/Conectando-Talento-UCR/tree/main/Skill%20GSAP/gsap-skills/skills/gsap-react
Command: npx skills add https://github.com/Carlosfwd86/Conectando-Talento-UCR --skill gsap-react-carlosfwd86

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you build GSAP animations in React and Next.js without leaks, selector collisions, or server-side rendering issues. It focuses on keeping animations scoped to the right component and cleaned up automatically when the UI changes or unmounts.

Core Features & Use Cases

  • React-first animation setup: Use GSAP with refs, scoped selectors, and the useGSAP hook for reliable component animations.
  • Cleanup and lifecycle safety: Revert contexts on unmount, avoid detached-node updates, and keep event-driven animations safe with contextSafe.
  • Next.js and client-only usage: Prevent GSAP from running during server rendering and keep animation logic on the client.
  • Use case: Animate a product card, modal, or landing page section in React while ensuring the animation is limited to that component and fully cleaned up afterward.

Quick Start

Use this Skill to add a GSAP animation to a React component with scoped refs and automatic 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 without causing memory leaks?▼

GSAP animations in React cause memory leaks when contexts are not reverted on unmount. Using the useGSAP hook with gsap.context() scopes selectors to specific components and automatically cleans up animations when the UI unmounts.

Why do my GSAP animations affect elements outside the target React component?▼

GSAP selector collisions occur when animations target global DOM elements instead of component-scoped refs. Scoping selectors via gsap.context() and useGSAP restricts animation targets to the current component, preventing unintended style changes to unrelated DOM nodes.

How do I prevent GSAP from running during Next.js server-side rendering?▼

GSAP causes server-side rendering errors in Next.js because it requires browser DOM APIs. Keeping GSAP animation logic client-only and executing it within useGSAP ensures animations run safely after hydration without breaking SSR.

What is the best way to handle event-driven GSAP animations on React unmount?▼

Event-driven GSAP animations can trigger errors on detached nodes after React unmount. Wrapping event callbacks in contextSafe ensures the animation respects the component lifecycle and safely reverts context when the component is removed.

Do I need to manually clean up GSAP tweens in a React component?▼

Manual GSAP tween cleanup in React is unnecessary when using the useGSAP hook. It handles automatic revert functionality by default, managing animation disposal during component unmount and state changes without requiring explicit cleanup code.

Related Skills

Explore More Software Engineering Skills→
woxiangyangzhimaowoxiangyangzhimao
3

gsap-react

Integrate GSAP animations in React/Next.js with SSR-compatible useGSAP and contextSafe hooks.

Community
Advanced
gajjalaashok75-UIgajjalaashok75-UI
2

motion-choreography

Build coordinated GSAP motion sequences with timelines, scroll triggers, and spring easing.

Community
Advanced
calesthiocalesthio
46.2k

framer-motion

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

Community
Intermediate
dz07dz07

Animations

Annotates and visualizes GitLab CI/CD runs and provides actionable insights for failures and bottlenecks, accessible via REST API and Python wheelhouse.

Community
Intermediate