Scroll & Drag Before/After Comparison System

What this builds

A full-section scroll-narrative experience where two states of an image, design, data visualization, or content block are revealed through a movable divider. The divider can be driven by scroll position (scrubbed), by pointer drag, or by both in sequence. The section is structured with act-based pacing: an intro beat establishes the "before" state, the comparison beat reveals the split, and an outro beat lands the takeaway.

• Scroll-scrubbed clip-path or translateX split that maps scroll progress to divider position
• Pointer-drag override so users can explore freely after the scroll reveal
• A visible, styled handle on the divider with a grab affordance
• Before/after labels that fade in context
• Responsive: vertical split on mobile (top/bottom instead of left/right)
• prefers-reduced-motion fallback: static side-by-side or toggle button
• Narrative wrapper with intro, comparison, and takeaway beats

When to use / when not to

• Use when comparing two states of visually similar content: photo retouching, design iterations, map overlays, data before/after an event, product transformations.
• Use when the comparison IS the story beat, not a decoration. The scroll distance devoted to it must earn its keep narratively.
• Do NOT use for comparing unrelated images. The technique requires spatial registration between the two states.
• Do NOT use for more than two states. For multi-state comparisons, see scroll-stacked-cards-deck or a tabbed gallery.
• For the underlying scroll-to-progress binding, see primitive gsap-scrolltrigger. For smooth scroll normalization, see lenis-smooth-scroll.