Functional Motion: Animation That Does a Job

UI/UX

At Identiti I keep coming back to one rule when a build starts sprouting animation. Motion has to earn its place. If a movement is not doing a job, it is noise, and noise costs you the same way clutter does. Motion is fun to add, so it gets added for its own sake, and the result feels busy without feeling better. The best motion is felt, not noticed.

The Jobs Motion Actually Does

Start by asking what a movement is for, because functional motion always has an answer. It shows cause and effect, so a panel that grows from the thing you tapped links the two without a caption. It guides attention to a new item or a changed value before you hunt for it. It communicates state and progress, so a spinner or a filling bar tells you the system is working and roughly how long you will wait. It eases spatial transitions, moving a card from a list into a detail view so you keep your bearings. And it gives feedback, a button that dips under your finger, confirming the machine heard you.

Every one of those is a job, and each reduces a small uncertainty the user would otherwise carry. This is the same principle behind designing quieter interfaces: the interface should answer questions before they are asked, and motion is one of the quietest ways to do it.

Functional Versus Decorative

The test I use is blunt. Remove the animation. If the interface is now harder to understand or less reassuring, the motion was functional. If nothing is lost except a bit of flair, it was decorative, and decoration is the first thing I cut. A logo that spins on load, text that flies in letter by letter, a hover that bounces three times before settling, none of these help anyone. They just make people wait.

Decoration is not always wrong, but it should be rare, cheap, and never sitting between a user and their goal. A splash you see once is a different thing from a transition you sit through fifty times a day. Polish that people notice has started to cost more than it returns, and it works against the aesthetic usability effect you were hoping to bank.

Timing, Easing And The Feel

Get the timing right and most of the battle is won. Interface motion should be fast, roughly 150 to 300 milliseconds for everyday things, quick enough that nobody feels they are waiting on it. This is where the Doherty threshold matters, because a response that lags past a few hundred milliseconds breaks the feel of a conversation.

Easing is the other half. Nothing in the physical world starts and stops at a constant speed, so linear motion feels robotic. Use easing that starts a touch slow, speeds up, and settles, which mimics how real objects move. That is a big part of why good motion feels effortless and lowers rather than adds to the mental effort of using a product.

Accessibility, Performance And A Checklist

Respect people who ask for less. The prefers-reduced-motion setting is a real request from real users, some of whom feel genuinely unwell from large movement, so honour it by replacing big transitions with simple fades or none at all. On performance, animate the cheap properties, transform and opacity, and leave layout alone, because animating width or top forces the browser to recalculate and you get jank, which is worse than no motion.

A concrete example. On a recent build the client wanted a product card that flipped, spun, and glowed on tap. We shipped one movement instead. The card grows from where you tapped into the full detail view over about 220 milliseconds, then shrinks back into its spot when you close it. That single transition shows cause and effect, eases the spatial jump, and keeps people oriented. Nobody has mentioned it, which is the point.

Here is the short checklist I run before shipping any motion. Name the job it does, and cut it if you cannot. Keep it fast, under about 300 milliseconds. Use natural easing, never linear. Animate only transform and opacity. Provide a reduced-motion path. Then watch a real person use it, and if they notice the motion at all, ask whether it helps or just shows off.