GSAP Liquid Effects

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.

7 effects, 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.

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

032 £10

Liquid Ripple Image

A liquid image hover effect: dragging the cursor over an image distorts the pixels like water, rippling from the pointer and settling back to a crisp, calm pool.

svg-filtershover-effect

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

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

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

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

Browse all 123 effects

Choose a GSAP liquid effect

For a hover on images or headlines, start with Liquid Morph. The element melts into viscous liquid under the pointer and pulls itself back together when the pointer leaves, and it can also melt a whole page as a transition. Liquid Ripple Image is the gentler choice: the picture stays put and only its surface ripples, like dragging a finger through a still pool.

For a hero that rewards playing with it, Ink Fluid Reveal runs a real fluid simulation: stirring the image dissolves an ink-wash print into the full-colour photo underneath. Ferrofluid Magnet turns the cursor into a magnet over beads of black fluid, and Water Pebbles drops stones into clear shallow water wherever you click.

For scroll, Liquid Fill Reveal fills a frame with liquid as the visitor moves down the page, with a surface that sloshes on a fast scroll. For a softer, slower treatment, SVG Blob Morph keeps portraits inside organic blobs that drift and settle into a circle on hover.

Liquid motion is heavier than most animation. The simulations here (ink, ferrofluid and water) stop rendering when they scroll off screen, and every effect respects prefers-reduced-motion. Test the one you choose with your own images, since busy photos hide a ripple that a calm one shows off.

How to make a liquid hover effect with GSAP

Run an image through an SVG displacement filter and let GSAP animate the filter's strength. Noise pushes the pixels around like water, and easing the strength back to zero settles the surface.

1

Define the filter

Add an inline SVG with feTurbulence for the noise and feDisplacementMap to move pixels by it, then apply it to the image with CSS filter: url(#liquid).
2

Animate the strength

On pointerenter, tween the displacement map's scale attribute up with GSAP's attr plugin; on pointerleave, tween it back to 0.
3

Respect reduced motion

Wrap the setup in gsap.matchMedia with a prefers-reduced-motion: no-preference query so the image stays still for visitors who opt out.

Minimal example

<svg width="0" height="0" aria-hidden="true">
  <filter id="liquid">
    <feTurbulence type="fractalNoise" baseFrequency="0.012" numOctaves="2" />
    <feDisplacementMap in="SourceGraphic" scale="0" />
  </filter>
</svg>

<img class="liquid" src="photo.jpg" alt="" style="filter: url(#liquid)">

<script type="module">
import gsap from "gsap";

const map = document.querySelector("#liquid feDisplacementMap");
const img = document.querySelector(".liquid");

img.addEventListener("pointerenter", () =>
  gsap.to(map, { attr: { scale: 40 }, duration: 0.6, ease: "power2.out" }));
img.addEventListener("pointerleave", () =>
  gsap.to(map, { attr: { scale: 0 }, duration: 0.9, ease: "power3.out" }));
</script>

Liquid & Fluid at a glance

Compare the 7 liquid & fluid in this category by what they do, technique, and difficulty.
Effect	What it does	Built with	Difficulty
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 Ripple Image	A liquid image hover effect: dragging the cursor over an image distorts the pixels like water, rippling from the pointer and settling back to a crisp, calm pool.	svg-filters	intermediate
Ink Fluid Reveal	Stir a photograph like ink in water.	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
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
SVG Blob Morph	Organic blob masks that morph between shapes with MorphSVGPlugin.	MorphSVG, morphing	intermediate

Related guides

GSAP background animation: a drifting gradient backdrop

Build an ambient animated background with GSAP: soft colour fields that drift behind your content, pause off screen and respect reduced motion. Complete code.

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.

Frequently asked questions

Is there a GSAP plugin for liquid effects?

No single plugin does it. GSAP supplies the timing, easing and pointer response, while the liquid look comes from an SVG filter, a WebGL shader or a canvas simulation that GSAP drives. MorphSVG, free like every GSAP plugin, covers the shape-morphing side: blobs flowing from one outline into another.

What is the difference between a liquid morph and a ripple effect?

A liquid morph changes the shape of the element itself: it melts, stretches and reforms. A ripple leaves the shape alone and distorts what you see through it, the way water bends the stones at the bottom of a pool. Morphs suit headlines and cards; ripples suit photography.

Do liquid effects slow down a page?

They cost more than a fade, so they are built to spend it carefully. The continuous simulations stop rendering when they scroll off screen, and the hover and scroll effects only do work while the visitor is interacting. Use one liquid effect as the centrepiece of a page rather than stacking several.

Do liquid effects work with reduced motion?

Yes. Every effect here checks prefers-reduced-motion and tones down or skips its movement for visitors who have asked for less, so the content underneath stays readable either way.

Browse all effects What GSAP effects are