Animated comparison tables that convert (pricing & feature grids)

The comparison table is the highest-stakes piece of typography on most SaaS pages. It is also the most-ignored by motion design. Most pricing pages ship a static three-column table and call it done — and lose conversions because the table reads like a spreadsheet instead of a recommendation.

A bit of motion, applied carefully, fixes this. Not "make the table dance" — make the table draw the eye to the right column, reward the scroll, and make the differences between plans feel like a story instead of a grid.

What "animated" should mean here

Three jobs, no more:

1. Reveal in cascade when the table scrolls into view. Each row appears 80ms after the one above it.
2. Highlight the recommended column with a subtle pulse on the price.
3. Animate the checkmarks drawing themselves on first paint — a fast, decisive stroke.

Anything beyond that — color-shifting rows, sliding tooltips, parallaxing prices — undermines the table's job, which is to be readable.

The cascade reveal

A staggered fade-in down the rows. Each row uses the same animation; the animation-delay is what differs.

The animation runs once on mount. Don't loop it. A pricing table that keeps redrawing itself feels like a slot machine.

The highlighted column

The "recommended" column gets three signals:

1. A subtle tint behind the cells (5% accent color).
2. A "POPULAR" pill above the column header.
3. The price in the accent color, slightly larger.

Combined, the eye lands on that column first, every time. Without them, viewers default to the cheapest column, which is not what you want.

The checkmark animation

For feature-grid rows, a check or X per cell. Animate the checks drawing on entry:

<svg viewBox="0 0 14 14" class="check">
  <path d="M3 7 L6 10 L11 4" stroke="currentColor" stroke-width="2"
        fill="none" stroke-linecap="round" stroke-linejoin="round"
        stroke-dasharray="14" stroke-dashoffset="14">
    <animate attributeName="stroke-dashoffset" from="14" to="0"
             dur="0.3s" begin="0.4s" fill="freeze"/>
  </path>
</svg>

Set the begin per row so the checks draw in cascade with the row reveals. Three details that matter:

• stroke-linecap: round — sharp ends read as broken pixels at small sizes.
• begin delay aligned to row delay + 100ms — the row settles, then the checks draw.
• No animation on the X mark — only the positive answer animates. The X is just present.

The mobile concession

Comparison tables fail on mobile. Three rescue patterns, in increasing complexity:

• Horizontal scroll with the first column pinned. Works for tables under five plans.
• Column-per-card stacked vertically. Each plan becomes its own card.
• Toggle between plans with a segmented control above a single column view.

For pricing pages, pattern 2 (stacked cards) converts best in our testing. The user scrolls top-down, sees one plan at a time, and the comparison happens in working memory.

Rendering to MP4 (for ads)

A pricing-table video is one of the highest-ROI social ads for SaaS. Render the cascade reveal at 1080×1920 (Reels), 1080×1080 (in-feed), and 1920×1080 (YouTube pre-roll) from the same template.

Loop the reveal every 4 seconds with a 1-second hold at the end. The viewer should see the full table at rest for at least one full second before the loop restarts.

What not to animate

A long list. Don't:

• Animate the feature labels (left column). They are the lookup column; they should be stable.
• Add hover animations on individual cells. Cells aren't actionable.
• Animate "Buy" buttons separately. They are part of the table; treat them as cells.
• Add scroll-tied parallax to anything in the table. Tables are not heroes.

A comparison table is functional typography. Motion supports the function, never decorates it.

Open the playground, drop in your pricing tiers, render the ad cuts.