---
title: "Comparison Flow — Framer component · Best of Framer"
description: "$4.00 · Framer component · by Ahmet Loca · Sections. Comparison Flow is a before-versus-after component for landing pages that sell a transformation."
canonical: "https://framer.elliotli.dev/component/comparison-flow"
---

[Home](/)/[Components](/components)/[Sections](/components/category/sections)/Comparison Flow

# Comparison Flow

Before vs after, timed.

[View on Framer](https://framer.com/marketplace/components/comparison-flow/?via=elliot-li)

![Comparison Flow preview image 1](https://framer.elliotli.dev/og/component/comparison-flow/9556090a2806f3f7/1600x1200.jpg)

## Summary

Comparison Flow is a before-versus-after component for landing pages that sell a transformation.

## Description

## 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

## Rank history [How rankings work →](/terms#rankings)

-   All · #1834

## Details

- **Author**: Ahmet Loca
- **Price**: $4.00
- **Published**: 2026-09-14
- **Updated**: 2026-09-30
- **Added**: 2026-09-14
- **Categories**: Sections

## More like this

-   [Sale Bar](/component/sale-bar) — Brandon Grimes · $12 — Auto-start Black Friday promo bar
-   [Show and Tell](/component/show-and-tell) — Majed Monem · $9 — Feature tabs that play themselves
-   [Infinite Picker Whee](/component/infinite-picker-whee) — Karim Saif · Free — Rotating 3D text selector
-   [Resource Preview Dec](/component/resource-preview-dec) — felix strobel · Free — Editorial guides with folding cove