What problem does it solve?
Prevents common runtime errors and bundler omissions by giving precise guidance for registering and using GSAP plugins, and it consolidates best practices for implementing complex animation features like scroll-to, FLIP layout transitions, draggable interactions, SVG drawing/morphing, text effects, physics, and custom eases.
Core Features & Use Cases
- Plugin registration guidance: where and when to call registerPlugin to ensure bundlers include required plugin code and to avoid repeated registrations.
- Scroll and smooth scrolling: usage patterns for ScrollToPlugin and ScrollSmoother and their dependencies on ScrollTrigger.
- Layout transitions and interactions: FLIP workflows with Flip.getState() and Flip.from(), plus Draggable and InertiaPlugin for draggable UI and momentum.
- SVG and path animation: DrawSVG, MorphSVG, MotionPath and tooling for drawing, morphing, and following paths.
- Text and easing: SplitText and ScrambleText for per-character/word animations and CustomEase, EasePack, CustomWiggle, CustomBounce for bespoke easing.
- Physics and development tooling: Physics2D, PhysicsProps for simple physical motion and GSDevTools for interactive debugging during development.
- Use case example: Use Flip.getState(), mutate the DOM (reorder items), then call Flip.from() to animate the layout change smoothly.
Quick Start
Register the plugins you need at application startup (for example ScrollToPlugin, Flip, and Draggable) and then implement a scroll-to action, a FLIP-based list reorder, and a draggable card with inertia to verify integration.
