Motion is one of the most misused features of modern interface design. Nearly every app ships with animations, but most of those animations are decoration: spinning loaders, bouncing checkmarks, sliding panels that exist because the framework made them easy. Good motion has a job. It explains, confirms, maintains continuity, or welcomes. Everything else is ornament, and ornament in software is rarely free.
#The idea
Before you pick an easing or a duration, you have to answer a harder question: what is this animation doing for the user? Every motion in a well-designed interface has a purpose, and those purposes fall into a rough hierarchy. From most to least important:
- Feedback: confirms that something happened. A button press, a successful save, a drag pickup. The animation is the receipt. Without it, users repeat actions because they don't know if the first one registered.
- Continuity: maintains spatial relationship between states. The detail panel slides out from the list item you tapped, not fades in from nowhere. The modal scales up from the button that opened it. Without it, every state change is a cut: disorienting, hostile to the mental model.
- Communication: conveys character, causality, or hierarchy. The error shake. The confirmation bounce. The loading pulse that tells you something is happening asynchronously. The animation itself is a signal.
- Delight: the first-impression moment. A welcome transition, a signature micro-interaction that makes the product feel alive. Use sparingly. Delight that fires every time is no longer delight.
Every other use of motion (decorative flourishes, ambient floatiness, performative easing on elements nobody is focused on) is friction disguised as polish. The discipline is recognizing which bucket each animation falls into, and cutting the ones that don't fit.
Orchestrated motion communicates sequence: each ring reaches its position in a coordinated wave, not simultaneously. Without this choreography, the same eight circles appearing at once would read as static.
Controls
#When it applies
- Feedback on direct action: click, tap, drag, successful submit. Always animate.
- Transitions between related states: list to detail, menu to submenu, collapsed to expanded. Motion preserves the spatial relationship.
- Signaling async work: skeleton pulses, progress bars, loading states. Motion says something is happening.
- First-impression moments: onboarding, empty states, first view of a feature. Motion earns attention you haven't yet been given.
#When it doesn't
- Ambient animations that never end. Background shimmer, floating bubbles, decorative wobble. Brain filters them out; they still cost performance.
- Animations users hit 100+ times a day. Raycast never animates its launcher because its users open it hundreds of times daily. Friction compounds.
- Marketing copy on product surfaces. A landing page's hero animation doesn't belong inside the app itself.
- Substituting motion for information. A long spinner doesn't tell you what's happening. Replace with a progress indicator or skeleton that communicates structure.
#Implementation
The test: can you state, in one sentence, what this animation is telling the user? If you can't, cut it.
// Purposeful: this animation says "your click registered"
<motion.button
whileTap={{ scale: 0.97 }}
transition={{ duration: 0.08 }}
>
Save
</motion.button>
// Decorative: this animation says nothing
<motion.button
animate={{ rotate: [0, 2, -2, 0] }}
transition={{ duration: 4, repeat: Infinity }}
>
Save
</motion.button>#Craft notes
- Motion is the most expensive form of communication. It costs attention, battery, CPU, and (for some users) physical comfort. Budget it like you'd budget notifications.
- If two designers on your team can't agree what an animation is for, it shouldn't ship. Vague intent is decoration.
- The animations you don't notice are the ones doing their job. The best continuity animation feels invisible. The user doesn't think that was smooth; they just navigate.
- Study negative space. Look at apps you find restful (Notion, Things, Arc's command bar) and count how little motion they actually use. The absence is a deliberate choice.
#Exercises
- Audit your favorite app. Open an app you use daily. For each animation you notice in five minutes of use, classify it: feedback, continuity, communication, delight, or decoration. Count. How many are decoration?
- Find a missing animation. Find a place in a real app where an animation should exist (a state transition, a feedback moment) and doesn't. Describe what's lost without it.
- Cut your own site's motion by half. Take something you've built. Remove every animation that can't be justified in one sentence. Ship it. See if anyone notices.
#Study this in the wild
- iOS Settings. The gold standard for continuity. Every navigation is spatially tethered; nothing fades in from nowhere.
- Linear. Notice how few decorative animations exist. Motion is reserved for state transitions and feedback.
- Raycast. Studies in restraint. The launcher itself does not animate. Users open it hundreds of times a day; animation would become friction.
#Further reading
- Rauno Freiberg: On design engineering — the clearest articulation of motion as a communication tool.
- Apple Human Interface Guidelines: Motion.
- Emil Kowalski: animations.dev — especially the "when not to animate" chapter.