# GSAP Liquid Effects

> GSAP liquid effects with live demos: liquid morph hover, water ripple images, fluid ink reveals, ferrofluid, scroll-filled liquid and morphing SVG blobs.

Canonical: https://gsapvault.com/categories/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.

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

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

| Effect | What it does | Built with | Difficulty |
| --- | --- | --- | --- |
| [Liquid Morph Hover Effect](https://gsapvault.com/effects/liquid-morph) | A GSAP liquid morph hover effect: images and headlines melt into viscous liquid, then reform. | ScrollTrigger, PixiJS, svg-filters | advanced |
| [Liquid Ripple Image](https://gsapvault.com/effects/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](https://gsapvault.com/effects/ink-fluid-reveal) | Stir a photograph like ink in water. | webgl-shader | advanced |
| [Ferrofluid Magnet](https://gsapvault.com/effects/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](https://gsapvault.com/effects/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](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 |
| [SVG Blob Morph](https://gsapvault.com/effects/svg-blob-morph) | Organic blob masks that morph between shapes with MorphSVGPlugin. | MorphSVG, morphing | intermediate |

## Effects in This Category

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

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

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

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

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

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

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

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

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

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

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

### SVG Blob Morph

Organic blob masks that morph between shapes with MorphSVGPlugin. Portraits 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)

## Related Tutorials

- [GSAP background animation: a drifting gradient backdrop](https://gsapvault.com/blog/gsap-background-animation) ([Markdown](https://gsapvault.com/blog/gsap-background-animation.md)): Build an ambient animated background with GSAP: soft colour fields that drift behind your content, pause off screen and respect reduced motion. Complete code.
- [124 GSAP animation examples and demos with code (2026)](https://gsapvault.com/blog/gsap-animation-examples) ([Markdown](https://gsapvault.com/blog/gsap-animation-examples.md)): 124 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.

## Related Categories

- [GSAP Background Animations](https://gsapvault.com/categories/gsap-background-animations)
- [GSAP WebGL & Canvas Effects](https://gsapvault.com/categories/gsap-webgl-effects)
- [GSAP Hover and Cursor Effects](https://gsapvault.com/categories/gsap-hover-effects)

---

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