GSAP WebGL & Canvas Effects

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.

35 effects, 1 free, no build step

Effects Pass

£50

Every current and future premium effect. Includes all 113 premium effects available now, plus every future release in this line.

The Vault

£99

All 280 premium items in the Vault library, plus future additions to the library.

113 New Free

Spotlight Background

A theatrical GSAP and WebGL spotlight background: two stage follow-spots in a hazed room sweep in from the wings, cross over your headline and land on it, then trail the cursor like spots worked by an operator.

webgl-shaderspotlight

100 £10

Inflatable Type

A headline of glossy, air-filled 3D balloon letters on curling ribbon strings. Press one and its surface dents while the rest bulges, sweep across to knock letters into their neighbours with their strings trailing, and tap to pump a letter up until it squeaks back into place.

webgl-shaderspring-physics

099 £10

Shadow Assembly

Drag a low spotlight freely across the floor to reshape the word or monogram cast by a suspended matte black sculpture. Release to hold its position, then choose Align light to restore the artwork.

webgl-shaderpointer-effects

097 £10

Fogged Glass Reveal

Look through a rain-covered window into a misty forest. Wipe away soft condensation while refractive beads gather at the edges and rivulets run down the glass.

webgl-shadermask-reveal

098 £10

Sand Reveal

Brush uneven mounds of pale sand across a graphite board, leaving fine grain trails and gathering material into shaded piles.

canvaspointer-tracking

096 £10

Scratch Card Reveal

Scratch silver foil to reveal a photograph or discount code. Permanent tracks, directional flakes and an optional automatic finish, switched off by default.

canvastouch-gestures

094 £10

Product Configurator

An interactive 3D speaker with tactile rotation, three cabinet finishes, a removable grille and guided views of its controls, drivers and connections.

webgl-shaderdrag

092 £10

ASCII Focus

A photographic character field that resolves into finer glyphs and a clear image as a focus lens moves across it.

webgl-shadermouse-follow

093 £10

Contour Landscape

Sculpt a lit three-dimensional landscape with a press or drag, as charcoal contours wrap around the rising terrain.

webgl-shader3d-transforms

091 £10

Metal Fold

A sculpted metal sheet that dents under your pointer, bending brushed silver and copper reflections across its folds.

webgl-shader

089 £10

Ferrofluid Magnet

Beads of glossy black ferrofluid scattered across a hero: your cursor is an invisible magnet that tugs gently on hover; press and hold to pull the fluid into a spiked pool (or shove it clear in repel mode), then let go to throw it outward.

webgl-shadermetaballs

090 £10

Water Pebbles

A hero background of clear, shallow water over a pale stone floor, with smooth river pebbles on the bottom seen through the ripples. Click the water to drop a pebble in with a splash, drag one along the floor to push a bow wave and nudge the stones it meets.

webgl-shaderwave-simulation

084 £10

Threaded Image Slider

A photographic slider with a fuller row of images and restrained threads that fan vertically at the edges, with touch dragging, momentum and centre snapping.

webgl-shaderinfinite-loop

082 £10

Ink Fluid Reveal

Stir a photograph like ink in water. A real fluid simulation curls into eddies under your pointer and dissolves an ink-wash print to reveal the full-colour image, or a second photo, before it slowly heals.

webgl-shaderfluid-simulation

080 Premium £20

Laptop Screen Scroll

A laptop opens on scroll, fills the viewport, then becomes the live website you keep scrolling through. Built with GSAP ScrollTrigger.

ScrollTrigger webgl-shader

109 New £10

Phone Screen Scroll

A real 3D phone, built in three.js, stands pinned in the page and turns as you scroll: front, three-quarter, edge-on, then the back with its camera module, while its screen changes between your screenshots. One img tag per screen. GSAP scrubs the pose; three.js draws it.

ScrollTrigger webgl-shader

074 £10

Lenticular Card

Tilt a ridged card to reveal an alpine lake from day to night, with optical interlacing, moving plastic highlights and a physical settle.

webgl-shader3d-transforms

073 £10

Prismatic Border Glow

A soft multicolour border that blooms inward and sends paired ripples around rounded edges on edge movement, click or tap. Three.js renders the glow; GSAP shapes the pulse and settle.

webgl-shaderpointer-effects

071 £10

Warp Portfolio Reel

A seamless vertical portfolio carousel that bends into a sculptural photo ribbon as you scroll or drag, with a crisp project link on every slide.

webgl-shaderfisheye

072 £10

Lens Slider Wall

An infinite wall of sliding photographs that bow through a velocity lens and lift seamlessly into a large viewer.

webgl-shadervelocity-reactive

062 £10

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.

webgl-shaderparticle-system

061 £10

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.

webgl-shaderchromatic-aberration

055 £10

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.

canvasmesh-distortion

069 £10

Funhouse Portrait

Inflate noses, squeeze faces and twist smiles with a playful three.js portrait filter that springs back on release.

webgl-shaderfisheye

107 New £10

Pixel Sort Drag

A WebGL pixel sort you paint with the pointer: drag across a photograph and the pixels in your wake smear into luminance-sorted streaks, fine on a slow move and torn wide open on a fast flick, then relax back into the clean image.

