Motion should explain the interface
Designing movement with a purpose: continuity, feedback, and a genuinely considered reduced-motion experience.
An animation can make a small interaction feel deliberate. It can also delay a task, obscure a change, or make someone physically uncomfortable. The difference is rarely the amount of technical effort involved. It is whether movement explains something the person needs to understand.
Begin with the state change
Imagine selecting a topic in a writing index. A highlight that moves between topic labels can connect the old selection to the new one. The motion communicates continuity: this is the same control in a different state. A full-page spin communicates very little about the filtering operation.
Write down the before and after states before choosing an easing curve. If the movement has no relationship to those states, it is probably decoration. Decoration is not automatically wrong, but it should have a smaller claim on the visitor's time and attention than functional feedback.
Keep the content available
A reveal effect should not leave important text inaccessible when JavaScript fails or a visitor scrolls quickly. Start from a readable page and enhance it. Do not make the entire reading experience depend on a long entrance sequence finishing.
For small interactive feedback, consider whether the element needs to travel at all. A colour change or an immediate state update may be enough. On a page with many controls, repeated movement can become more noticeable than the content. Evaluate the sequence of interactions, not only one polished isolated example.
Performance is part of the feeling
MDN describes how animation work fits into a frame budget. Animating layout-affecting properties can require additional rendering work, while properties such as transform and opacity often offer a more efficient starting point. That is guidance, not a guarantee: complex effects and too many layers still need measurement.
A spring that looks graceful on one machine may feel inconsistent on another if rendering cannot keep up. Use browser performance tools when testing, keep the scope of motion small, and avoid permanently promoting every element to its own layer. The implementation should support the intended feeling instead of competing with it.
Design the still version first
The prefers-reduced-motion media feature exposes an operating-system preference. Honour it by removing unnecessary travel, parallax, and zoom—not by hiding the feature or withholding its final state. W3C's animation guidance also makes the underlying concern clear: interaction-triggered motion can be a barrier.
A filter still needs to show which topic is active. A disclosure still needs to open. A reading-progress indicator can still report position without elaborate movement. These are complete interactions, not compromised substitutes.
The strongest motion system is one whose purpose remains obvious when the movement is gone. Once the static states work, animation can add continuity and character without carrying the entire burden of understanding.
Further reading: MDN: Animation performance, MDN: Reduced motion, and W3C: Animation from interactions.