Motion Design That Helps, Not Irritates: Principles That Work

The interface without animations is not neutral. It communicates through instant switching states that the brain has difficulty tracking. I pressed the button and suddenly found myself on another page. Did something happen? Where was I? Where am I now?

Animation answers these questions. But only if it is functional, not decorative. The difference between “helping” and “irritating” is not beauty. There's a target.

## A test that explains everything

The muddles formulated it precisely: describe in words what this animation says. If you can’t provide specific information, the animation is superfluous.

The card that is shifted when deleted says, “This item is gone.” The list that gets rearranged when sorted says, "That's where those elements moved." A background gradient that changes smoothly doesn’t say anything — it just moves.

Five reasons why animation is justified: explain the change in state, direct attention, give feedback on the action, show spatial connection, emphasize the character of the brand. If the animation does not fall into any - remove.

## Five Principles of Functional Animation

### Purpose first

Each animation solves the problem or not. Animation should clarify, guide, or confirm—if it doesn’t, it shouldn’t be.

Specific situations where animation is needed: change of component states (hover, active, disabled, loading), the appearance and disappearance of elements from the DOM, the transition between screens, feedback on the user's action.

Situations where not needed: background elements that are not interactive, constantly moving decorative patterns, animation on elements with which the user does not interact.

A practical way to check: Close your eyes and explain the animation in words. “The button is slightly pressed when pressed – it’s tactile feedback.” “The card appears smoothly from the bottom – it’s a spatial transition.” "The background slowly changes shade" - what is it? If there's no answer, take it away.

### Speed matters

Google Material Design fixes 200ms as the reference duration for standard transitions, 300ms for interscreen transitions. Apple HIG offers similar meanings.

Guidelines for UI:

• Microinteractions (hover, tap): 100–150ms
• Show / hide element: 200-300ms
• Transition between screens: 300-400ms
• Complex Narrative Animations: 400–700ms

Less than 100ms is not perceived as animation, it is perceived as an instant switch. More than 500ms for functional elements feels like a delay. The user begins to think that the product is slow - although it is only about animation.

### Easing is not an option

All interface animations should use easing curves, not linear motion. Nothing in the physical world moves at a constant speed.

Rules of practice:

• ease-out - for incoming elements, simulates braking when stopping
• ease-in - for escaping elements, accelerates and disappears
• ease-in-out for moving between states
• linear - only for progress bars and rotational spinners

### Movement hierarchy

When several elements are moving simultaneously, animate them with a delay, not at the same time. The list of eight cards appearing with 60ms between each is perceived smoothly. The same eight at the same time - like a sharp flash.

No more than 3-4 simultaneous animations in different parts of the screen. The eye doesn’t know where to look – the user loses orientation and feels chaos instead of movement.

### User controls movement

prefers-reduced-motion is a system setting that users enable for medical reasons or personal preferences. Vestibular disorders affect about 35% of adults over the age of 40 – in some of them, parallax and large-scale movements cause physical symptoms.

Minimum protection is one CSS rule:

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

## Disney Principles That Work at UI

the 12 principles of animation 1981 apply to adaptive interfaces:

Squash and stretch. Buttons are slightly compressed when pressed (scale(0.97)) - a tactile metaphor for physical pressing. It works well for primary CTAs, poorly for navigational elements.

Anticipation. Drawer starts to move a little slower as the user prepares for the change. Applies to sliding panels and dropdowns.

Follow-through. Elements fly slightly over their destination and return. cubic-bezier(0.34, 1.56, 0.64, 1) is the standard way to add this effect. Do not abuse: works for icons and small elements, breaks the perception on the big ones.

Secondary action. Auxiliary elements respond to the main action. For example: when adding goods to the basket, the basket icon in the header slightly “jumps”. This is confirmation without explicit notice.

The main thing is not to apply all the principles at once. One nuance that adds life better than five that creates chaos.

## Animation and Performance: What Cannot be Animated

AI tools sometimes generate animations via top, left, width, height. This causes layout reflow – the browser recalculates the position of all elements on each frame. On mobile devices, this is noticeable.

What to Animate Safely (Works on GPU, No Reflow):

• transform: translate, scale, rotate
• opacityXX

What not to animate:

• top, left, right, bottom
• width, height
• margin, padding
• font-sizeXX

A simple rule of thumb: If a CSS property affects the size or position of other elements, don’t animate directly, use transform.

## Prompt for Codex/Claude Code

Check all CSS transition and animation in the project for compliance
principles of productive animation.

Find:
1. Top/left/width/height instead of transform
2. Animations without easing (linear) on UI elements - add ease-out
3. Animations longer than 400ms on buttons and microinteractions
4. Absence of @media (prefers-reduced-motion: reduce)

For each: file and string, current code, corrected version.

## When the animation started to annoy – and why it happens

The most common scenario: the designer adds animations one at a time. Each one seems appropriate. Hover on the button is logical. The appearance of cards with stagger is beautiful. Fade between tabs - neatly. Smooth transition during loading is professional.

And then you open the product through the eyes of the user who wants to get the job done quickly, and you realize that every step is accompanied by a movement. The menu is animated. Content appears. The button is responding. Notification comes out. The total is constant background noise.

The problem is not with every specific animation. The problem is the cumulative effect.

One way to check is to go through the main user scenario without a mouse — just watch. How many times does something move? If more than 10 times in 5 steps – probably too much.

## Motion in the design system: why it is more important than it seems

Most design systems carefully document colors, typography, and components. Motion is rare. As a result, each developer and each AI tool makes decisions about animations independently. One page with ease-out, another with linear, a third with spring. The product loses its motion identity.

Solution: motion tokens in DESIGN.md. A few lines that define the system:

##Motion
duration-fast: 150ms #hover, tap
duration-base: 250ms # show/hide
duration-slow: 350ms #screen transitions
easing-enter: cubic-bezier(0.16, 1, 0.3, 1)
easing-exit: cubic-bezier(0.4, 0, 1, 1)
Stagger-interval: 70ms

With this context, AI tools generate consistent animations. Without it, each screen is slightly different.

● Each animation: one sentence about what it communicates
Hover/tap – 100-150mc ease-out
● Show / hide - 200-300ms ease-out
● No linear easing on UI elements (progress/spinner only)
Stagger for groups: 60–80ms between elements
● No more than 3-4 animations simultaneously on the screen
Only transform and opacity (not top/left/width/height)
Prefers-reduced-motion processed
Animations do not delay response to user action