webgl-shaderglitch

108 New £10

Slit-Scan Stretch

A full-bleed photograph read through a moving slit, like a 1970s photo-finish camera: sweep across it and the picture smears into long streaks that trail the pointer's path, fringed with colour, then retract into the slit and settle. three.js and one shader; GSAP core runs the media branching, the load sweep and the release.

webgl-shaderchromatic-aberration

006 £10

Liquid Morph Hover Effect

A GSAP liquid morph hover effect: images and headlines melt into viscous liquid, then reform. SVG filters, an optional WebGL shader, and a whole-page melt.

ScrollTriggerPixiJS

054 £10

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.

ScrollTrigger scrub

043 £10

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.

physicscanvas

016 £10

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.

canvasflow-field

$Canvas Shape Vortex - A photoreal spiral galaxy on a 2D canvas: logarithmic arms, clustered star fields, additive bloom and diffraction spikes, flown by scroll and pointer with no WebGL$

018 £10

Canvas Shape Vortex

A photoreal spiral galaxy on a 2D canvas: logarithmic arms, clustered star fields, additive bloom and diffraction spikes, flown by scroll and pointer with no WebGL.

ScrollTrigger canvas

051 £10

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

canvashalftone

042 £10

Fracture Reveal

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

clip-pathvoronoi

015 £10

Scroll Image Sequence

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

ScrollTrigger scrub

118 New £10

Silk Background

A GSAP and WebGL silk background: a sheet of satin drifts in slow folds behind your content, the pointer moves the light across its sheen, and press and hold sends ripples out under the cloth.

webgl-shaderorganic-motion

Browse all 123 effects

Building WebGL and Canvas Effects with GSAP

There is a ceiling to what CSS can do. Transforms and filters are fast and they compose well, but they operate on whole elements: you cannot bend the middle of an image, pull its colour channels apart along an edge, or push ten thousand particles around a flow field. At that point the work moves to a canvas, and GSAP changes job.

In a DOM animation GSAP writes styles. In a canvas or WebGL animation it does not touch the page at all: where a value is played (a reveal, a click, a scroll scrub) GSAP animates a plain number and the render loop reads it; where a value is continuous (pointer, velocity, time) the loop integrates it itself, and some effects here use GSAP only for matchMedia and cleanup. Each README says exactly which. The renderer stays your own code.

The effects below split into two groups. Most compile real shaders and run on the GPU, which is what makes per-pixel work like spectral dispersion, fluid surfaces or mesh distortion affordable. The rest use the 2D canvas API, which is simpler, has no shader compilation step, and is usually the right choice for particles, halftone screens and physics.

Both carry a cost the DOM does not: a canvas is invisible to screen readers, WebGL holds GPU memory that has to be released by hand, and WebGL contexts are capped per page. Every effect here therefore ships an explicit teardown and respects reduced motion.

WebGL & Canvas at a glance

