Anatomy

The component has three stacked regions. At the top, a centered header block with a project badge (Layout icon + project name), a headline and a subtitle fades in on scroll via useInView. Below it sits the comparison container: two absolutely positioned panels inside a relative div. The 'before' panel fills the container fully; the 'after' panel overlays it and is clipped from the left with clip-path. A vertical accent bar at the drag position terminates in a circular GripVertical handle. Each panel lists four elements (header, hero, layout, CTA) with Minus or Plus icons to signal regression vs. improvement. The third region is an optional responsive stats grid that stagger-animates in.

How it works

The trick is a single React state value `sliderPosition` (0–100, initially 50). When the user presses on the handle div, a boolean `isDragging` flips to true. On every mouse/touch move on the container, `handleMove` reads the event clientX, subtracts the container's left edge from getBoundingClientRect, divides by container width and multiplies by 100. That percentage is written straight to state. The 'after' panel receives it as `clipPath: inset(0 0 0 ${sliderPosition}%)` via an inline style, no Framer Motion spring needed here, the update is instant and that keeps the drag feeling physical. The vertical handle div gets `left: ${sliderPosition}%` plus `transform: translateX(-50%)` to stay centered on the boundary.

How to build it in React

1. Set up the container and track drag state

   Create a ref on the comparison container and two state values: a number for the split position and a boolean for dragging. Attach onMouseDown to the handle and onMouseUp/onMouseLeave to the container so the drag stops when the pointer leaves.

   const sliderRef = useRef<HTMLDivElement>(null);
   const [sliderPosition, setSliderPosition] = useState(50);
   const [isDragging, setIsDragging] = useState(false);

2. Convert pointer coordinates to a percentage

   In the move handler, get the container bounds with getBoundingClientRect, clamp the clientX offset between 0 and the container width, then divide to get a 0–100 value. Write it to state inside a useCallback so the reference stays stable across renders.

   const handleMove = useCallback((clientX: number) => {
     if (!sliderRef.current) return;
     const rect = sliderRef.current.getBoundingClientRect();
     const x = Math.max(0, Math.min(clientX - rect.left, rect.width));
     setSliderPosition((x / rect.width) * 100);
   }, []);

3. Clip the 'after' panel with clip-path inset

   Both panels sit absolute with inset:0. The 'before' panel needs no clipping. The 'after' panel gets an inline clipPath that cuts everything left of the slider position. No CSS transition, the update is synchronous with the drag so there is no lag.

   <div style={{
     position: "absolute",
     inset: 0,
     clipPath: `inset(0 0 0 ${sliderPosition}%)`,
   }}>
     {/* after content */}
   </div>

4. Add touch support

   Touch events mirror the mouse events exactly. On the container, add onTouchMove that reads e.touches[0].clientX and passes it to the same handleMove function. Add onTouchEnd that resets isDragging. That covers mobile without any extra library.

   onTouchMove={(e) => handleMove(e.touches[0].clientX)}
   onTouchEnd={() => setIsDragging(false)}

When to use it

Ideal for agency portfolio pages, case studies and product landing pages where you need to prove a transformation, not just claim it. The slider works as a section in the middle of a longer page; it does not replace a hero. Avoid it when the 'before' and 'after' states are too similar visually, the contrast must be obvious to justify the interaction. On very small screens the 400px fixed height can feel cramped; consider reducing it or switching to a simple tabbed toggle below a breakpoint.

Used by

• Stripe, Uses side-by-side and reveal comparisons in its payment UI case studies to show merchant dashboard improvements.
• Figma, Before/after reveal patterns appear in Figma's feature announcement pages to contrast old and new editor experiences.
• Webflow, Comparison sliders feature in Webflow's customer case studies to demonstrate site performance and design uplift.
• Shopify, Merchant success stories use before/after visuals to show storefront transformations, sometimes with interactive sliders.

FAQ