Back to case studies
Case studyContent FactoryPulse Fitness App

Framer Motion Marketing Site Rebuild — Motion Without the Bloat

Scroll-linked storytelling that stayed performant: shared animation primitives and lazy sections kept CLS flat.

Project overview

Problem

Agency comps looked great in Figma but broke in implementation—animations fought layout and hurt mobile scores.

Solution

Framer Motion variants tied to reduced-motion preferences; intersection observers gated heavy scenes; above-the-fold stayed CSS-only.

Key metrics

0.04
CLS (field)
42%
Scroll depth lift
3
Shared motion variants
2wk
Design–dev handoff

System architecture

Section-level code splitting; LQIP placeholders for hero art; skeleton states matching final typography to prevent jumps.

Workflow

  • Motion audit

    Storyboard vs performance budget before writing components.

  • Prototype

    Interactive staging branch with synthetic throttling toggles.

  • Harden

    E2E visual checks on key breakpoints—not only desktop happy path.

  • Ship

    Progressive enhancement: core story works without JS.

Results & impact

Marketing finally had a flagship page that felt premium on phones—the motion supported the narrative instead of stealing it.

Deeper dive

Deeper dive

Reduced-motion paths were first-class: variant sets duplicated key frames at lower amplitude instead of disabling delight entirely.