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.
About This Effect
A scroll-scrubbed liquid that fills a frame behind your own markup, with a surface that behaves like water rather than a moving line. Fill height follows scroll position. The wave on top follows scroll speed, so a slow read keeps the surface level while a hard flick tilts the whole body against the walls and sends it rolling back.
Read the full effect overview
Everything below the waterline switches to the submerged colour scheme and shears with the surface tilt, which is what sells the fluid as something the page is sitting in rather than a shape drawn over it. The boundary is a live clip-path built from the same samples the fluid is drawn from, so the colour changes exactly at the wave.
Your content stays real DOM throughout. Headings, links and buttons are yours to write and style; the effect copies them into an inert layer instead of redrawing them on canvas.
What's Included
- Height-field water surface: 48 coupled spring columns trade height with their neighbours each frame, so an impulse at the wall travels across the tank and reflects
- Scroll position drives the fill and scroll speed drives the wave, so one gesture produces two separate readings
- Live clip-path polygon built from the same samples as the drawn fluid, which puts the colour boundary on the wave itself rather than near it
- Refraction on the submerged layer: a capped sideways shift and shear taken from the surface tilt, measured in pixels so tall containers do not over-shear
- Meniscus highlight rides the surface, and crests throw spray once the scroll is fast enough, on fine pointers only
- Your markup stays real DOM. The submerged copy is inert and aria-hidden, so nothing is duplicated for assistive tech or the tab order
- Damped settle into a slow idle ripple that never fully flattens, in place of a linear snap back
- Coarse pointers get the same scroll-driven fill on a lighter 24 column surface with spray switched off
Perfect For
- Swim, surf and watersport landing pages that need the water to actually do something
- Drinks, brewing and bottling brands where the liquid is the product
- Charity and campaign heroes about water, flooding or sea level
- Spa, pool and wellness sites where the hero should feel like immersion
- Agency and studio statement panels built around one memorable scroll moment
How It Works
One pinned, scrubbed ScrollTrigger drives a proxy value from 0 to 1 across roughly 1.8 viewport heights. That value sets the fill level directly, and its rate of change is read on GSAP's ticker as the impulse fed into the surface, which means the response already carries the scrub smoothing and behaves the same with or without Lenis.
The surface is an array of columns, each a damped spring pulled toward the rest level. A fixed 1/60s step integrates the springs, then two passes trade a fraction of each column's height with its neighbours, which is what turns an impulse into a travelling wave that reflects off the walls and interferes with itself. Scroll speed pushes one wall up and the other down, and a pair of off-centre kicks stops the two halves mirroring each other.
The fluid body, its meniscus and any spray are drawn on a canvas sized to the container with devicePixelRatio handling and re-measured on every ScrollTrigger refresh. The same column samples become a clip-path polygon on a cloned, inert copy of your content, so the submerged scheme starts precisely at the wave. gsap.set applies the refraction shift and shear to the copy's child rather than the clipped wrapper, which keeps the shear from dragging the waterline sideways with it.
gsap.matchMedia runs a lighter surface on coarse pointers and a designed still under reduced motion, with no ticker and no pin. The ticker callback, both ScrollTriggers, the resize listener and the two injected layers are all removed in cleanup.