Drawer 3: Motion

Open it when: you're about to add animation, or content appears late, blank or not at all.

What we know

Never let motion hide content

  • A fade-in must never be what makes content appear. If content starts hidden and waits for a scroll, it stays blank in a hidden tab, in a screenshot tool and for search engines. That shipped blank three times on one site. [our build]
  • The fix we used: hide content only once the page's script has run, show what's already on screen at load, and add a fallback that shows everything after about a second and a half. [our build]
  • Keep content visible by default, so a failed script doesn't hide the page. Start every animation from an already-visible state. [impeccable]
  • impeccable's rule checker flags text still hidden after reveals have run, as an error. [impeccable]

How much motion: the sources clash

  • frontend-design: put motion into a few high-impact moments. One orchestrated page load with staggered reveals beats scattered small effects. Use scroll-triggered effects and hover states that surprise. [frontend-design]
  • impeccable agrees on one authored moment, not scattered effects. But it says not the same entrance on every section. [impeccable]
  • impeccable: a generic fade-and-rise, hover lift, parallax layer or scroll reveal is not an idea. The key moment must come from this product. [impeccable]
  • impeccable: stagger items only when a list appears as a list. Cap the total delay. Never treat every section as a staggered list. [impeccable]
  • impeccable: on app screens, no orchestrated page-load sequences. Motion shows state, not decoration. [impeccable]
  • In our build, scroll-triggered reveals were the thing that shipped blank. [our build]

Purpose

  • Motion explains state, relationship and order, or makes one earned moment. Decoration without purpose is debt. [impeccable]
  • Removal test: take the animation away. If nothing meaningful is lost, it was decoration. [impeccable]
  • Choose what moves by what it means. Shared-element moves for continuity, blur for focus, masks and clip paths for reveals, the smallest change for feedback. [impeccable]
  • Blur, backdrop-filter, clip-path, mask and shadow are all motion materials, not only transform and opacity, as long as they stay smooth. [impeccable]

Timing

  • 100 to 150 ms for instant feedback. [impeccable]
  • 150 to 300 ms for routine state changes. [impeccable]
  • 300 to 500 ms for layout, overlay or view changes. [impeccable]
  • 500 to 800 ms for one deliberate entrance. [impeccable]
  • On app screens, 150 to 250 ms for most transitions. [impeccable]
  • Exit faster than you enter. Long feedback feels like lag. [impeccable]

Easing

  • Use a natural slow-down curve such as cubic-bezier(0.16, 1, 0.3, 1), or ease-out-quart, quint or expo. [impeccable]
  • No reflexive bounce or elastic curves. The rule checker flags them. [impeccable]
  • Apple and Starbucks both shrink buttons slightly when pressed, with scale(0.95). [awesome-design-md]

Reduced motion: the sources differ in degree

  • Our build: respect the reduced-motion setting. Stop anything that scrolls by itself and show content without the fade. [our build]
  • impeccable: every web animation needs a prefers-reduced-motion path. Reduced motion means fewer and gentler animations, not none. Useful feedback stays. [impeccable]
  • impeccable's audit flags a global "0.01ms" switch-off that kills useful feedback. [impeccable]
  • Astryx: reduced motion removes movement, never information. [Astryx]

Performance

  • Don't casually animate width, height, top, left or margins. [impeccable]
  • Set will-change only during a known animation. The audit flags it when left on. [impeccable]
  • Stop loops that aren't needed when they're off screen or hidden. Respect autoplay and sound settings. [impeccable]
  • Text that scrolls by itself forever (a marquee) is flagged. [impeccable]
  • Big effects (WebGL and the like): keep 60 frames a second; below 50, simplify. Always have a plain fallback. Never add sound without opt-in. [impeccable]
  • When the chosen look names a technique (canvas, WebGL, view transitions), build the real thing, not a still imitation. [impeccable]

Tools

  • frontend-design: CSS-only motion for plain HTML; the Motion library for React. [frontend-design]
  • Astryx themes can generate motion timings from a few inputs (fast, medium, ratio). [Astryx]

Tools in this drawer

  • Purposeful motion: /impeccable animate <target>. Pick it when you're adding or reworking animation.
  • Tool: rule checker for AI tells (impeccable detect). Pick it to catch content left hidden, bounce easing and endless scrolling.

Leads onward

Leads here