A clip-path animated by scroll wipes one full-bleed scene away to reveal the one behind. Diagonal sweep, circle iris, or horizontal blinds — pick the shape.
Two full-bleed scenes are stacked; the front one has a clip-path that gets smaller as you scroll, revealing the back scene through the shrinking shape. Different clip-path shapes give different reveal personalities — a diagonal sweep feels cinematic, a circle from center feels like a portal, horizontal bars feels like Venetian blinds. Used by motion-design portfolios, fashion sites, and product launches where the reveal is the moment.
Two layers: .mw-back (the revealed content, always fully rendered) and .mw-front (the cover) stacked at inset: 0. The front layer's clip-path is parameterized by the scroll-driven --p custom property. For a diagonal wipe: polygon(0% 0%, 100% 0%, 100% calc((1 - --p) × 100%), 0% 100%) — at --p:0 the polygon covers everything; at --p:1 it shrinks to zero. Optional: animate a glowing thin line along the wipe boundary using a separate absolutely-positioned strip with a blurred gradient.
Scroll inside. Pick a wipe shape in the top-left. The dark cover wipes away to reveal the warm sunset scene.
You just hadn't moved the cover yet.
A diagonal polygon clip-path shrinks as you scroll.
Build a scroll-driven mask-wipe reveal between two full-bleed scenes. Sticky pin (top:0 height:100vh overflow:hidden) inside a 2400px-tall section. Inside the pin layer two full-bleed scene divs: BACK (the revealed content — warm sunset gradient + display headline with italic accent) at inset:0, and FRONT (the cover — dark gradient + its own headline) also at inset:0. The front has a clip-path that's driven by a CSS custom property --p (0→1 as user scrolls): for the DIAGONAL variant clip-path:polygon(0% 0%, calc(100% + 100px) 0%, calc(100% + 100px) calc((1 - var(--p)) * 100%), calc(-100px - (1 - var(--p)) * 200px) 100%, 0% 100%) — covers everything at --p:0, shrinks to zero at --p:1. Add a thin glowing accent-colored bar along the wipe edge (separate absolutely-positioned blurred gradient strip). Provide 3 toggle buttons in the corner to switch the wipe SHAPE via a data-shape attribute on the pin: "diagonal" (above), "circle" (clip-path:circle(calc((1 - --p) * 90%) at 50% 50%)), and "bars" (vertical Venetian — clip-path:polygon with top/bottom inset). Use peak-at-middle easing so the cover wipes away, holds open, then wipes back. Show "Wipe progress: NN%" readout.