Anatomy

The section has a centered header (title + description) above a constrained 800px canvas. Inside that canvas: an image area with a fixed 3:2 aspect ratio and rounded corners, a state badge pinned top-left showing 'Before' or 'After', a control row below (prev/next arrows, pair counter, label, toggle button) and a dot indicator strip at the bottom. The active dot stretches from 8px to 24px wide to signal the current position without color alone.

How it works

The transition between before and after is driven by AnimatePresence mode='wait' wrapping a motion.div keyed on `${pair.id}-${showAfter ? 'after' : 'before'}`. When the key changes, the exiting frame fades out first (opacity 0, duration 0.4s), then the entering frame fades in. A custom easing array [0.16, 1, 0.3, 1] gives both fades a fast start and a gentle tail. Navigating to a new pair calls setShowAfter(false) synchronously so the key flip and the state flip produce a single, clean crossfade rather than two consecutive ones.

How to build it in React

1. Model each pair as a typed interface

   Define a Pair interface with an id, a label and optional beforeImage/afterImage URLs plus beforeColor/afterColor fallbacks. Pass the array as a prop so the component stays purely presentational.

   interface Pair {
     id: string;
     label: string;
     beforeImage?: string;
     afterImage?: string;
     beforeColor?: string;
     afterColor?: string;
   }

2. Derive the background from current state

   Inside the motion.div, pick the background at render time: if showAfter is true and afterImage is set, use a CSS url() background-image; fall back to afterColor, then to the accent token. The same logic applies to the before side with beforeImage and beforeColor.

   background: showAfter
     ? (pair.afterImage ? `url(${pair.afterImage}) center/cover` : pair.afterColor ?? "var(--color-accent)")
     : (pair.beforeImage ? `url(${pair.beforeImage}) center/cover` : pair.beforeColor ?? "var(--color-background-alt)"),

3. Key AnimatePresence for clean crossfades

   Wrap the motion.div in AnimatePresence mode='wait'. Use a compound key that combines the pair id and the current view so any state change, navigation or toggle, produces a fresh mount/unmount cycle rather than an interrupted animation.

   <AnimatePresence mode="wait">
     <motion.div
       key={`${pair.id}-${showAfter ? "after" : "before"}`}
       initial={{ opacity: 0 }}
       animate={{ opacity: 1 }}
       exit={{ opacity: 0 }}
       transition={{ duration: 0.4, ease: [0.16, 1, 0.3, 1] }}
     />
   </AnimatePresence>

4. Reset state on navigation

   In both prev and next handlers, call setShowAfter(false) alongside the index update. This guarantees the new pair always opens on its before view, which makes the reveal pattern feel intentional rather than random.

   const prev = () => {
     setCurrent((c) => (c - 1 + pairs.length) % pairs.length);
     setShowAfter(false);
   };

When to use it

Reach for this carousel on landing pages where you have two or more transformation cases to show, beauty treatments, renovation work, design before/after, photo editing portfolios. It works best with four to eight pairs; fewer pairs feel sparse, and beyond eight the dot strip grows unwieldy. Avoid it when you need both states visible at the same time (use a slider-based split view instead), or when all your pairs are text-only and there is nothing visual to reveal.

Used by

• Squarespace, Uses before/after carousels in its template gallery to show site design transformations.
• Lightroom (Adobe), Showcases photo editing results with before/after toggles across marketing and onboarding pages.
• Houzz, Displays home renovation pairs in a sequential before/after browse pattern throughout project galleries.

FAQ