gsap-react
GSAP integration with React including useGSAP hook, ref handling, cleanup patterns, and context management. Use when implementing GSAP animations in React components, handling component lifecycle, or building reusable animation hooks.
By bbeierle12 · 720 installs
npx skills add bbeierle12/skill-mcp-claude --skill gsap-react
Source repository · Upstream listing
GSAP React Integration
React specific patterns for GSAP animations.
Quick Start
useGSAP Hook
Basic Usage
With Dependencies
Returning Context
Ref Patterns
Single Element Ref
Multiple Element Refs
Dynamic Refs
Context and Cleanup
Automatic Cleanup
Manual Context (Without useGSAP)
Scoped Context
Event Handlers
contextSafe for Events
useCallback Alternative
Timeline Management
Timeline Ref Pattern
Controlled Timeline
ScrollTrigger in React
Basic ScrollTrigger
ScrollTrigger Cleanup
Custom Hooks
useAnimation Hook
useFadeIn Hook
useHoverAnimation Hook
Temporal Collapse Patterns
Animated Countdown Digit
Cosmic Pulse Effect
Performance Tips
Reference
See gsap fundamentals for animation basics
See gsap sequencing for timeline composition
See gsap scrolltrigger for scroll based animations