Compare the 35 webgl & canvas in this category by what they do, technique, and difficulty.
Effect	What it does	Built with	Difficulty
Spotlight Background	A theatrical GSAP and WebGL spotlight background: two stage follow-spots in a hazed room sweep in from the wings, cross over your headline and land on it, then trail the cursor like spots worked by an operator.	webgl-shader	advanced
Inflatable Type	A headline of glossy, air-filled 3D balloon letters on curling ribbon strings.	webgl-shader	advanced
Shadow Assembly	Drag a low spotlight freely across the floor to reshape the word or monogram cast by a suspended matte black sculpture.	webgl-shader	advanced
Fogged Glass Reveal	Look through a rain-covered window into a misty forest.	webgl-shader	advanced
Sand Reveal	Brush uneven mounds of pale sand across a graphite board, leaving fine grain trails and gathering material into shaded piles.	canvas	advanced
Scratch Card Reveal	Scratch silver foil to reveal a photograph or discount code.	canvas	intermediate
Product Configurator	An interactive 3D speaker with tactile rotation, three cabinet finishes, a removable grille and guided views of its controls, drivers and connections.	webgl-shader	advanced
ASCII Focus	A photographic character field that resolves into finer glyphs and a clear image as a focus lens moves across it.	webgl-shader	advanced
Contour Landscape	Sculpt a lit three-dimensional landscape with a press or drag, as charcoal contours wrap around the rising terrain.	webgl-shader	advanced
Metal Fold	A sculpted metal sheet that dents under your pointer, bending brushed silver and copper reflections across its folds.	webgl-shader	advanced
Ferrofluid Magnet	Beads of glossy black ferrofluid scattered across a hero: your cursor is an invisible magnet that tugs gently on hover; press and hold to pull the fluid into a spiked pool (or shove it clear in repel mode), then let go to throw it outward.	webgl-shader	advanced
Water Pebbles	A hero background of clear, shallow water over a pale stone floor, with smooth river pebbles on the bottom seen through the ripples.	webgl-shader	advanced
Threaded Image Slider	A photographic slider with a fuller row of images and restrained threads that fan vertically at the edges, with touch dragging, momentum and centre snapping.	webgl-shader	advanced
Ink Fluid Reveal	Stir a photograph like ink in water.	webgl-shader	advanced
Laptop Screen Scroll	A laptop opens on scroll, fills the viewport, then becomes the live website you keep scrolling through.	ScrollTrigger, webgl-shader	advanced
Phone Screen Scroll	A real 3D phone, built in three.js, stands pinned in the page and turns as you scroll: front, three-quarter, edge-on, then the back with its camera module, while its screen changes between your screenshots.	ScrollTrigger, webgl-shader	advanced
Lenticular Card	Tilt a ridged card to reveal an alpine lake from day to night, with optical interlacing, moving plastic highlights and a physical settle.	webgl-shader	advanced
Prismatic Border Glow	A soft multicolour border that blooms inward and sends paired ripples around rounded edges on edge movement, click or tap.	webgl-shader	advanced
Warp Portfolio Reel	A seamless vertical portfolio carousel that bends into a sculptural photo ribbon as you scroll or drag, with a crisp project link on every slide.	webgl-shader	advanced
Lens Slider Wall	An infinite wall of sliding photographs that bow through a velocity lens and lift seamlessly into a large viewer.	webgl-shader	advanced
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.	webgl-shader	advanced
Curved Ribbon Slider	A full-bleed WebGL slider driven by the scroll wheel.	webgl-shader	advanced
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.	canvas	advanced
Funhouse Portrait	Inflate noses, squeeze faces and twist smiles with a playful three.js portrait filter that springs back on release.	webgl-shader	advanced
Pixel Sort Drag	A WebGL pixel sort you paint with the pointer: drag across a photograph and the pixels in your wake smear into luminance-sorted streaks, fine on a slow move and torn wide open on a fast flick, then relax back into the clean image.	webgl-shader	advanced
Slit-Scan Stretch	A full-bleed photograph read through a moving slit, like a 1970s photo-finish camera: sweep across it and the picture smears into long streaks that trail the pointer's path, fringed with colour, then retract into the slit and settle.	webgl-shader	advanced
Liquid Morph Hover Effect	A GSAP liquid morph hover effect: images and headlines melt into viscous liquid, then reform.	ScrollTrigger, PixiJS, svg-filters	advanced
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.	ScrollTrigger, scrub	advanced
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.	physics	advanced
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	advanced
Canvas Shape Vortex	A photoreal spiral galaxy on a 2D canvas: logarithmic arms, clustered star fields, additive bloom and diffraction spikes, flown by scroll and pointer with no WebGL.	ScrollTrigger, canvas	advanced
Interactive 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.	canvas	advanced
Fracture Reveal	Shatter any element into real Voronoi shards from the point you hit, then watch them reassemble with no seam left behind.	clip-path	advanced
Scroll Image Sequence	Cinematic canvas frame scrubbing with an expanding aperture, synchronized caption crossfades, and reversible scroll progress.	ScrollTrigger, scrub	intermediate
Silk Background	A GSAP and WebGL silk background: a sheet of satin drifts in slow folds behind your content, the pointer moves the light across its sheen, and press and hold sends ripples out under the cloth.	webgl-shader	advanced

Related guides

GSAP performance: why animations get janky and how to fix it

A GSAP performance guide: keep tweens on the compositor, batch ScrollTriggers, sync smooth scroll to one clock, and stop pinned sections jumping.

123 GSAP animation examples and demos with code (2026)

123 GSAP animation examples with live demos and code: scroll, text, cursor, and canvas effects. Ten are completely free with copy-paste snippets below.

GSAP vs CSS Animations: Which Should You Use in 2026?

GSAP vs CSS animations in 2026: scroll-driven animations, View Transitions, @starting-style and performance compared, with a clear rule for when to use each.

Frequently asked questions

Do I need to know WebGL to use these effects?

No. Each effect ships as a drop-in script with its configuration exposed as data attributes, so you can change the framing, the intensity and the behaviour without touching a line of GLSL. The shader source is included and commented if you do want to go further.

What does GSAP actually do in a WebGL animation?

It animates numbers rather than styles. Your render loop reads those numbers each frame and draws accordingly, so GSAP supplies the easing, timelines, responsive branching via matchMedia and the cleanup, while the drawing stays entirely your own code.

Are canvas and WebGL effects accessible?

A canvas is a single opaque element to a screen reader, so the content inside it has to exist somewhere else too. Every effect here renders over real markup and only hides it once the canvas is running, which means the same markup serves visitors without JavaScript, without WebGL, and with reduced motion turned on.

Will these run on mobile?

Yes. They cap the device pixel ratio, which is the single biggest cost on a high-density phone display, and most of the continuously animating scenes stop rendering when they scroll off screen. Test the one you choose on a mid-range phone, since GPUs vary far more on mobile than on desktop.

Do WebGL effects leak memory?

They do if you let them. Geometries, materials, textures and the context itself all hold GPU memory that dropping a reference does not release, and browsers cap how many live contexts a page may hold. Every effect here exposes a teardown that releases all of it, which is what you call on an SPA route change.

Browse all effects What GSAP effects are