Command Palette

Search for a command to run...

Hectal
Scene
02
Take
01
Level
Beginner
Runtime
~2 h

Purpose and Principles

The five jobs of interface motion, when not to animate, the principles that fit UI, durations by size and distance, and a motion spec for the launch site.

6 shots17 live examples5 dailies
0/6 · 0%

Before any technique, this phase asks why. Every animation on a page should do one of five jobs: feedback, orientation, attention, cause and effect, or brand. You learn to name the job, to decide when not to animate (frequent actions, keyboard-started actions, anything that makes people wait), and to run the sums that show what a decoration costs.

Then taste becomes something you can reason about. You meet the animation principles that suit interfaces, a table of durations from usability research, and the rules for distance, size and entering versus leaving. Pairs of the same interface, two ways, let you choose first and read the reason after.

You finish by doing what a real team does before writing motion code: a storyboard and a spec table for the whole Lumen Volt launch site, with a reduced-motion answer for every row, and six motion tokens in tokens.css. Nothing moves yet, but every later phase has its numbers.

▶ Roll: 2.1

Scene 02 · the brief from Lumen

Mei, motion designer at Lumen Bikes

“Before anyone writes motion code, I want every animation on a sheet: what it is for, how long it takes, and what Ravi sees.”

Phase 1 gave the team a shared picture of frames and time. Now Ama's brief, "alive but calm", has to become decisions, and Mei is the one who makes them. Her first move is not a tool. It is a rule: every animation on the Volt page must be able to say what job it does.

Mei and Kofi walk through the still page together. The cart count: feedback. The gallery filter: orientation. The hero: a first impression, so brand, but only once. Some ideas do not survive the question. Tomás, the founder, asks for the header logo to spin forever because it looks premium. Mei asks what job that does, and what Ravi's phone will do with it. The logo stays still.

By the end of this phase the team has a written motion spec for the whole launch site and six tokens in tokens.css: three durations and three easings. Nothing moves yet. Every motion that follows has a reason, a duration and a calm version, decided before it was built.

In this scene

You will learn

  • Name the job of any animation, and delete the ones with no job
  • Decide when not to animate, with numbers
  • Pick durations and easings from a table, and scale them for distance
  • Write a storyboard and a motion spec with a reduced-motion column

You write code in

In the editor on this page (no install); the build adds to your lumen-motion project

Files you touch

  • docs/motion-spec.md
  • src/styles/tokens.css
  • index.html

Shot list · 6 shots, widths by reading time

2.12.22.32.42.52.6
  1. 2.1The Five Jobs of Interface MotionInterface motion earns its place by doing one of five jobs: feedback, orientation, attention, cause and effect, or brand. An animation that does none of them is decoration, and decoration costs the user time and attention. 24 min 4 live
  2. 2.2When Not to AnimateThe best animation is sometimes none. Skip motion for things people do many times a day, for anything started from the keyboard, and for anything that makes people wait. Tooltips are the classic exception: a delay the first time, instant after. 21 min 3 live
  3. 2.3The Animation Principles for InterfacesDisney's animators named twelve principles of animation. Seven matter for interfaces: slow in and out, anticipation, follow-through, squash and stretch, arcs, staging and timing. In product UI they work small and short; marketing pages can be bolder. 21 min 2 live
  4. 2.4Duration, Distance and SizeHow long should motion take? Nielsen Norman Group's starting points: about 100 ms for feedback, 200 to 300 ms for modals, up to 400 ms for large movement, 500 ms as the upper limit. Longer trips take longer, and things enter a little slower than they leave. 21 min 4 live
  5. 2.5Storyboarding and Motion SpecsBefore code, draw the motion: a storyboard of key frames, and a spec table with trigger, element, property, from, to, duration, easing, delay and a reduced-motion answer. A spec turns "make it feel nice" into numbers a developer can build and a tester can check. 19 min 2 live
  6. 2.6Build: The Launch Site StoryboardbuildWrite the motion spec for the whole launch site, and add the six motion tokens in tokens.css: three durations and three easings. Nothing moves yet, but every motion the course builds now has a job, numbers and a calm version. 24 min 2 live

Dailies · 5 checked exercises

A film crew watches the day's shots every evening. Build each one yourself and press Check: the page freezes its clock and checks your motion at exact moments, its cost, and its reduced-motion version.

D01A press that answers in 120 msThe Reserve button gives no feedback when pressed. Add a .pressed animation: the button dips to 94% and returns, in 120 ms or less, with ease-out, animating only transform.BeginnerD02No animation for the keyboardThe command menu slides in every time, even when opened with the K key. Make the keyboard path show the menu with no animation, and keep the 200 ms animation for the button.BeginnerD03A tooltip with a grace windowThe tooltips always wait 400 ms. Add a grace window: when a tooltip has just closed, a tooltip opened within 300 ms appears at once.BeginnerD04Enter slower, leave fasterThe dialog uses one transition for opening and closing. Make it open in 250 ms with ease-out and close in 180 ms with ease-in, animating opacity and transform.BeginnerD05Define the motion tokens (launch site)Part of the launch site: tokens.css. The button's transition uses var(--dur-base) and var(--ease-out), but the tokens are missing, so nothing animates.Beginner