What is 'scoping' in the context of GSAP and React?

Scoping involves passing a container ref to GSAP so that selector strings (like '.box') only look for elements within that specific component, preventing animations from accidentally targeting elements elsewhere in the app.

How do I handle GSAP animations in a Next.js environment?

This skill provides patterns to ensure GSAP code only executes on the client side, typically within useGSAP or useEffect, avoiding errors related to Server-Side Rendering where the window and DOM are unavailable.

Why is the useGSAP hook preferred over useEffect for animations?

The useGSAP hook is specifically designed for React; it handles the internal cleanup of animations and ScrollTriggers automatically, preventing memory leaks and visual bugs when components re-render or unmount.

Can this skill help with GSAP plugins like ScrollTrigger?

Yes, it provides guidance on registering plugins and ensuring that complex tools like ScrollTrigger are properly reverted and killed when the React component is destroyed.

GSAP for React

Name: GSAP for React
Author: greensock

bygreensock

•

2,963

•

Design Tools

Streamlines the integration of GreenSock animations into React and Next.js projects using the official useGSAP hook and lifecycle best practices.

The GSAP for React skill equips Claude with the specialized knowledge needed to build high-performance, leak-free animations within the React ecosystem. It emphasizes the use of the @gsap/react package, specifically the useGSAP() hook, to handle automatic animation cleanup and reversion upon component unmount. By providing patterns for scoped selectors, ref-based targeting, and context-safe callbacks, this skill ensures that AI-generated code avoids common pitfalls like memory leaks, ghost animations, and Server-Side Rendering (SSR) conflicts in frameworks like Next.js.

Key Features

01SSR-safe coding patterns for Next.js and other React frameworks

02Implementation of the useGSAP hook for automated lifecycle and cleanup management

03Advanced ref management for precise DOM targeting

04Scoping techniques to prevent selector collisions across React components

05Context-safe callback patterns for event-driven animations

062,963 GitHub stars

Use Cases

01Converting standard useEffect animation logic into optimized useGSAP patterns

02Creating interactive, event-triggered animations that remain safe after component unmounting

03Building complex, multi-stage UI transitions in Next.js applications

Key Features

01SSR-safe coding patterns for Next.js and other React frameworks

02Implementation of the useGSAP hook for automated lifecycle and cleanup management

03Advanced ref management for precise DOM targeting

04Scoping techniques to prevent selector collisions across React components

05Context-safe callback patterns for event-driven animations

062,963 GitHub stars

Use Cases

01Converting standard useEffect animation logic into optimized useGSAP patterns

02Creating interactive, event-triggered animations that remain safe after component unmounting

03Building complex, multi-stage UI transitions in Next.js applications