UI animation principles: why motion?

Most motion on the web is added at the end, when a page is built and someone says it feels flat. That is how sites end up with every section fading up the same way and a hero that takes three seconds to finish arriving. This chapter starts from the other end. UI animation principles are a short list of jobs that motion can do on a page: give feedback, show where things came from, connect one state to the next, point at what matters, and give a brand some character. If a movement does none of those jobs, it is decoration, and decoration has to earn its place. By the end you will have a written motion brief for the hero you build across this course.

01The five jobs motion can do

Every movement on a page should be able to answer the question "what is this for?". In our experience the answers fall into five groups.

Feedback

Feedback is the most useful job and the least showy. When someone hovers a link, presses a button or submits a form, a small, fast change confirms that the page heard them. Without it, people tap twice, or wonder if anything happened. A colour change on hover and a slight press on click are often all a site needs.

Orientation and continuity

When something appears out of nowhere, the reader has to work out what it is and where it belongs. Motion can answer that for them. A dropdown that unfolds from its button, or a panel that slides in from the edge it lives on, explains the layout without words. Continuity is the same idea across a change of state: if a thumbnail grows into a large image, the eye follows one object instead of losing one and finding another.

Attention

Movement is the strongest signal on a page. The eye goes to it whether the reader wants it to or not. That makes it good for the one thing that needs noticing, such as an error message or a new item in a list, and bad for everything else. If five things move at once, none of them gets attention.

Character

The last job is the one clients ask for most: making a site feel like the brand. A studio known for precision might use short, crisp movements with no overshoot. A playful product might allow a little bounce. Character lives in timing and easing, the subject of the next chapter, far more than in how much moves.

02Disney's principles, applied to UI animation

Disney's animators worked out a set of principles for making drawn characters feel alive, usually quoted as the twelve principles of animation. Some translate to interfaces very well. Others were made for a dancing teapot and do not belong on a pricing page.

The ones that help:

• Slow in and slow out. Real objects speed up and slow down. Nothing in the physical world starts at full speed or stops dead. On the web this is easing, and it is the single biggest difference between motion that feels mechanical and motion that feels natural.
• Timing. How long a movement takes says how heavy or important it is. Small things move quickly, large things take a little longer.
• Staging. Present one idea at a time, so the reader knows where to look. In UI terms, sequence a reveal so the heading lands before the buttons.
• Follow through and overlapping action. Parts of a moving thing do not all stop at the same moment. On a page this becomes stagger: items in a group start a few milliseconds apart, which we cover in stagger and sequence.
• Anticipation. A tiny movement before the main one, like a button dipping before it springs. Use it rarely and keep it short.

The ones to be careful with: squash and stretch, exaggeration and secondary action. They make cartoons feel alive and make interfaces feel unserious or slow. A modal that stretches as it opens is fun once and tiring by the third time.

03When not to animate

Knowing when to leave something still is half the skill. These are the cases where we usually say no.

Repeated actions. Something a person does fifty times a session, such as typing in a search box or switching tabs in a dashboard, should respond instantly. Motion that is charming on the first click is a delay on the fiftieth.

Content people came to read. Body text, prices and the main heading should be there when the page loads. Animating them in makes the reader wait for the thing they wanted, and it can delay how fast the page is judged to load. Chapter 6 shows why a heading that fades from invisible hurts Largest Contentful Paint, and our website animation performance article has the full checklist.

Motion that runs on its own. Carousels, looping backgrounds and tickers pull the eye away from the content. The Web Content Accessibility Guidelines (WCAG) say that moving, blinking or scrolling content that starts automatically and lasts more than five seconds needs a way to pause, stop or hide it. That is success criterion 2.2.2, Pause, Stop, Hide, at Level A, the most basic level.

Movement that can make people unwell. For people with vestibular (inner ear) disorders, large movement, parallax and zooming can trigger dizziness, nausea and headaches, as the W3C notes under success criterion 2.3.3, Animation from Interactions. Operating systems let people ask for less motion, and CSS can read that request through the prefers-reduced-motion media query. We build that in properly in the last chapter, prefers reduced motion, but plan for it from today.

04Writing a motion brief

Before writing a line of animation code, we write a short motion brief: a few sentences that list what moves, why, and how it should feel. It takes ten minutes and saves hours of nudging durations at the end. It also gives everyone on a project the same words to argue with.

A useful brief answers four questions:

1. What moves? List each element and the trigger: page load, hover, click, scroll.
2. Which job does each one do? Use the five jobs above. If an item has no job, cut it.
3. How should it feel? Two or three adjectives, such as "calm, precise, quick". These guide the easing and duration choices in the next chapter.
4. What stays still? Name the things that must never wait on motion, such as the main heading text and the call to action.

On a larger site the brief grows into motion tokens, named durations and curves that sit next to colour and type in the design system. The difference between a full system and a written guide is the subject of design system vs style guide. For one page, a comment in the stylesheet is enough.

05The course project

Across this course you build one landing page hero, in three files: index.html, styles.css and script.js. Each chapter adds one piece. You start with plain markup, which works and reads well before any motion is added. That is the same idea as progressive enhancement: the page is complete without animation, and motion is a layer on top.

<header class="hero">
  <p class="hero-eyebrow">Independent studio</p>
  <h1 class="hero-title">We build websites that move with purpose</h1>
  <p class="hero-lede">Design and engineering for small teams with big plans.</p>
  <div class="hero-actions">
    <a class="button" href="#work">See the work</a>
    <a class="button button--ghost" href="#contact">Get in touch</a>
  </div>
  <a class="scroll-cue" href="#next">Scroll</a>
</header>
<section id="next" class="next">
  <h2>What we do</h2>
  <p>Three short paragraphs about the studio go here.</p>
</section>

/* Motion brief
   Heading: page load, character. Words rise in, never start invisible.
   Buttons: load, then hover and focus. Feedback. Quick, no bounce.
   Scroll cue: loops gently, attention. Must be easy to ignore.
   Section below: on scroll, orientation.
   Feel: calm, precise, quick.
   Never waits on motion: heading text, both buttons. */