# 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. Canonical: https://gsapvault.com/effects/liquid-morph Live demo: https://gsapvault.com/demos/liquid-morph/index.html | Property | Value | |----------|-------| | Type | effect | | Tier | paid | | Price | £5 | | Difficulty | advanced | | Plugins | ScrollTrigger, PixiJS | | Techniques | svg-filters, morphing, hover-effect, scroll-reveal, webgl-shader | | Uses Lenis | No | ## Overview 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. 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. ## Features - 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 ## Use Cases - 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 ## Vibe-Code Ready Setup This effect includes `START-HERE-AI.md`, a product-specific copy-paste setup prompt for Cursor, Claude Code, ChatGPT, GitHub Copilot, Windsurf, and other coding assistants. It tells the assistant to inspect the existing stack, integrate the supplied files, preserve the design, scope selectors, retain accessibility and responsive behaviour, add framework-appropriate GSAP cleanup, and report what it tested. [How AI-assisted setup works](https://gsapvault.com/vibe-coding) ## 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. ## Integration Preview How this effect integrates into a page. The full documentation (examples, events, programmatic API, customization guide) ships with the download. ### Quick Start **1. Add to your HTML ``:** ```html ``` **2. Add before closing `` tag:** ```html ``` **3. Add the effect HTML anywhere in your ``:** ```html
Description

YOUR TEXT

``` **Optional:** Add an empty SVG container for filters (created automatically if missing): ```html ``` ### Options | Attribute | Values | Default | Description | |-----------|--------|---------|-------------| | `data-trigger` | `hover`, `scroll`, `auto` | `hover` | What triggers the distortion effect | | `data-intensity` | `0.1` - `1` | `0.5` | Distortion strength (higher = more warping) | | `data-direction` | `horizontal`, `vertical`, `both` | `both` | Axis of distortion movement | | `data-duration` | seconds | `0.8` | Animation duration | | `data-turbulence` | `0.01` - `0.1` | `0.03` | Noise frequency (lower = larger waves) | | `data-infinite` | `true`, `false` | `false` | Continuous rippling while hovering (hover trigger only) | | `data-scrub` | `true`, `false` | `false` | Tie animation to scroll position (scroll trigger only) | | `data-repeat` | `true`, `false` | `true` | Replay animation when scrolling back (scroll trigger only) | ### Accessibility - **Reduced motion**: Effect is completely disabled for users who prefer reduced motion. Images display normally without filters. - **Keyboard navigation**: - Tab to focus on interactive elements - Focus triggers the morph effect (same as hover) - Press **Enter** or **Space** to toggle the effect on/off - Effect resets when focus leaves the element - **Focus visible**: Clear cyan outline ring when navigating with keyboard - **ARIA support**: Interactive elements have `role="button"` and descriptive `aria-label` - **Touch devices**: Tap to toggle the distortion effect ### Browser Support Works in all modern browsers that support SVG filters: - Chrome 49+ - Firefox 52+ - Safari 10.1+ - Edge 79+ Falls back gracefully in older browsers (images display normally). ### Dependencies - GSAP 3.12+ - ScrollTrigger plugin (only needed for `data-trigger="scroll"`) - PixiJS 8.x (only needed for WebGL liquid title) ## What You Get - `index.html`: working demo page - `assets/script.js`: commented, readable source - `assets/style.css`: effect styles - `README.md`: full documentation with examples and framework integration notes - `START-HERE-AI.md`: product-specific copy-paste prompt for AI-assisted setup - `LICENSE.txt`: standard license terms - Lifetime updates: re-download anytime from your library ## Get the Code This is a premium effect. The standard license costs £5 one-time and covers unlimited personal and commercial projects with no attribution required. The only restrictions: no redistribution of the code itself and no competing effect libraries. - [Buy Liquid Morph Gallery](https://gsapvault.com/effects/liquid-morph) - [Effects & Templates Vault (£39 one-time, best value): every current and future effect and template](https://gsapvault.com/effects) ## Judge the Code Quality First These related effects are free with complete source published, written to the same production standard (cleanup functions, reduced-motion support, framework-agnostic): - [Hover Underline](https://gsapvault.com/effects/hover-underline.md): Three material link underlines—an exit-through line, marker sweep, and hand-drawn wave—with coordinated type and active-index responses. - [Image Clip Reveal](https://gsapvault.com/effects/image-clip-reveal.md): A cinematic image reveal where a directional polygon aperture opens as the photograph settles from a restrained Ken Burns scale and its editorial caption lands. - [Parallax Hero](https://gsapvault.com/effects/parallax-hero.md): A pinned hero that separates its background photograph, copy, and foreground card into distinct scroll depths from a single scrubbed ScrollTrigger. --- From [GSAP Vault](https://gsapvault.com): production-ready GSAP animation effects. Full catalog for agents: https://gsapvault.com/llms-full.txt