in-between

Definition

  1. 1 A frame drawn between two keys.
  2. 2 The part of a motion that decides how it feels.

See also timing, spacing, easing

Animation is not the art of drawings that move, but the art of movements that are drawn.

Pencil drawing of Norman McLaren Norman McLaren Animator · NFB · 1914–1987

Contents

Part I

Seeing

What motion says, and its two controls: timing and spacing.

  1. Motion is information What motion tells the viewer: cause, continuity, attention, feedback, state.
  2. Timing Duration as weight, mood and importance. Seeing motion in frames.
  3. Spacing The central idea: easing is spacing, the distance between frames.
Part II

Physics

Weight, springs, momentum: motion that behaves as if the screen had physics.

  1. Weight Heavy and light along the same path. Only timing and spacing change.
  2. Springs A spring has no set duration. Time is a result of its physics.
  3. Momentum and friction Flicks, friction, and working out where a throw will land.
Part III

The principles, for interfaces

The twelve animation principles, each as an interface example.

  1. The twelve, translated The twelve principles of Disney's animators, each as an interface example.
Part IV

Choreography

Who moves first, who follows, and how things arrive and leave.

  1. Stagger and hierarchy Who leads and who follows. A small stagger sets reading order.
  2. Enter, exit, change Entrances and exits are different motions. Where does it come from, and where does it go?
Part V

Continuity and space

Keeping one thing recognisable as it changes place, and giving the app a map.

  1. Object permanence The same thing in a new place: the FLIP technique and View Transitions.
  2. Spatial models The app as a place: sequence, depth, back and forward.
Part VI

Interaction

Motion that follows the finger, and motion driven by scroll.

  1. Direct manipulation Following the finger: 1:1 tracking, rubber-banding, release with velocity, interruption.
  2. Scroll as time Scroll as a scrubber: when it helps and when it hijacks.
Part VII

The canvas

Writing motion yourself: the loop, easing, physics, many things, noise, and the choice of medium.

  1. The loop Canvas as a flipbook: clear, draw, repeat. Move things by dt, not by frame.
  2. Easing by hand lerp (a blend toward a target) and the frame-rate trap in x += (target − x) · k.
  3. Physics by hand Three ways to step physics forward (Euler, semi-implicit Euler, Verlet), then a spring from scratch.
  4. Many things Particles, trails and flocks: motion from rules.
  5. Organic motion Noise versus random: natural motion is randomness that stays smooth.
  6. Choosing the medium CSS, WAAPI, SVG, Canvas and WebGL: what each is for.
Part VIII

Craft

Keeping motion fast, kind to people who want less of it, and restrained.

  1. Performance The browser's steps per frame (style, layout, paint, composite) and the time a frame allows.
  2. Care Reduced motion: reduce the movement, keep the message.
  3. Taste Frequency, personality, and when not to animate.
Part IX

Special topics

Motion that explains data, and motion managed as a system.

  1. Animated infographics Object constancy, staged reveals, and motion that does not mislead.
  2. Motion architecture Tokens, primitives, orchestration, patterns, policy: motion as a system.
Capstone

Capstone

Build your own motion system.

  1. Your motion system Design the system, build one screen with it, publish its spacing charts.

Lab

Spacing chart

Where an object sits on every frame: ghost copies along its path, beside an animator's tick chart.

Spacing = easing Curve bench

Drag a cubic-bezier curve's handles; position and velocity graphs side by side, and a second curve to compare.

Reading a curve as speed Spring bench

Tune a spring by response and bounce, or stiffness, damping and mass. Live graph, settle time, CSS linear() to copy.

Physics as feel Exposure sheet

A timeline with one bar per element: shift a bar to offset it, or set a stagger to space many at once.

Choreography, overlap Frame stepper

Play your code, or a page from this site, at 1×, 0.25× or 0.1×, or step it frame by frame.

Observation Eye trainer

Perception drills, scored, with a calibration graph of how close your guesses run.

Intuition, measured Canvas sandbox

A canvas you code live, animation loop already written, with dt (ms since the last frame) and fps readouts, pause and step.

Motion from scratch Specimen journal

Save any lab state with the words you would use for its feel. A vocabulary of your own.

Taste Export desk

Any lab state as CSS, Web Animations API, Motion (the library), GSAP or Canvas code.

Notation Data stage

A chart that transitions between states. Match bars by key or by position, stagger or stage the change; SVG or Canvas.

Motion that explains