Keep data still

Charts, tables and figures people read hold still.

Emil KowalskiYou Don't Need Animations
Before you start animating, ask yourself: what's the purpose of this animation?
emilkowal.skiRead article ↗
Emil KowalskiYou Don't Need Animations
I just want to do my work with no unnecessary friction.
emilkowal.skiRead article ↗

From find-animation-opportunities, gate 4 (Function).

Read a value off the chart

Press New question, type that month's balance, press Enter.

Line redrawsBad
0.00s
Data swaps in placeGood
0.00s
function update(series) {
  line.setAttribute("d", toPath(series));
  series.forEach((v, i) => {
    dots[i].setAttribute("cy", y(v));
    labels[i].textContent = v.toFixed(1);
  });
}

Same card, two contexts

Hover both cards, press Copy, then switch context.

Tilt + glow on pointerFine here

Your money, in one place.

Checking ••4821 $12,480.36 Available
  • Blue Bottle−$6.50
  • Payroll+$4,210.00
0px moved
Still cardFine

Your money, in one place.

Checking ••4821 $12,480.36 Available
  • Blue Bottle−$6.50
  • Payroll+$4,210.00
0px moved
.is-marketing .card {
  transform: perspective(700px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform 200ms var(--ease-out);
}
.is-app .card { transform: none; }

Find the top row after sorting

Sort a column, then click the top row fast.

Rows fly into placeBad
Transactions, animated sort
transform 400ms ease-in-out
Rows swap instantlyGood
Transactions, instant sort
no transition
function sortBy(key, dir) {
  rows.sort((a, b) => compare(a[key], b[key]) * dir);
  tbody.replaceChildren(...rows.map((r) => r.el));
  header.setAttribute("aria-sort", dir > 0 ? "ascending" : "descending");
}

Why it matters, pros and cons

Why it matters

A dashboard has a task: read, compare, click. Moving data makes people misaim.

Pros

  • Values readable the frame they arrive.
  • No misclicks on rows in flight.
  • Eyes stay on the cell they read.

Cons

  • Instant swaps can hide what changed; flash a color.
  • A newly added row may enter under 200ms.
  • Marketing and onboarding can still decorate.