# Motion With Intent

Most animation on the web is decoration wearing a costume. The test I use to decide whether a transition earns its milliseconds.

Author: Konstantinos Papadopoulos (https://knspap.com)
Published: 2026-02-11
Reading time: 2 min (437 words)
Tags: Interface, Motion
Canonical URL: https://knspap.com/essays/motion-with-intent

---

I like animated interfaces and I am increasingly suspicious of them. Somewhere between the CSS transition and the scroll-linked timeline, motion stopped being a way of explaining state and became a way of signalling effort.

The test I apply is a single question: **if I removed this transition, would the user lose information?**

## Transitions that pass

A modal scaling up from the button that opened it tells you where you are and how to get back. A list item sliding into the position a deleted row vacated tells you the deletion was real and which row it was. A cluster on a map expanding outward tells you those points were always there, grouped.

In each case the animation is carrying an idea — *this came from there*, *this became that* — that the static frames on either side cannot express.

## Transitions that fail

Everything that fades in because it is below the fold.

I say that as someone who used a scroll reveal on the page you are reading. It is defensible only at the scale of a section: it paces the reading, and it hides the fact that a long page's content is not all equally important. Applied to every card in a grid, staggered by eighty milliseconds, it stops being pacing and becomes a queue you are made to wait in.

## The two rules I keep

**Duration follows distance.** A dropdown travelling twelve pixels wants 150ms. A full-page transition travelling the height of the viewport wants 700ms. Using one duration for both makes the small thing sluggish and the large thing violent.

**Easing follows agency.** Anything the user initiated should start immediately and decelerate into place — `cubic-bezier(0.16, 1, 0.3, 1)` is the curve I reach for, because it moves most of the distance in the first third and the interface feels like it was already waiting for the click. Anything the system initiated, with no click behind it, can afford to ease in as well as out; it has not made a promise to anyone.

## And then turn it all off

```css
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}
```

This blunt instrument only works if every animation's *rest* state is the correct one — if elements animate from `opacity: 0`, that reset leaves a blank page. The discipline is to author reveals so that the finished state is what renders by default, and the motion is what gets added for people who want it.

Which is, conveniently, also the right way to build them for anyone whose JavaScript never arrives.