GSAP core · ScrollTrigger · ScrollSmoother · Draggable · SVG plugins · Three.js · React
GSAPMotion Lab
A working reference of one hundred and fifty-seven production-ready motion patterns, each one inspectable, tunable, and built from GSAP core, ScrollTrigger, ScrollSmoother, Draggable, the SVG plugins, plain CSS, and Three.js via React Three Fiber. No black boxes.
Ten categories, one hundred fifty-seven effects
Select a collection
0116 examplesEntrance / Reveal Effects
The foundational vocabulary — fades, directional slides, scale, blur, clip-path, masks, wipes, curtains, and physical easing. The building blocks every other effect is assembled from.
Open collection
0220 examplesText Animation Effects
Character, word, and line level typography in motion — built from hand-split static strings with accessible fallbacks, using no paid splitting plugins.
Open collection
0316 examplesHero Section Effects
Full-width section choreography — timelines, image and text reveals, parallax, floating layers, curtains, SVG draw, gradient motion, and 3D perspective, each replayable with tunable parameters.
Open collection
0420 examplesScroll Animation Effects
ScrollTrigger in depth — enter reveals, scrubbed motion, pinned stages, horizontal sequences, snapping, progress readouts, and responsive configuration that simplifies below 860px.
Open collection
0510 examplesParallax Effects
ScrollSmoother over native scrolling — background, image, and text parallax, multi-layer depth, horizontal travel, reverse motion, pointer-driven layers, and lag that trails the scroll and catches up.
Open collection
0617 examplesImage Effects
Photography in motion — mask and clip reveals, cinematic zoom and pan, curtains, blur, tilt and rotation on fine pointers, stacks, galleries, crossfades, slider reveals, and cursor-following previews.
Open collection
0714 examplesCard Effects
Card interfaces in motion — staggered entrances, hover lift and glow, drawn borders, media zoom, content reveals that answer keyboard focus, 3D flips, scroll-driven stacks, spreads, a draggable carousel, and magnetic pointer tracking.
Open collection- 0811 examples
SVG Effects
Vector motion with the GSAP SVG toolset — line and logo drawing, path morphing, an accessible icon toggle, MotionPath travel, signatures, schematic map routes, charts with real data tables, circular progress, and bounded waves and blobs.
Open collection 
099 examplesCursor Effects
Desktop pointer craft — a branded cursor, delayed followers, scale and text states over targets, decorative project previews, blend treatments, magnetic targets, bounded trails, and a pointer-positioned spotlight. Enabled only on fine pointers; touch keeps a stable composition.
Open collection- 1024 examples
Three.js Camera Effects
WebGL camera work with React Three Fiber and Drei — pointer-driven rigs, damped lerps, dollies and zooms, orbits, pans, tilts and rolls, shake, fly-throughs, spline paths, dolly zooms, orthographic switching, first- and third-person rigs, drag-to-look, opt-in gyroscope tilt, multi-camera cuts and a portal transition.
Open collection