Scroll down — the clip-path wipe follows your scroll position, revealing the design layer beneath.
0% revealed
Scroll-linked clip-path: inset(0 X% 0 0)
How it works
The wipe stage uses two absolutely positioned layers. The top layer starts with clip-path: inset(0 100% 0 0) — fully hidden from the right. As scroll progress increases, the right inset shrinks toward inset(0 0% 0 0), revealing the design layer.
An easeOutQuad function softens the motion so the transition decelerates as it approaches full reveal, matching the feel of a natural swipe gesture.
The divider line and handle icon track the same percentage, creating a satisfying visual link between your scroll position and the reveal edge.