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.
Unlock everything for £39
All 111 premium effects and templates, plus every future effect and template we release. That's £0.35 per item.
Buy individually now: up to £10 comes off the Vault later
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. A couple compile real shaders and run on the GPU, which is what makes per-pixel work like spectral dispersion 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, 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 a real fallback for the visitor who has scripting off, reduced motion on, or no WebGL available.
WebGL & Canvas at a glance
| Effect | What it does | Built with | Difficulty |
|---|---|---|---|
| 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 |
| Liquid Morph Gallery | Images and headlines dissolve into viscous liquid on hover, 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 | Luminous 3D canvas shapes spiral through a depth tunnel that bends and blooms with fast pointer movement, no WebGL required. | 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 chapter crossfades, and reversible scroll progress. | ScrollTrigger, scrub | intermediate |
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.
Read guide
69 GSAP animation examples with code (2026)
69 production-ready GSAP animation examples with code: scroll, text, cursor, and canvas effects. Eight are completely free with copy-paste snippets below.
Read guide
GSAP vs CSS Animations: A Practical Guide
When should you use CSS animations versus GSAP? Learn the practical differences, performance trade-offs, and when each approach makes sense.
Read guideFrequently 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, with lighter settings. Each effect reduces its own detail on touch devices, gates its render loop on an IntersectionObserver so it never runs off screen, and caps the device pixel ratio, which is the single biggest cost on a high-density phone display.
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 disposes all of it, which is what you call on an SPA route change.