Animation Should Help People Understand Where They Are

I have always been slightly cautious about animation on websites.

Not because animation is bad, but because it is often added for the wrong reason. A page feels flat, so something moves. A section needs attention, so it slides in. A transition is added because it looks impressive during a demonstration. The problem is that movement has a cost. It uses attention, processing time and sometimes patience.

This year I have been more interested in a different use of animation. Not movement as decoration, but movement as a way of helping someone understand what changed. That is where page and view transitions become useful, particularly when an interface changes state and the visitor needs to maintain their sense of place.

Starting With The Orientation Problem

The best reason to animate an interface is usually orientation. If someone opens a panel, filters a listing or moves between related views, animation can help connect the before and after states. Without that connection, the interface can feel abrupt. The visitor clicks, the page changes and they have to reorient themselves.

That does not mean every state change needs movement. Sometimes an instant change is clearer. The question I try to ask is whether the animation explains the relationship between two states. If it does, it may be worth using. If it only makes the interface feel more theatrical, I usually question it.

The newer browser work around view transitions is interesting because it gives developers a cleaner way to create those relationships. It reduces some of the awkward code that used to sit around animated state changes, especially in interfaces where the DOM changes between views.

The Smallest Useful Transition

My preference is to start small. A transition should usually be subtle enough that the visitor understands it without being distracted by it. A card expanding into a detail view, an image carrying through between states or a filtered list changing without a sudden jump can all make the interface feel calmer.

if (document.startViewTransition) {
  document.startViewTransition(() => {
    updateInterfaceState();
  });
} else {
  updateInterfaceState();
}

The fallback matters. I do not want the interface to depend on the transition in order to work. The transition should improve the experience where the browser supports it, but the underlying state change should remain understandable without it.

Respecting Reduced Motion

Any conversation about motion needs to include reduced motion preferences. Some visitors do not want or cannot comfortably use animated interfaces. That should not be treated as an edge case. If the animation is useful, there should still be a calmer way to present the same change.

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

I would not treat that exact block as a full strategy for every project, but the principle is important. Motion should be optional where possible, and the interface should not lose meaning when the movement is reduced.

Performance Still Matters

A beautiful transition that makes the page feel slower is not a good trade. Animation needs to be tested on real devices, especially if the website already carries a lot of JavaScript or media. The visitor should not feel the browser struggling to perform the effect.

This is why I prefer animation that works with the browser rather than against it. Simple transitions, careful use of opacity and transforms, and avoiding unnecessary layout work all help. The technical detail matters because the visitor experiences the result as either smooth and helpful or sluggish and annoying.

Retrospective Thoughts

I think the most useful way to approach animation is to ask what problem it solves. Does it show continuity? Does it reduce disorientation? Does it make a change easier to follow? If the answer is yes, the motion has a reason to exist.

If the answer is only that it looks good, I am more cautious. Websites are used, not watched. Animation should help people understand where they are and what just happened. When it does that quietly, it earns its place.