# GSAP Effects Library

> Production-ready GSAP animation effects: scroll reveals, text effects, cursor interactions and canvas backgrounds. Live demo and source on each one.

Canonical: https://gsapvault.com/effects

71 effects, all plain HTML, CSS and JavaScript with GSAP from a CDN. Free ones are MIT-licensed with full source; paid ones are £5 each, or every current and future effect, template and UI element is £39 one-time with [The Vault](https://gsapvault.com/pricing).

Every effect page has a Markdown variant: append `.md` to its URL or send `Accept: text/markdown`.

## Free effects (8)

- [3D Card Flip Gallery](https://gsapvault.com/effects/3d-card-flip): Tactile 3D cards with deep perspective, reactive edge-light, shadow inversion, hover/focus parity, and tap auto-close.
- [CSS Scroll Reveal](https://gsapvault.com/effects/css-scroll-reveal): Native CSS scroll-driven reveals for crisp fade, slide, and scale entrances with accessible static fallbacks and no animation JavaScript.
- [Hover Underline](https://gsapvault.com/effects/hover-underline): Three material link underlines (an exit-through line, marker sweep, and hand-drawn wave) with coordinated type and active-index responses.
- [Image Clip Reveal](https://gsapvault.com/effects/image-clip-reveal): A cinematic image reveal where a directional polygon aperture opens as the photograph settles from a restrained Ken Burns scale and its editorial caption lands.
- [Parallax Hero](https://gsapvault.com/effects/parallax-hero): A pinned hero that separates its background photograph, copy, and foreground card into distinct scroll depths from a single scrubbed ScrollTrigger.
- [Scroll Progress Indicator](https://gsapvault.com/effects/scroll-progress): A precise GSAP reading-progress instrument with bar, ring, side rail, percentage, and active chapter feedback.
- [Scroll Text Highlight](https://gsapvault.com/effects/scroll-text-highlight): A scrubbed orange-to-lime reading front lifts each active word before completed copy settles to white and unread copy remains ghosted.
- [Typewriter Text](https://gsapvault.com/effects/typewriter-text): A sharp terminal-style typewriter that types, holds, accelerates through deletion, and cycles to the next phrase in sync with cursor and progress signals.

## Paid effects (63)

- [3D Ring Gallery](https://gsapvault.com/effects/3d-ring-gallery): A draggable 3D ring carousel where cards stand on a cylinder in real perspective. Flick it hard and it spins with momentum, motion blur, and a velocity-driven tilt before an elastic snap locks the nearest card front and centre. Opt in and each card becomes a button that spins to the front and Flips open into a full detail lightbox.
- [Ambient Orb Field](https://gsapvault.com/effects/ambient-orb-field): Six luminous colour orbs stay distinct as they drift and lean with the pointer, then rack into crisp blend-mode discs when you press and hold.
- [Aurora Gradient Field](https://gsapvault.com/effects/aurora-gradient-field): A vivid mesh-gradient background of drifting colour with a bright lead bloom and a slower halo that follow the cursor across the page, built without canvas or WebGL.
- [Canvas Particle Flow](https://gsapvault.com/effects/canvas-particle-flow): An ember-toned Canvas 2D flow field that bends into a dense wake around pointer, touch, and keyboard attraction before dispersing organically.
- [Canvas Shape Vortex](https://gsapvault.com/effects/canvas-shape-vortex): Luminous 3D canvas shapes spiral through a depth tunnel that bends and blooms with fast pointer movement, no WebGL required.
- [Chrono Rail Timeline](https://gsapvault.com/effects/chrono-rail-timeline): A pinned horizontal timeline where vertical scroll drives a chronology of full dated entries past a fixed playhead, with velocity smear, ruler era marks and an elastic settle.
- [Cloth Drape](https://gsapvault.com/effects/cloth-drape): A hanging fabric banner you can grab, drag and swing: a soft-body cloth simulation that warps your artwork across it and shades its own folds.
- [Count-Up Stats](https://gsapvault.com/effects/count-up-stats): Entry- or scroll-triggered number counters with locale-aware formatting, staggered reveals, synchronized progress visuals, and optional replay.
- [Cursor Confetti Trail](https://gsapvault.com/effects/cursor-confetti-trail): A responsive GSAP confetti trail that turns fast pointer sweeps and touch drags into colourful, directional ribbons of tumbling geometric particles.
- [Cursor Spotlight Mask](https://gsapvault.com/effects/cursor-spotlight-mask): A soft aperture follows the cursor and reveals a completely different layer hidden under the visible one, stretching into a lens streak on the axis of movement and springing back with an elastic settle.
- [Cursor Trail Effect](https://gsapvault.com/effects/cursor-trail): A portable editorial cursor with dot-and-ring lag, velocity afterimages, elastic target labels, color morphs, and touch previews.
- [Curtain Menu Overlay](https://gsapvault.com/effects/curtain-menu-overlay): A fullscreen nav overlay that arrives as layered clip-path curtains, oversized type masking up on a stagger, and a preview plate that wipes in the direction you moved.
- [Curved Ribbon Slider](https://gsapvault.com/effects/curved-ribbon-slider): A full-bleed WebGL slider driven by the scroll wheel. A distortion field sits in the middle of the container and bends whatever scrolls through it: the panel at the front stays flat and sharp while the ones either side curl away and smear into a spectrum, mirrored on both sides.
- [Draggable Card Stack](https://gsapvault.com/effects/draggable-card-stack): Swipeable card deck powered by Draggable and InertiaPlugin. Throw the top card to send it to the back; momentum decides dismiss or spring-back, and the rest of the page follows whichever card is on top.
- [Editorial Scrollytelling](https://gsapvault.com/effects/editorial-scrollytelling): A sticky editorial media rail that morphs between section-defined aspect ratios with Flip, directional image wipes, layered drift and a velocity-reactive settle while the prose stays in normal document flow.
- [Elastic Photo Mesh](https://gsapvault.com/effects/elastic-photo-mesh): Interactive rubberized photo mesh: click, drag, or sweep across any image to stretch and warp the canvas texture with spring-mass physics, elastic tension, and gelatin reverberations.
- [Elastic Repel Headline](https://gsapvault.com/effects/elastic-repel-headline): A cursor-repulsion display headline whose letters flee the pointer, scaled by cursor speed, then spring back home with an elastic overshoot, motion blur, and a scale dip.
- [Elastic Stack Cards](https://gsapvault.com/effects/elastic-stack-cards): Stacked cards that spring open into a fan. Three fan shapes, opened by hover, focus, tap or an external button, with click-to-front card selection.
- [FLIP Layout Morph](https://gsapvault.com/effects/flip-layout-morph): Shared-element layout transitions powered by GSAP Flip, with a premium grid-to-detail archive showcase plus reusable lightbox and filter APIs.
- [Fracture Reveal](https://gsapvault.com/effects/fracture-reveal): Shatter any element into real Voronoi shards from the point you hit, then watch them reassemble with no seam left behind.
- [Glitch Text Effect](https://gsapvault.com/effects/glitch-text): A GSAP glitch effect in four styles: displacement shift, RGB chromatic aberration, VHS scan slice and character-level chaos. Hover, click, scroll or interval.
- [Grid Shockwave](https://gsapvault.com/effects/grid-shockwave): An interactive tile wall where every click detonates a radial shockwave: tiles pop, flash, and tip away from the epicentre in a distance-staggered ring wave, then settle with elastic overshoot.
- [Interactive Halftone Image](https://gsapvault.com/effects/halftone-image): An image rendered live as a halftone dot grid the pointer drags through: dots swell, smear along the stroke and split into misregistered ink at speed, then settle back elastically.
- [Holo Foil Card](https://gsapvault.com/effects/holo-foil-card): Trading-card holographic tilt: one pointer drives 3D rotation, an iridescent foil sheen, twinkling glitter, depth parallax and a specular bloom, then settles elastically.
- [Horizontal Scroll Section](https://gsapvault.com/effects/horizontal-scroll-section): A pinned editorial rail where vertical scroll sweeps through horizontal chapters with measured snap, counter-drift parallax, and a precise progress readout.
- [Hover Image Trail](https://gsapvault.com/effects/hover-image-trail): Velocity-aware editorial image trail with layered card drift, directional tilt, staggered decay, and static touch previews. Pure GSAP core.
- [Infinite Draggable Gallery](https://gsapvault.com/effects/infinite-draggable-gallery): Draggable gallery with infinite looping, fisheye center-scale, and momentum physics. Drag any direction to explore: cards near center grow larger.
- [Infinite Marquee with Mouse Control](https://gsapvault.com/effects/infinite-marquee): Continuous scrolling marquees with mouse-based speed control. Rewind, pause, or fast-forward with cursor position. Uses GSAP quickTo for 60fps.
- [Isometric Scroll Wall](https://gsapvault.com/effects/isometric-scroll-wall): A wall of poster tiles laid on an isometric plane, adjacent lanes travelling in opposite directions and wrapping forever as you scroll, with a hard flick banking the whole plane and any tile pulling square to the viewer on a click.
- [Kinetic Shutter Blinds](https://gsapvault.com/effects/kinetic-shutter-blinds): Slices a hero design across a bank of 3D venetian louvres that crack open under the cursor in a proximity wave, revealing a second layer behind and a third printed on their reverse.
- [Liquid Fill Reveal](https://gsapvault.com/effects/liquid-fill-reveal): A scroll-scrubbed liquid fills a frame behind your content, with a simulated wave surface that sloshes on a fast scroll and inverts everything below the waterline.
- [Liquid Morph Gallery](https://gsapvault.com/effects/liquid-morph): Images and headlines dissolve into viscous liquid on hover, then reform. SVG filters for the gallery, an optional WebGL shader for display type, and one control that melts the whole page.
- [Liquid Ripple Image](https://gsapvault.com/effects/liquid-ripple-image): A liquid image hover effect: dragging the cursor over an image distorts the pixels like water, rippling from the pointer and settling back to a crisp, calm pool.
- [Magnetic Cursor Effect](https://gsapvault.com/effects/magnetic-cursor): Elements attract or repel from the cursor with elastic physics. Perfect for buttons, navigation items, and CTAs on award-winning sites.
- [Magnetic Glass Lens](https://gsapvault.com/effects/magnetic-glass-lens): A glass loupe that follows the cursor and magnifies the live page beneath it, with refraction wobble, chromatic fringing and 3D tilt momentum.
- [Page Preloader](https://gsapvault.com/effects/page-preloader): A complete load sequence: a counter climbs to 100 behind a full-screen overlay, the overlay clears with one of four exit styles (curtain wipe, split doors, iris, or fade), and the page content staggers in behind it.
- [Page Turn Book](https://gsapvault.com/effects/page-turn-book): Drag a page and it curls around a real cylinder, then throws over with momentum and settles.
- [Particle Morph Text](https://gsapvault.com/effects/particle-morph-text): A headline made of tens of thousands of GPU particles that dissolves in a gust and re-forms as the next word on click, while the cursor blows through the letters like wind. three.js, one shader, GSAP core.
- [Physics Word Pile](https://gsapvault.com/effects/physics-word-pile): Display-type chips that fall, collide, tumble and stack under a real rigid body solver, with drag-and-fling throwing. No physics library, just GSAP.
- [Plucked Strings](https://gsapvault.com/effects/plucked-strings): Interactive elastic strings that bend around your cursor and twang back with damped oscillation — with an opt-in sound toggle that voices every pluck as a synthesized, guitar-tuned string note.
- [Scroll Colour Shift](https://gsapvault.com/effects/scroll-color-shift): A scroll-linked palette system: each section declares its colours and the page background, text, rules and accents transition together as you scroll, with text contrast guaranteed at every point of the blend.
- [Scroll Depth Corridor](https://gsapvault.com/effects/scroll-depth-corridor): A corridor of panels receding into depth that the camera flies through as you scroll, wrapping from far to near so it never ends, with a hard flick opening the field of view and streaking the whole corridor past a headline that holds dead still at the vanishing point.
- [Scroll Hijack Sections](https://gsapvault.com/effects/scroll-hijack-sections): Pinned chapters that hold the viewport while their words assemble on the scroll, with a velocity lean that smears the whole block on a flick. Three directions: slide, rise, and scale through a blur.
- [Scroll Image Sequence](https://gsapvault.com/effects/scroll-image-sequence): Cinematic canvas frame scrubbing with an expanding aperture, synchronized chapter crossfades, and reversible scroll progress.
- [Scroll Morph Mask Video](https://gsapvault.com/effects/scroll-morph-mask-video): A looping video that never stops playing, seen through a vector mask that scroll morphs from a mark into the letterforms of a word, then zooms through the X to full bleed. Flick and the mask breathes: it inflates, the edge splits cyan and pink, and the footage speeds up.
- [Scroll Path Journey](https://gsapvault.com/effects/scroll-path-journey): Responsive SVG motion path storytelling with GSAP MotionPathPlugin and ScrollTrigger. A marker follows the route while checkpoints activate on scroll.
- [Scroll Sequence Hero Transition](https://gsapvault.com/effects/scroll-sequence-hero-transition): A scroll-scrubbed canvas image sequence hero that lifts into real page content, with Editorial, Serif, and Mono visual presets.
- [Scroll Stack Cards](https://gsapvault.com/effects/scroll-stack-cards): Full-width panels that stack over one another as you scroll, each one locking into place with an overshoot while the cards beneath compress into a visible deck.
- [Scroll Timeline Chronicle](https://gsapvault.com/effects/scroll-timeline-chronicle): A scroll-scrubbed vertical chronology: entries magnetically snap into a reading band and overshoot at the handoff while a drawn spine, an odometer year and a depth-blur falloff all react to the same scroll.
- [Scroll Velocity Skew](https://gsapvault.com/effects/scroll-velocity-skew): Kinetic type that smears with scroll speed (shear, stretch, motion blur and chromatic fringing in one velocity-driven response) then whips back line by line with an elastic overshoot.
- [Scroll Video Scrub](https://gsapvault.com/effects/scroll-video-scrub): Scroll drives a real video's playhead frame-by-frame while a horizontal track of chapters pans across the pinned footage. Apple-keynote scrub, one MP4 and a tween.
- [Scroll Zoom Portal](https://gsapvault.com/effects/scroll-zoom-portal): Pinned scroll section where a small framed panel zooms up to swallow the viewport, parting the headline around it, so scrolling feels like stepping through a portal into the next scene.
- [Split-Flap Board](https://gsapvault.com/effects/split-flap-board): Airport-departure-board character flipping for headlines, stats and status rows, with each cell rolling on a real 3D hinge and the board resolving as a staggered wave.
- [Split-Screen Hero Handoff](https://gsapvault.com/effects/split-screen-hero-handoff): A cinematic video hero that opens as six alternating vertical shutters, pulling its headline apart and revealing real page content through the seams.
- [Split Text Stagger Reveal](https://gsapvault.com/effects/split-text-reveal): Cinematic split-text reveals with masked movement, 3D rotation, blur, color-fringe energy, and a sharp staggered settle.
- [Stagger Grid Reveal](https://gsapvault.com/effects/stagger-grid-reveal): Directional GSAP grid reveals that send tiles through corner, center, edge, axis, or random waves with cinematic rotation, scale, blur, and optional focus-aware tilt.
- [Sticker Peel](https://gsapvault.com/effects/sticker-peel): Drag a sticker's corner and it peels back along a real moving fold, then rips clean off the sheet with your release velocity.
- [SVG Blob Morph](https://gsapvault.com/effects/svg-blob-morph): Organic blob masks that morph between shapes with MorphSVGPlugin. Images live inside drifting blobs that settle into a circle on hover.
- [SVG Line Draw on Scroll](https://gsapvault.com/effects/svg-line-draw): SVG paths draw themselves as you scroll using the stroke-dasharray technique. Scrubbed or play-once modes, works on any SVG shape, no DrawSVG plugin required.
- [Text Scramble Decode](https://gsapvault.com/effects/text-decode): A GSAP scramble text effect: characters cycle through random glyphs, then decode into the real content. Scroll, hover, click and auto-play triggers.
- [Text Hover Distortion](https://gsapvault.com/effects/text-hover-distortion): Characters react to cursor proximity with push, pull, wave, or rotation effects. The pointer field can be read from a whole section, and buttons anywhere on the page can switch mode live.
- [Twang Lanyard](https://gsapvault.com/effects/twang-lanyard): A two-leg SVG lanyard simulation that lets a weighted event pass fall, whip, twist, and settle through damped rope constraints.
- [Velocity Slice Image](https://gsapvault.com/effects/velocity-slice-image): A velocity-reactive image effect that peels one photograph into alternating horizontal slats with directional depth, warm edge light, and a zipper-like settle.

## Browse by category

- [GSAP Scroll Animations](https://gsapvault.com/categories/gsap-scroll-animations): Production-ready GSAP scroll animations. ScrollTrigger-powered effects including parallax, scroll hijacking, image sequences, and reveal patterns.
- [GSAP Text Effects](https://gsapvault.com/categories/gsap-text-effects): Copy-paste GSAP text effects and text animations with live demos and full source: split text reveals, scramble, glitch typography, typewriter and hover distortion.
- [GSAP Cursor Effects](https://gsapvault.com/categories/gsap-cursor-effects): Custom GSAP cursor animations. Magnetic buttons, particle trails, confetti effects, and hover distortion patterns for interactive websites.
- [GSAP Hover Effects](https://gsapvault.com/categories/gsap-hover-effects): Interactive GSAP hover animations. Liquid morphs, text distortion, cursor trails, and layout transitions for engaging user experiences.
- [GSAP Image Effects](https://gsapvault.com/categories/gsap-image-effects): GSAP image animation effects. Scroll-driven sequences, draggable galleries, layout morphs, and liquid transitions for visual-heavy websites.
- [GSAP Card Animations](https://gsapvault.com/categories/gsap-card-animations): Animated card components with GSAP. 3D flips, elastic stacking, staggered grid reveals, and layout morph transitions for modern web interfaces.
- [GSAP Background Animations](https://gsapvault.com/categories/gsap-background-animations): Production-ready GSAP background animations. Canvas particle systems, flow fields, morphing blobs, and parallax backdrops that add depth without stealing focus.
- [GSAP WebGL & Canvas Effects](https://gsapvault.com/categories/gsap-webgl-effects): GPU and canvas-rendered effects for GSAP sites: shader dispersion, mesh distortion, particle fields, fluid surfaces and cloth physics, with GSAP handling the lifecycle and any tweened values.
- [GSAP Loading Animations](https://gsapvault.com/categories/gsap-loading-animations): Production-ready GSAP loading animations and page transitions. Preloaders with real progress, overlay exits, and staggered content reveals on load.

Full catalog for agents: https://gsapvault.com/llms-full.txt