gsap-scrolltrigger
Scroll-driven animations with pinning, scrubbing, snap points, and parallax effects.
- Supports scrubbed animations tied directly to scroll position, with optional smoothing delays for eased motion
- Includes pinning to lock elements in place during scroll ranges, with configurable spacing and animation timelines
- Provides toggle actions (play, pause, reverse, reset) for controlling animation behavior at scroll boundaries
- Offers snap points to lock scroll to specific positions or timeline labels with customizable easing and duration
- Enables parallax effects, horizontal scrolling, batch animations on scroll, and progress-based callbacks for real-time scroll tracking
GSAP ScrollTrigger
Scroll-driven animations and interactions.
Quick Start
npm install gsap
import gsap from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
gsap.registerPlugin(ScrollTrigger);
More from bbeierle12/skill-mcp-claude
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.
606gsap-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.
136