Don't fade in everything

Animate the few elements that matter; text and nav appear at once.

From design-motion-principles, anti-checklist.

Same page, two entrances

Press Reload both and try to read each headline.

Everything fades upSlop
text readable: 0 ms
Only the chart movesIntentional
text readable: 0 ms

<h1>Close the month in two days</h1>
<p>Reconcile, review and report from one ledger.</p>

<motion.figure
  initial={{ opacity: 0, y: 8, filter: "blur(4px)" }}
  animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
  transition={{ duration: 0.3, ease: [0.23, 1, 0.32, 1] }}
/>

Scroll the article

Scroll either pane quickly.

whileInView everywhereSlop
waits: 0
Prose renders onceGood
waits: 0
// Before: every block announces itself
<motion.p initial={{ opacity: 0, y: 16 }} whileInView={{ opacity: 1, y: 0 }} />

// After: prose is content, not an event
<p>…</p>

Count the enters

Pick what animates on mount.

Animate on mount
Preview
grep -rnE "fadeInUp|whileInView|initial=\{\{ ?opacity: ?0" src | wc -l
grep -rn "filter: .blur(4px)" src | wc -l

Why it matters, pros and cons

Why it matters

Motion marks what's new. On every block it marks nothing and makes readers wait.

Pros

  • Text is readable on first paint.
  • The one moving element keeps attention.
  • Fast scrolling never lands on blank space.

Cons

  • Heroes, modals, toasts and new rows earn entrances.
  • Up to three shared enters reads as polish.
  • No motion can feel flat; add one strong moment.