Anatomy

The outer section holds a centered header block (badge, h2, subtitle) followed by a three-column grid. The grid uses the template `1fr auto 1fr` so the arrow column only takes exactly the space it needs. Each SideCard is an independent motion.div with a rounded border, an optional image in a 3:2 aspect-ratio container at the top, and a list of label/value pairs separated by thin horizontal rules. The 'after' card gets a colored accent border and an accent-colored heading to draw the eye.

How it works

Three Framer Motion `whileInView` animations drive the reveal. The header fades up with no delay. The 'before' card fades up 100ms later. The 'after' card follows at 200ms. The arrow between them uses a separate scale animation starting from 0, delayed to 300ms, so it appears after both cards have already started entering, reinforcing the left-to-right narrative. All animations use `viewport={{ once: true }}` so replaying a scroll does not re-trigger them.

How to build it in React

1. Define the data shape

   Create a `ComparisonSide` interface with a label, an optional image URL, and an array of `{ label, value }` points. Pass `before` and `after` as optional props so the section degrades gracefully if one side is missing.

   interface ComparisonSide {
     label: string;
     image?: string;
     points: { label: string; value: string }[];
   }

2. Build the SideCard sub-component

   Wrap the card in a `motion.div` with `initial={{ opacity: 0, y: 30 }}` and `whileInView={{ opacity: 1, y: 0 }}`. Accept a `delay` and an `accent` boolean. When `accent` is true, switch the border and heading color to the accent token, this distinguishes the 'after' state without any extra class.

   <motion.div
     initial={{ opacity: 0, y: 30 }}
     whileInView={{ opacity: 1, y: 0 }}
     viewport={{ once: true }}
     transition={{ delay, duration: 0.5 }}
     style={{
       borderColor: accent
         ? "var(--color-accent)"
         : "var(--color-border)",
     }}
   >

3. Set up the three-column grid with the arrow

   Use `grid-cols-[1fr_auto_1fr]` on large screens (single column on mobile). Between the two cards, render a `motion.div` that animates from `scale: 0` to `scale: 1` at 300ms delay. Fill a 48x48 circle with the accent background and place the ArrowRight icon inside.

   <div className="grid grid-cols-1 lg:grid-cols-[1fr_auto_1fr] gap-6 items-center">
     <SideCard side={before} delay={0.1} accent={false} />
     <motion.div
       initial={{ opacity: 0, scale: 0 }}
       whileInView={{ opacity: 1, scale: 1 }}
       viewport={{ once: true }}
       transition={{ delay: 0.3, duration: 0.4 }}
     >
       <div className="flex h-12 w-12 items-center justify-center rounded-full"
         style={{ backgroundColor: "var(--color-accent)" }}>
         <ArrowRight style={{ color: "var(--color-background)" }} />
       </div>
     </motion.div>
     <SideCard side={after} delay={0.2} accent={true} />
   </div>

4. Wire up the header and pass real data

   Add a centered header above the grid: a badge span, an h2, and a subtitle paragraph, each conditionally rendered. Animate the whole block as one `motion.div` at delay 0. Then pass your actual before/after data, three to five points per side work best for readability.

When to use it

Reach for this section on SaaS landing pages, agency portfolio pages, or any product story where you can quantify the transformation with concrete metrics. It works best mid-page, after the hero, when the user has enough context to appreciate what the numbers mean. Avoid it when the difference between before and after cannot be expressed as short label/value pairs, a timeline or prose narrative serves that case better. Do not pair two of these back-to-back on the same page.

Used by

• Notion, Uses side-by-side metric cards on its 'for teams' pages to show productivity gains before and after adoption.
• Linear, Employs a structured before/after layout in case studies to contrast old workflows with Linear-powered ones.
• Stripe, Uses comparison layouts in its Payments and Billing product pages to show legacy checkout friction versus Stripe's flow.
• Webflow, Presents before/after developer-vs-designer workflow comparisons to position its no-code builder against hand-coded sites.

FAQ