Canon Motion

CANON · Motion Design

Motion communicates causality, hierarchy, and feedback. Bad motion either distracts (too much) or feels broken (too little). The defaults below produce motion that reads as designed.

Quantified Rules

Duration

Rules:

1. Smaller elements move faster. Larger elements move slower.
2. Exit animations are 20–30% faster than entrances. Users want to dismiss faster than they want to receive.
3. Anything over 600ms feels slow. If a transition needs to be longer, break it into stages.
4. Anything under 80ms feels jarring. Below this threshold, the brain doesn't see the transition.

Easing

Default to non-linear easing for every transition. Linear easing only applies to looping animations (rotation, progress bars).

Why ease-out for entrances: starts fast, slows to a stop. Mimics physical objects decelerating. Element is visible quickly.

Why ease-in for exits: starts slow, accelerates away. Element is visible while leaving, then quickly gone.

Banned Easings

Easing Tokens

:root {
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --duration-instant: 100ms;
  --duration-fast:    150ms;
  --duration-normal:  250ms;
  --duration-slow:    400ms;
  --duration-slower:  600ms;
}

Reference these tokens in every transition. No raw 0.3s values.

What to Animate

Always

• State changes: hover, focus, active, disabled, loading, error
• Appearance: modals, drawers, toasts, tooltips opening and closing
• Position changes: items reordering in a list, drag-and-drop
• Loading states: skeletons, spinners, progress
• Acknowledgement: form submission success, copy-to-clipboard
• Scroll-triggered reveals (sparingly, with purpose)

Never

• Unprompted decoration that doesn't serve communication
• Auto-rotating carousels (UX anti-pattern, accessibility nightmare)
• Anything that blocks user input for more than 300ms
• Particle effects in productivity tools
• Background videos that drain battery
• Looping animations that compete with content

Properties That Are Cheap

Animate only these on the GPU-accelerated path:

/* GOOD: cheap */
transition: transform, opacity, filter;

/* AVOID: triggers layout */
transition: width, height, top, left, margin, padding;

Use transform: translate() instead of top/left. Use transform: scale() instead of width/height. Use opacity instead of display/visibility.

For width/height changes, use clip-path, mask, or container queries. For accordion expansion, use grid-template-rows: 0fr → 1fr (modern technique).

Staggering

When animating a list of items, stagger their entrance for choreographed feel:

.list-item {
  animation: fade-up var(--duration-normal) var(--ease-out) backwards;
}
.list-item:nth-child(1) { animation-delay: 0ms; }
.list-item:nth-child(2) { animation-delay: 60ms; }
.list-item:nth-child(3) { animation-delay: 120ms; }
.list-item:nth-child(4) { animation-delay: 180ms; }
.list-item:nth-child(5) { animation-delay: 240ms; }
/* ... */

Rule: total stagger duration should not exceed 500ms. If 10 items at 80ms = 800ms, reduce to 50ms.

Choreography Principles

1. Direction matches meaning. Closing modal slides down (where the dismiss action lives). Drawer opens from the side it lives on.
2. Origin matches origin. Tooltip animates from the element that triggered it. Modal origin can be the click point for delight.
3. Speed conveys distance. Items moving farther take slightly longer.
4. Acceleration matters more than top speed. Easing curve > duration.
5. Group related motion. If 3 things change at once, they should look like one orchestrated movement, not 3 things happening.

Reduced Motion

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

Mandatory in every project. WCAG 2.3.3 requires no motion for users with vestibular disorders. The 0.01ms keeps state changes instant rather than removing them entirely (which breaks JS that depends on transitionend events).

Performance

Use Chrome DevTools Performance panel. Any layout thrashing (purple bars) means you're animating non-cheap properties. Move to transform/opacity.

Anti-Patterns

Decision Tree

Is the user adding motion?
├─ State change (hover/focus) → 100-150ms, ease-out
├─ Element entering screen → 200-400ms, ease-out
├─ Element leaving screen → 150-300ms, ease-in
├─ Element moving on screen → 250-400ms, ease-in-out
├─ Loading state → 1000-2000ms loop, linear
└─ Page transition → 400-600ms, ease-in-out, with stagger if list

Audit Checklist

1. Search for transition: all. Replace with specific properties.
2. Search for hardcoded durations (0.3s, 500ms). Replace with tokens.
3. Search for bounce, elastic. Replace with ease-out.
4. Check @media (prefers-reduced-motion: reduce) exists.
5. Open Chrome DevTools, record interaction. Any frame drops below 60fps?
6. Check hover transitions. Anything over 200ms? Reduce.
7. Check modal/drawer open transitions. 250–400ms?
8. Check exit transitions are faster than entrance.
9. Check no carousels auto-rotate.
10. Check loading spinners only appear after 400ms delay.

Citations

• Material Design 3 Motion: https://m3.material.io/styles/motion/overview
• Apple HIG Motion: https://developer.apple.com/design/human-interface-guidelines/motion
• WCAG 2.2 Pause, Stop, Hide: https://www.w3.org/WAI/WCAG22/Understanding/pause-stop-hide.html
• WCAG 2.2 Animation from Interactions: https://www.w3.org/WAI/WCAG22/Understanding/animation-from-interactions.html
• Easings.net: https://easings.net
• Val Head, Designing Interface Animation
• Rachel Nabors, Animation at Work