Comparison Flow

About Comparison Flow

Comparison Flow is a before-versus-after component for landing pages that sell a transformation. The left column walks a slow manual process step by step. The right column runs a shorter automated path and finishes first. When both runs complete, a result badge such as “240× faster” fades in, then the loop resets.

Animated before and after columns

Red manual path, green automated path

Per-step icons, checks, and connector fill

Result badge with hold and reset timing

Hero and Classic design languages

Auto, side-by-side, or stacked layout

Centered title and description

Works on the canvas with no extra setup

Use Cases

SaaS automation and workflow pages

Agency service comparison blocks

Product “old way vs new way” heroes

Ops and productivity landing pages

AI tool before-and-after stories

Onboarding and time-saved sections

Internal tooling marketing sites

Freelance and studio pitch decks

Course and bootcamp outcome pages

Changelog and launch announcement pages

Keywords

framer comparison component, before vs after framer, old way vs new way, automation comparison, manual vs automated, timed step comparison, product transformation section, saas before after, hero comparison layout, classic comparison theme