GSAP Background Animations

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.

18 effects, 2 free, no build step

Effects Pass

£50

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

The Vault

£99

All 289 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

114 New £10

Animated Background Beams

A GSAP animated background of ink hairlines carrying light pulses into your call to action: the pointer draws a current, a click sends a ping through the whole network.

svg-pathsvg-animation

115 New £10

Interactive Dot Grid Background

A background layer of springy dots: the pointer parts the field, a fast flick throws a V-shaped wake, and a click sends a ring through the grid.

canvasspring-physics

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

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

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

048 £10

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.

gradientambient

050 £10

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.

ambientblend-mode

049 £10

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

ScrollTrigger scroll-linked-color

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

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

024 £10

SVG Blob Morph

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

MorphSVG morphing

f04 Free

Parallax Hero

A pinned hero that pulls its layers into depth from one scrubbed ScrollTrigger: a headline sandwiched inside the stack, ridges or photographs climbing over it, and a sun that sets behind the far layer.

ScrollTrigger parallax

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

119 New £10

Dither Background

A GSAP and WebGL dither background: a lit sphere drawn in 1-bit Bayer dots, the pointer is the light, and a click inverts paper and ink through a stepped dissolve that doubles as a light/dark theme switch.

webgl-shadertheme-switch

120 New £10

Warp Speed Background

A GSAP and WebGL starfield background the visitor flies: stars drift quietly behind your content, press and hold stretches them into streaks, and release jumps to warp speed before a long deceleration back to drift.

webgl-shaderparticle-system

Browse all 128 effects

Building Animated Backgrounds with GSAP

A good background animation sets a mood without demanding attention. It runs while the visitor reads, so it has to stay quiet at rest and answer when the pointer arrives: spotlights swing towards the cursor, a dot grid parts around it, pulses run along beams towards the button you want clicked. The craft is in keeping them calm enough that content stays the star.

Pick the technique by density. Canvas suits thousands of small marks, like the interactive dot grid or a flow-field of particles, because it draws them all to one element. WebGL suits light, cloth and liquid, where every pixel is shaded: the spotlight haze, silk, the Bayer-dithered sphere, water and ferrofluid. It also draws thousands of stretching streaks in one call, which is how the warp-speed starfield stays smooth at full charge. SVG suits line work such as animated beams, which stay crisp at any size. GSAP drives the timing, easing and interactive response in all of them.

For softer, organic looks, SVG morphing and CSS gradients cost far less than a shader: a blob path morphing behind a portrait, or colour fields drifting behind a sign-up form. Parallax layers sit at the cheap end, plain DOM elements moved on transform for a sense of depth.

Performance and accessibility matter more for backgrounds than anywhere else, because these effects never stop. The WebGL scenes and the aurora field pause their render loops when the section scrolls off screen, every effect stops while its tab is hidden, the canvas ones cap the device pixel ratio, and all of them respect prefers-reduced-motion.

How to build an ambient background animation with GSAP

Loop a slow, randomised drift on a background shape so it moves continuously without stealing focus. repeatRefresh re-rolls the random values each loop so the motion never repeats exactly.

1

Position a background shape

Place a blurred blob or shape behind your content with CSS so animating it never disturbs the layout.
2

Loop a randomised drift

Tween x, y and scale with random() ranges, an infinite repeat, and yoyo so it eases back and forth.
3

Refresh each cycle

Set repeatRefresh: true so GSAP picks new random targets every loop, keeping the motion organic.

Minimal example

import gsap from "gsap";

gsap.to(".blob", {
  x: "random(-40, 40)",
  y: "random(-30, 30)",
  scale: "random(0.9, 1.15)",
  duration: 6,
  ease: "sine.inOut",
  repeat: -1,
  yoyo: true,
  repeatRefresh: true,  // new random values each loop
});

Background Effects at a glance

Compare the 18 background effects 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
Animated Background Beams	A GSAP animated background of ink hairlines carrying light pulses into your call to action: the pointer draws a current, a click sends a ping through the whole network.	svg-path	intermediate
Interactive Dot Grid Background	A background layer of springy dots: the pointer parts the field, a fast flick throws a V-shaped wake, and a click sends a ring through the grid.	canvas	intermediate
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
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
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
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.	gradient	intermediate
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.	ambient	intermediate
Scroll Colour 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.	ScrollTrigger, scroll-linked-color	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
Liquid Morph Hover Effect	A GSAP liquid morph hover effect: images and headlines melt into viscous liquid, then reform.	ScrollTrigger, PixiJS, svg-filters	advanced
SVG Blob Morph	Organic blob masks that morph between shapes with MorphSVGPlugin.	MorphSVG, morphing	intermediate
Parallax Hero	A pinned hero that pulls its layers into depth from one scrubbed ScrollTrigger: a headline sandwiched inside the stack, ridges or photographs climbing over it, and a sun that sets behind the far layer.	ScrollTrigger, parallax	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
Dither Background	A GSAP and WebGL dither background: a lit sphere drawn in 1-bit Bayer dots, the pointer is the light, and a click inverts paper and ink through a stepped dissolve that doubles as a light/dark theme switch.	webgl-shader	advanced
Warp Speed Background	A GSAP and WebGL starfield background the visitor flies: stars drift quietly behind your content, press and hold stretches them into streaks, and release jumps to warp speed before a long deceleration back to drift.	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.

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 background animations hurt page performance?

Not when built correctly. These effects draw to canvas or animate transforms, both of which avoid layout recalculation. Everything stops while the tab is hidden, and the heaviest ones, the WebGL scenes, also pause when scrolled off screen. Run one animated background per page rather than stacking several.

Should I use canvas, SVG, or CSS for background effects?

Canvas suits dense effects like particle systems, where hundreds of elements would overwhelm the DOM. SVG suits organic shapes like morphing blobs, staying crisp at any size with a handful of animated points. CSS transforms suit simple parallax layers. The effects in this category use whichever fits the pattern best.

Do these effects drain battery on mobile?

They are built to be considerate. The canvas effects cap devicePixelRatio to avoid oversized buffers on high-density phone screens, the WebGL scenes pause when scrolled out of view, and visitors with prefers-reduced-motion enabled get a still or much calmer background.

Can I put text on top of an animated background?

Yes, that is the intended use. Keep contrast high by dimming or blurring the effect behind text blocks, and avoid rapid movement directly under small copy. The demos in each effect show recommended overlay treatments with headings and buttons on top.

Browse all effects What GSAP effects are