Close the motion gaps first

Anything that appears or swaps animates, or is static on purpose.

From design-motion-principles, audit checklist, Motion Gap Analysis.

Conditional controls

Flip each switch, or flip rapidly to interrupt both.

Snaps, pushes contentBad
Enable notifications
Compact modeOff
{on && <Controls />}
Enters and exitsGood
Enable notifications
Compact modeOff
grid-template-rows 0fr→1fropacity + translateY(8px) + blur
.extra { display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 175ms var(--ease-out); }
.extra[data-open="true"] { grid-template-rows: 1fr; transition-duration: 250ms; }

Tabs swap content

Tap a tab and watch the panel.

Only underline movesBad

Balance

$12,480.00

3 invoices due this week

{tab === "a" ? <A /> : <B />}
Content crossfadesGood

Balance

$12,480.00

3 invoices due this week

  • Paid INV-1042$1,200.00
  • Sent INV-1043$860.00
  • Reminder INV-10392d ago
  • CurrencyUSD
  • Fiscal yearJan–Dec
out 120msin 200ms, +4px
.panel { grid-area: 1 / 1; opacity: 0; transform: translateY(4px);
  transition: opacity 120ms var(--ease-out), transform 120ms var(--ease-out); }
.panel[data-active="true"] { opacity: 1; transform: none; transition-duration: 200ms; }

Loading to content

Type a name or role. Same latency on both sides.

Spinner, then a snapBad
    {loading ? <Spinner /> : <List />}
    Skeleton to contentGood
      skeleton out 150msrows in 250ms, 35ms stagger
      .layer { grid-area: 1 / 1; transition: opacity 150ms var(--ease-out); }
.row { animation: row-in 250ms var(--ease-out) backwards;
  animation-delay: calc(120ms + var(--i) * 35ms); }

      Why it matters, pros and cons

      Why it matters

      A snap gives the eye nothing to follow. Even imperfect motion shows what changed.

      Pros

      • Shows what appeared, left, or moved.
      • Content never vanishes mid-read.
      • Transitions retarget on rapid toggles.

      Cons

      • Height is layout work; keep regions small.
      • Exits need the node mounted and inert.
      • Skip it for first paint and keyboard actions.