GSAP Effects Library

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.

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.

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.

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.

A two-leg SVG lanyard simulation that lets a weighted event pass fall, whip, twist, and settle through damped rope constraints.

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.

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.

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.

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.

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.

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.

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.

A glass loupe that follows the cursor and magnifies the live page beneath it, with refraction wobble, chromatic fringing and 3D tilt momentum.

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.

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.

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.

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.

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.

Drag a page and it curls around a real cylinder, then throws over with momentum and settles.

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.

Trading-card holographic tilt: one pointer drives 3D rotation, an iridescent foil sheen, twinkling glitter, depth parallax and a specular bloom, then settles elastically.

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.

Shatter any element into real Voronoi shards from the point you hit, then watch them reassemble with no seam left behind.

A cinematic video hero that opens as six alternating vertical shutters, pulling its headline apart and revealing real page content through the seams.

A scroll-scrubbed canvas image sequence hero that lifts into real page content, with Editorial, Serif, and Mono visual presets.

Drag a sticker's corner and it peels back along a real moving fold, then rips clean off the sheet with your release velocity.

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.

A velocity-reactive image effect that peels one photograph into alternating horizontal slats with directional depth, warm edge light, and a zipper-like settle.

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.

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.

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 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.

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.

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.

A scrubbed orange-to-lime reading front lifts each active word before completed copy settles to white and unread copy remains ghosted.

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.

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.

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.

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.

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.

Responsive SVG motion path storytelling with GSAP MotionPathPlugin and ScrollTrigger. A marker follows the route while checkpoints activate on scroll.

Organic blob masks that morph between shapes with MorphSVGPlugin. Images live inside drifting blobs that settle into a circle on hover.

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.

A pinned editorial rail where vertical scroll sweeps through horizontal chapters with measured snap, counter-drift parallax, and a precise progress readout.

Velocity-aware editorial image trail with layered card drift, directional tilt, staggered decay, and static touch previews. Pure GSAP core.

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.

Entry- or scroll-triggered number counters with locale-aware formatting, staggered reveals, synchronized progress visuals, and optional replay.

Three material link underlines (an exit-through line, marker sweep, and hand-drawn wave) with coordinated type and active-index responses.

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.

A pinned hero that separates its background photograph, copy, and foreground card into distinct scroll depths from a single scrubbed ScrollTrigger.

A sharp terminal-style typewriter that types, holds, accelerates through deletion, and cycles to the next phrase in sync with cursor and progress signals.

Luminous 3D canvas shapes spiral through a depth tunnel that bends and blooms with fast pointer movement, no WebGL required.

An ember-toned Canvas 2D flow field that bends into a dense wake around pointer, touch, and keyboard attraction before dispersing organically.

A responsive GSAP confetti trail that turns fast pointer sweeps and touch drags into colourful, directional ribbons of tumbling geometric particles.

Cinematic canvas frame scrubbing with an expanding aperture, synchronized chapter crossfades, and reversible scroll progress.

Shared-element layout transitions powered by GSAP Flip, with a premium grid-to-detail archive showcase plus reusable lightbox and filter APIs.

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.

A portable editorial cursor with dot-and-ring lag, velocity afterimages, elastic target labels, color morphs, and touch previews.

A precise GSAP reading-progress instrument with bar, ring, side rail, percentage, and active chapter feedback.

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.

Native CSS scroll-driven reveals for crisp fade, slide, and scale entrances with accessible static fallbacks and no animation JavaScript.

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.

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.

A GSAP glitch effect in four styles: displacement shift, RGB chromatic aberration, VHS scan slice and character-level chaos. Hover, click, scroll or interval.

Cinematic split-text reveals with masked movement, 3D rotation, blur, color-fringe energy, and a sharp staggered settle.

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.

Elements attract or repel from the cursor with elastic physics. Perfect for buttons, navigation items, and CTAs on award-winning sites.

A GSAP scramble text effect: characters cycle through random glyphs, then decode into the real content. Scroll, hover, click and auto-play triggers.

Draggable gallery with infinite looping, fisheye center-scale, and momentum physics. Drag any direction to explore: cards near center grow larger.

Continuous scrolling marquees with mouse-based speed control. Rewind, pause, or fast-forward with cursor position. Uses GSAP quickTo for 60fps.

Tactile 3D cards with deep perspective, reactive edge-light, shadow inversion, hover/focus parity, and tap auto-close.