# GSAP Background Animations

> Production-ready GSAP background animations. Canvas particle systems, flow fields, morphing blobs, and parallax backdrops that add depth without stealing focus.

Canonical: https://gsapvault.com/categories/gsap-background-animations

Ambient, always-on animations that live behind your content. Canvas particle fields, morphing shapes, and parallax layers that add atmosphere and depth while headings and copy stay readable.

## Building Animated Backgrounds with GSAP

A good background animation sets a mood without demanding attention. Unlike scroll or hover effects that respond to a specific action, background effects run continuously: particles drifting across a hero, a blob slowly morphing behind a headline, layers shifting subtly as the page moves. The craft is in keeping them quiet enough that content stays the star.

Canvas is the workhorse for dense background effects. A flow-field particle system can animate hundreds of points at 60fps because it draws to a single canvas element instead of moving hundreds of DOM nodes. GSAP drives the timing, easing, and interactive responses, while requestAnimationFrame handles the render loop.

For softer, organic looks, SVG morphing works well. Animating the points of a blob path with GSAP creates fluid, liquid motion that scales crisply at any resolution and costs far less than a full particle system. Parallax layers sit in between: plain DOM elements moved on transform, cheap to run and effective for depth.

Performance and accessibility matter more for backgrounds than anywhere else, because these effects never stop. Every pattern here pauses its render loop when the tab or section is off-screen, caps its particle counts on smaller devices, and respects prefers-reduced-motion by rendering a static backdrop instead.

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

```js
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

| Effect | What it does | Built with | Difficulty |
| --- | --- | --- | --- |
| [Liquid Fill Reveal](https://gsapvault.com/effects/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](https://gsapvault.com/effects/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](https://gsapvault.com/effects/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](https://gsapvault.com/effects/scroll-color-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](https://gsapvault.com/effects/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](https://gsapvault.com/effects/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 |
| [Liquid Morph Gallery](https://gsapvault.com/effects/liquid-morph) | Images and headlines dissolve into viscous liquid on hover, then reform. | ScrollTrigger, PixiJS, svg-filters | advanced |
| [SVG Blob Morph](https://gsapvault.com/effects/svg-blob-morph) | Organic blob masks that morph between shapes with MorphSVGPlugin. | MorphSVG, morphing | intermediate |
| [Parallax Hero](https://gsapvault.com/effects/parallax-hero) | A pinned hero that separates its background photograph, copy, and foreground card into distinct scroll depths from a single scrubbed ScrollTrigger. | ScrollTrigger, parallax | intermediate |

## Effects in This Category

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

- Tier: premium · Difficulty: advanced
- [View effect](https://gsapvault.com/effects/liquid-fill-reveal)
- [Clean Markdown for AI agents](https://gsapvault.com/effects/liquid-fill-reveal.md)

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

- Tier: premium · Difficulty: intermediate
- [View effect](https://gsapvault.com/effects/aurora-gradient-field)
- [Clean Markdown for AI agents](https://gsapvault.com/effects/aurora-gradient-field.md)

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

- Tier: premium · Difficulty: intermediate
- [View effect](https://gsapvault.com/effects/ambient-orb-field)
- [Clean Markdown for AI agents](https://gsapvault.com/effects/ambient-orb-field.md)

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

- Tier: premium · Difficulty: advanced
- [View effect](https://gsapvault.com/effects/scroll-color-shift)
- [Clean Markdown for AI agents](https://gsapvault.com/effects/scroll-color-shift.md)

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

- Tier: premium · Difficulty: advanced
- [View effect](https://gsapvault.com/effects/canvas-particle-flow)
- [Clean Markdown for AI agents](https://gsapvault.com/effects/canvas-particle-flow.md)

### Canvas Shape Vortex

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

- Tier: premium · Difficulty: advanced
- [View effect](https://gsapvault.com/effects/canvas-shape-vortex)
- [Clean Markdown for AI agents](https://gsapvault.com/effects/canvas-shape-vortex.md)

### Liquid Morph Gallery

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.

- Tier: premium · Difficulty: advanced
- [View effect](https://gsapvault.com/effects/liquid-morph)
- [Clean Markdown for AI agents](https://gsapvault.com/effects/liquid-morph.md)

### SVG Blob Morph

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

- Tier: premium · Difficulty: intermediate
- [View effect](https://gsapvault.com/effects/svg-blob-morph)
- [Clean Markdown for AI agents](https://gsapvault.com/effects/svg-blob-morph.md)

### Parallax Hero

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

- Tier: free · Difficulty: intermediate
- [View effect](https://gsapvault.com/effects/parallax-hero)
- [Clean Markdown for AI agents](https://gsapvault.com/effects/parallax-hero.md)

## Related Tutorials

- [GSAP performance: why animations get janky and how to fix it](https://gsapvault.com/blog/gsap-performance-guide) ([Markdown](https://gsapvault.com/blog/gsap-performance-guide.md)): 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: A Practical Guide](https://gsapvault.com/blog/gsap-vs-css-animations) ([Markdown](https://gsapvault.com/blog/gsap-vs-css-animations.md)): When should you use CSS animations versus GSAP? Learn the practical differences, performance trade-offs, and when each approach makes sense.

## 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. They pause when off-screen or when the tab is hidden, so they only consume resources while actually visible. On a mid-range laptop they typically use a small fraction of one CPU core.

### 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. Particle counts scale down on smaller screens, render loops pause when the effect scrolls out of view, and devicePixelRatio is capped to avoid oversized canvas buffers. Users with prefers-reduced-motion enabled get a static background with no render loop at all.

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

## Related Categories

- [GSAP Image Effects](https://gsapvault.com/categories/gsap-image-effects)
- [GSAP Hover and Cursor Effects](https://gsapvault.com/categories/gsap-hover-effects)
- [GSAP Scroll Animations](https://gsapvault.com/categories/gsap-scroll-animations)

---

From [GSAP Vault](https://gsapvault.com): production-ready GSAP animation effects. Full catalog for agents: https://gsapvault.com/llms-full.txt