Liquid Swipe Page Transition — Free HTML CSS JS Snippet

A plain slide or fade between two screens is the default transition every framework gives you for free, which is exactly why it reads as generic. The "liquid swipe" pattern popularized by mobile onboarding flows replaces that flat wipe with an organic, blob-shaped edge that bulges and settles as it sweeps across the screen — a genuinely more advanced technique that most developers recognize on sight but don't know how to actually build. This snippet implements it with a real animated SVG <path>, not a video or a third-party animation library.

Why a straight clip-path wipe looks cheap, and what a blob path fixes

A basic wipe transition animates a straight-edged clip-path: polygon(...) or a rectangular <path> sweeping left to right — functional, but visually flat, because a perfectly straight line has zero organic quality; it reads as mechanical. The liquid swipe technique instead defines the wiping shape as an SVG path built from Bezier curve commands (C — cubic bezier) whose control points bulge outward and inward as the path animates across several keyframes, so the boundary between the two panels is always a wavy, asymmetric curve rather than a hard vertical or diagonal line. It's the same visual family as a lava-lamp blob or a liquid pour, which is where the name comes from.

How the path data is constructed

The covering shape lives in a single SVG <path id="blob-path"> positioned absolutely over both panels, sized to a fixed 300x600 viewBox matching the demo's phone-frame dimensions. Its d attribute starts as a zero-width sliver pinned to the left edge (M0,0 L0,0 L0,600 L0,600 Z — a path with no visible area) and is swapped, frame by frame via setAttribute('d', ...), through a small hand-authored sequence of path strings that each describe the *same* four-point shape (top-left, a curved right edge built from two C cubic-bezier segments meeting at a mid-height control point, bottom-left, and back to start) but at progressively wider extents and with the bezier control points offset by different amounts on each frame. Because the middle two C control points aren't perfectly aligned with the frame's leading edge, the curve bulges rightward more in the vertical center than at the top and bottom corners on the way through — that offset, changing frame to frame, is what produces the "liquid" wobble rather than a shape that just grows uniformly like a rectangle.

Why plain JS frame-swapping instead of native SVG/CSS animation

Native SVG <animate> or CSS @keyframes can interpolate simple properties, but interpolating between two arbitrary d path strings with a *different number or shape of control points* isn't something the browser does automatically — path morphing between dissimilar path data requires either a matched-point-count path interpolation library, or (the approach used here) hand-authoring a short sequence of intermediate path strings that already share the same command structure, and stepping through them on a plain setTimeout loop. playFrames() walks an array of five path strings, applying each to the d attribute roughly every 90ms, which reads as a smooth, five-beat morph despite involving zero interpolation math — the illusion of fluid motion comes entirely from choosing path shapes that visually flow into one another when swapped in quick succession.

Layering the covered panel underneath the blob

The destination panel (.panel-b) starts with its own inert clip-path: polygon(0 0, 0 0, 0 100%, 0 100%), collapsing it to nothing so it's invisible before the transition starts, avoiding any flash-of-unclipped-content. When "Next" is clicked, the panel's own clip-path is set to none exactly as the blob path animation starts sweeping across — so the user perceives the blob's wobbling edge "revealing" panel B as it advances, while the blob's fill color matches panel B's background, blending the wipe seamlessly into the destination screen the instant it fully covers the frame.

Reversing the transition

The "Back" button plays a mirrored FRAMES_BACKWARD sequence — the same technique with control points and start position flipped to the right edge — and on completion resets panel-b's clip-path back to its collapsed state and the blob path back to its zero-width sliver, so the component returns to a clean, transition-ready initial state.