Effect categories

Scroll-driven animations that respond to the user as they navigate. Built with GSAP ScrollTrigger for pinning, scrubbing, and triggering at precise scroll positions.

GSAP text animations for headings, statements and reading passages: oversized lettering that follows a curved path, spirals through depth or unfolds like paper, alongside split reveals, scramble, glitch, typewriters and hover distortion. Every one has a live demo and the full source.

Pointer-driven animations that respond to hover, mouse position, movement speed and drag. Magnetic attraction, particle trails, morphing shapes, cards you can throw and smooth layout transitions, all powered by GSAP.

Visual-heavy animations that transform how images are displayed and interacted with. Scroll-driven sequences, draggable galleries, morphing layouts, and liquid transitions for portfolio and editorial sites.

Animated backgrounds that live behind your content: stage spotlights you aim with the pointer, light pulses running along a network of lines, dot grids that part under the cursor, satin folds, a 1-bit dithered sphere that doubles as a theme switch, a starfield you charge into warp speed, WebGL water and ferrofluid, drifting gradients and particle flows. Every one keeps the headline readable.

Effects that draw to a canvas instead of to the DOM. Shaders, particle systems, mesh distortion and soft-body physics; GSAP handles matchMedia, teardown and any played values, and the renderer reads them each frame.

The first animation a visitor sees is the load itself. Preloaders that report real progress, overlays that clear with intent, and content that arrives in a considered order rather than all at once.

Effects that make a page behave like liquid: images that melt and reform on hover, pixels that ripple under the cursor like water, ink that swirls away to reveal a photo, and shapes that flow from one form into the next. Every one has a live demo.