When animation looks good but reads badly
Note

Motion That Looks Good but Reads Badly

There is a category of animation that earns applause on social media and headaches in production. It looks impressive in isolation: elastic bounces, dramatic page transitions, parallax layers sliding in different directions at different speeds. But put it in a real interface where someone is trying to complete a task, and the same motion becomes noise. The user’s attention, instead of being guided, is scattered.

After curating hundreds of visual experiments and watching how people interact with motion-heavy interfaces, a few patterns consistently mark the line between motion that communicates and motion that confuses.

Direction Confusion

Motion direction should reinforce spatial relationships. When a panel slides in from the right, users form a mental model: that panel lives to the right. When they dismiss it and it slides down instead of back to the right, the spatial model breaks. The inconsistency is subtle but creates a feeling of unreliability.

The fix is simple consistency. Elements enter and exit along the same axis. If something expands downward, it collapses upward. If a modal scales up from a button, it should scale back down toward that button when dismissed. This sounds obvious, but it is violated constantly in fancy animation libraries that prioritize visual variety over spatial logic.

Competing Timelines

When multiple elements animate simultaneously with different durations and easing curves, the visual field becomes chaotic. A header sliding down in 300ms while cards fade in over 500ms while a sidebar slides in over 400ms creates a three-ring circus effect. Each animation is fine in isolation. Together, they compete for attention and none of them communicates clearly.

The solution is staggering with a shared rhythm. Start with a base duration (say, 250ms) and offset each element by a small, consistent delay (50ms to 80ms). Use the same easing curve for all elements in a group. This creates a cascade that reads as a single coordinated movement rather than unrelated parallel events.

Intensity Mismatch

An elastic bounce on a toggle switch. A dramatic spring overshoot on a dropdown menu. A rubbery scale effect on a card hover. These effects feel playful in a demo but exhausting in an interface you use 50 times a day.

The intensity of animation should match the significance of the action. A major state change (loading a new page, opening a modal, completing a transaction) can support more dramatic motion. A minor interaction (hovering a link, toggling a control, switching a tab) should be subtle to the point of barely noticeable. The user should feel the feedback without being conscious of the animation.

A practical test: use the interface for 15 minutes doing real tasks. If any animation becomes annoying during that period, it is too intense. Production interfaces are not demos. They are tools people live in.

Speed Perception

Animations that are mathematically identical in duration can feel different based on their easing curve. An ease-in animation (slow start, fast end) feels sluggish because the user waits for visible movement. An ease-out animation (fast start, slow end) feels responsive because visible movement begins immediately.

For UI motion, ease-out or cubic-bezier(0.25, 0, 0.3, 1) is almost always the right default. The element moves quickly into its new position and settles gently. This matches the physics of real-world motion (a ball thrown upward decelerates) and satisfies the user’s expectation that the interface responds immediately.

The exception is exit animations, where ease-in (slow start, fast finish) makes sense because the element accelerates out of view, clearing the stage quickly for whatever comes next.

The Sound Test

Here is a useful mental exercise: imagine the animation makes a sound every time it fires. A gentle swoosh for a smooth slide. A boing for a spring bounce. A whoosh-whoosh-whoosh for a repeating pulse.

Now imagine using the interface for an hour with those sounds playing. If the imagined soundscape would drive you to mute it, the animation is too much. Good interface motion should be like good background music: supporting the experience without demanding attention.

Related Reading

Motion That Looks Good but Reads BadlyGuides Accessibility for Decorative Motion Motion That Looks Good but Reads BadlyCollections Micro-Interactions Motion That Looks Good but Reads BadlyCollections Navigation Motion That Looks Good but Reads BadlyCollections Loaders