Scroll Before After — Free GSAP Image Wipe Snippet

The scroll before/after is an image-comparison slider with the drag handle removed: the page's own scrollbar sweeps the divider. As you scroll through the pinned section, the "after" scene wipes across the "before" scene from left to right, and scrolling back restores it. It's a strong pattern for redesigns, photo edits, and renovation reveals because the user controls the reveal speed with a gesture they were already making. This snippet builds it with GSAP ScrollTrigger (from a CDN) and a two-layer clipping trick.

The wipe is a widening window, not a moving image

Both scenes are absolutely stacked in the frame. The .sba-after layer starts at width: 0% with overflow: hidden, while its inner .sba-scene is locked to the full frame width. Widening the outer layer therefore *uncovers* more of a stationary scene rather than stretching it — the classic comparison-slider clipping trick. Without the fixed-width inner element, the after image would squish horizontally as the window grew, which is the number-one bug in naive implementations.

One proxy tween drives both the window and the divider

GSAP tweens a plain { p: 0 } object to 100 on a pinned, scrubbed ScrollTrigger. The onUpdate callback writes the same percentage to two places: the after layer's width and the divider's left. Sharing one number guarantees the glowing seam always sits exactly on the reveal edge — there's no second animation that could drift out of phase.

Pinned scrub makes the reveal deliberate and reversible

start: 'top top' with end: '+=160%' pins the frame for 1.6 viewport-heights of scrolling, mapping the full 0–100% wipe onto that distance. scrub: 0.3 adds just enough smoothing that wheel ticks glide rather than jump. Because scrub ties progress to scroll position rather than playing a one-shot animation, the comparison is bidirectional — users naturally rock back and forth across the seam to compare details, which is exactly how people use drag-handle sliders.

The scenes are pure CSS, ready to swap for images

Each scene is a sky gradient, a rounded hill, and a sun — deliberately simple placeholders that make the wipe legible in the demo. In production you'd replace each .sba-scene with an <img> (or background-image) at the same fixed width; the clipping math is identical. Matching camera position between the two shots is what sells the effect.

Why width instead of clip-path

Animating clip-path: inset() also works, but a width-based window keeps the divider trivial to position (same percentage) and works in every browser that runs GSAP, including ones with patchy clip-path transition support. The layers are compositor-friendly because nothing outside the frame reflows — the frame's size never changes.

Labels stay anchored to their own layers

The "Before" tag lives on the base layer's left corner and "After" pins to the right corner *inside* the clipped layer, so it only becomes visible once enough of the after scene is revealed — a free bit of progressive labeling that reinforces which side is which.

Scroll-driven beats drag-driven on touch screens

Classic comparison sliders bind a horizontal drag to the divider — which collides head-on with vertical page scrolling on touch devices: the browser has to guess whether a diagonal swipe means "scroll the page" or "move the handle," and either choice frustrates someone. Driving the wipe from vertical scroll removes the entire input layer: no pointer handlers, no touch-action negotiations, no clamping math, and the one gesture mobile users already perform controls the comparison. The handle in this snippet is purely decorative — a landmark for the seam, not a control — which is also why it needs no hit area or focus handling.

Customizing it

Swap in real screenshots or photos, flip the wipe direction by anchoring the after layer to the right, or shorten end for a snappier reveal. For a drag-controlled version see the image comparison snippet; pair this one with a scroll zoom hero opener or a scroll curtain reveal transition into the next section.