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.
About This Effect
A viscous liquid distortion effect that melts images, cards and text, then lets them reform. The gallery path uses SVG turbulence and displacement filters, so it works in every modern browser with no WebGL requirement; the headline path adds an optional PixiJS shader for GPU-smooth distortion on display type.
Read the full effect overview
The demo is a studio index: hover any frame and it dissolves along its own axis, or press the melt control and the entire page — shader headline included — flows continuously until you settle it again.
What's Included
- SVG filter-based distortion that works in all modern browsers
- Optional PixiJS WebGL shader for display type, with an HTML fallback
- Hover, tap, focus, scroll-into-view and scroll-scrubbed triggers
- Per-element intensity, duration, turbulence and axis control
- data-liquid-trigger-all melts every element at once and mirrors state in aria-pressed
- Continuous ripple mode driven by layered sine waves on the GSAP ticker
- Asymmetric timing — fast to distort, slow to reform — so it reads as viscous
- Degrades to static, visible images if GSAP or ScrollTrigger fails to load
Perfect For
- Creative agency portfolio image hovers
- Product reveal animations on e-commerce sites
- Artistic hero sections with liquid transitions
- Gallery items with fluid hover interactions
- Experimental typography and headline effects
How It Works
Every morphing element gets its own SVG filter: an feTurbulence node generates fractal noise, and an feDisplacementMap pushes the element's pixels along it. GSAP animates the turbulence baseFrequency and the displacement scale, and the xChannelSelector / yChannelSelector pair decides whether the distortion runs horizontally, vertically or on both axes.
Continuous ripple runs on the GSAP ticker instead of a tween, offsetting frequency and scale with three sine waves at different rates so the flow never visibly loops. The WebGL path swaps that for a PixiJS DisplacementFilter driven by a generated value-noise texture, which the ticker drifts across the type.