Functional animation principles: moving with a purpose

Functional animation explains a change, directs attention or confirms an action. NN/g durations, easing, frequency and how to respect reduced motion.

info Quick Definition

Functional animation is interface motion that does a job: it explains a change of state, directs attention to an element or confirms that an action was carried out. It is the opposite of decorative animation, which adds movement without adding information. The basic rule: if removing the animation loses nothing important, it was probably decorative.

What is animation for in an interface?

Three concrete functions justify almost all useful motion. The first is explaining a change: an element that slides in when a panel opens shows where it came from. The second is directing attention: an element that appears smoothly tells the user where to look next. The third is confirming: a button that changes when submitted tells the user the action was registered.

Interaction Design Foundation (IxDF) sums it up like this: use animation to show the user where to focus within the interface, and keep the movement of everything else to a minimum. NN/g, in a 2014 article by Aurora Harley, advises employing animations sparingly and only when they add meaning to the interaction. And CareerFoundry suggests ruthlessly asking whether each animation is essential; if the answer is no, remove it.

Which Disney principles help?

Disney’s twelve principles of animation were designed for characters, not interfaces. Some transfer well. IxDF applies them with examples: squash and stretch on a payment button to draw attention, anticipation on a hover to show that an element is interactive, or a download animation whose speed is linked to the file size. Its central warning: if you exaggerate too much, it may annoy users.

The most useful one day to day is easing (slow in, slow out): according to IxDF, without easing in and out, animations feel robotic. The rest need judgement. In practice, not everything that works in a film works on a screen someone uses a hundred times a day.

How do you choose duration, frequency and easing?

Immediate response. According to NN/g, for an animation to be perceived as cause and effect, the effect must begin within 0.1 seconds of the user’s action.

Duration. In another article (Page Laubheimer, 2020), NN/g gives concrete figures:

Case	Suggested duration (NN/g)
Simple feedback (checkbox, toggle)	Around 100 ms
Substantial screen change (a modal entering)	200 to 300 ms
Big movements across large screens	Up to 400 ms
Almost any animation	Between 100 and 500 ms; from 500 ms it starts to feel slow

The underlying rule: use the shortest duration that is not jarring, because animations are more often too long than too short. Entering elements usually need slightly more time than exiting ones (its example: 300 ms to appear and 200 to 250 ms to disappear).

Frequency. NN/g warns that animations encountered over and over are roadblocks to content and lengthen the task; ones seen often should be shorter and more subtle. It also notes that slower transitions are less distracting, and that fast ones attract more attention when they happen outside the user’s focus.

Easing. NN/g most often recommends ease-out (starts fast and slows down), which feels responsive and lets the eye settle on the element. Ease-in is sometimes used for exits, although it can feel unresponsive if it starts slowly. Linear motion tends to look unnatural. CareerFoundry adds that motion should be smooth and that timings should be tested with users, since it gives no figures.

How do you respect reduced motion?

Some people have vestibular disorders or feel dizzy from on-screen movement. Devices let users ask for less motion, and CSS can detect that with prefers-reduced-motion. MDN defines that preference as a signal that the person prefers an interface that removes, reduces or replaces motion-based animations, and notes that scaling or panning large objects can trigger vestibular symptoms. Its example swaps a scaling animation for a gentle opacity fade.

Two WCAG 2.2 criteria matter:

2.3.3, Animation from Interactions (Level AAA). Motion animation triggered by interaction can be disabled, unless the animation is essential. W3C recommends prefers-reduced-motion as a technique to meet it.
2.2.2, Pause, Stop, Hide (Level A). Any moving, blinking or scrolling information that starts automatically, lasts more than five seconds and is presented alongside other content needs a mechanism to pause, stop or hide it, unless it is essential.

NN/g also asks you to respect people who turned on “reduce motion” by removing animations. For design, this means every non-essential animation needs a version without motion, for example a colour or opacity change. You can go deeper in the reduced motion strategies.

Example

Illustrative example: a payment form that shows a loading animation while it validates a card. The animation starts within 0.1 seconds of the tap, lasts as long as the validation takes and changes to a confirmation icon. The team adds a reduced-motion version: the spinner is replaced by a “Validating…” text and the icon appears without sliding. The error animation, however, is not removed, because it carries information: it shows where the problem is. For the loading case in more detail, see loading states.

For your next design: list every animation in one flow and mark which ones would disappear without losing information. Those are candidates for removal. Then check which of the rest have a reduced-motion version.

When should you NOT animate?

When motion slows the task. A one-second transition on every step of a form becomes tiring; according to NN/g, from 500 ms it already feels slow.
When the animation repeats over and over. NN/g describes these as roadblocks to content.
When content moves without being asked. An automatic carousel can distract and, under WCAG 2.2.2, must be pausable.
When there is no version without motion. If you cannot offer that alternative, reduce the animation.

Common mistakes

Animating everything so the interface feels “alive”.
Using long animations for frequent actions.
Forgetting easing, which makes motion mechanical.
Ignoring prefers-reduced-motion and offering no alternative.
Applying Disney’s principles without judgement, as if each one worked the same way in an app.
Using motion to convey critical information with no text or other signal to back it up.

Sources

Frequently asked questions

What is functional animation in an interface?

It is motion with a purpose: explaining a change of state, directing attention to an element or confirming that an action ran. If removing the animation loses no important information, it was probably decorative.

How long should an interface animation last?

NN/g says most should last between 100 and 500 ms, depending on complexity and the distance travelled. Simple feedback such as a toggle is around 100 ms; a modal entering can take 200 to 300 ms. The rule is to use the shortest duration that is not jarring.

What is reduced motion?

It is a device preference indicating that the person wants less animation. In CSS it is detected with prefers-reduced-motion. WCAG 2.3.3 (Level AAA) requires that motion animation triggered by interaction can be disabled, unless it is essential.

Which of Disney's principles apply to interfaces?

Disney’s twelve principles of animation were designed for characters. IxDF applies some to interfaces, such as easing (slow in, slow out), anticipation on a hover or squash and stretch on buttons, and warns that exaggerating may annoy users.