gsap-react
GSAP integration for React with lifecycle-aware hooks, ref patterns, and automatic cleanup.
useGSAPhook handles component lifecycle, scoped selectors, dependency tracking, and automatic animation cleanup on unmount- Supports single and multiple element refs, dynamic lists, and timeline management with play/pause/restart controls
contextSafewrapper for event handlers ensures animations respect React's context and prevent memory leaks- Includes ScrollTrigger integration, custom animation hooks (useFadeIn, useHoverAnimation), and performance patterns like batching and will-change optimization
GSAP React Integration
React-specific patterns for GSAP animations.
Quick Start
npm install gsap @gsap/react
import { useGSAP } from '@gsap/react';
import gsap from 'gsap';
function Component() {
const containerRef = useRef(null);
More from bbeierle12/skill-mcp-claude
gsap-scrolltrigger
Scroll-based animations using GSAP ScrollTrigger plugin including pinning, scrubbing, snap points, and parallax effects. Use when creating scroll-driven animations, sticky sections, progress indicators, or parallax scrolling experiences.
476gsap-fundamentals
Core GSAP animation concepts including tweens, timelines, easing functions, and animation properties. Use when implementing basic animations, transitions, or learning GSAP foundations. Essential starting point for any GSAP-based animation work.
245shader-effects
Visual shader effects—glow/bloom, chromatic aberration, distortion, vignette, film grain, scanlines, glitch, dissolve, outline, and fresnel. Use when adding visual polish, post-processing effects, or stylized rendering to shaders.
157d3js-visualization
Create D3.js charts and interactive data visualizations. Use when building bar charts, line charts, scatter plots, pie charts, force-directed graphs, geographic maps, or any custom data visualization.
144gsap-sequencing
Complex GSAP timelines including labels, callbacks, nested timelines, and position parameters. Use when orchestrating multi-step animations, building animation sequences, or creating coordinated motion. Essential for cinematic animations and complex UI choreography.
143shader-fundamentals
GLSL shader fundamentals—vertex and fragment shaders, uniforms, varyings, attributes, coordinate systems, built-in variables, and data types. Use when writing custom shaders, understanding the graphics pipeline, or debugging shader code. The foundational skill for all shader work.
135