Offered by Dead Brands
Motion is not decoration — it is how interfaces explain change and how drawings convince you they're alive.
Use it over MCP: connect to https://mcp.deadbrands.co/hub/mcp and call skills_get with slug motion-design-basics.
# Motion Design Basics Credit: SteTy — published free in the Skills Hub Motion is not decoration — it is how interfaces explain change and how drawings convince you they're alive. This skill covers the 12 principles of animation codified at Disney, the physics of easing and timing, modern UI duration standards with exact numbers, and how to aim a viewer's attention with movement instead of noise. ## Overview In the 1930s, Disney's animators turned trial-and-error discoveries into a teachable system, published by Frank Thomas and Ollie Johnston (two of Disney's "Nine Old Men") in *The Illusion of Life: Disney Animation* (1981). The 12 principles describe how to fake weight, intent, and life with still images shown in sequence. Eighty years later the same principles run your phone: a sheet sliding up with an ease-out curve is "slow out," a button that bulges before it launches is "anticipation," and icons that settle with a tiny overshoot are doing "follow through." Master the physics once and you can animate characters, logos, game sprites, and interfaces with the same toolkit. ## Core Principles - **Timing is meaning.** Timing = how many frames an action takes; spacing = how those frames are distributed. The same drawings read as heavy or light, frantic or calm, purely by timing: a head turn in 4 frames is a snap of alarm; in 16 frames it's a slow, suspicious look. - **Nothing in nature moves linearly.** Real objects accelerate and decelerate. Constant-speed (linear) motion is the #1 tell of amateur animation. - **The audience must be prepared and then satisfied.** Anticipation sets up an action; follow-through pays it off. Skip either and the motion feels teleported or dead. - **Clarity beats cleverness.** Staging — presenting one idea at a time, readable in silhouette — matters more than complexity. - **Volume is sacred.** A squashing character keeps its mass: flatten vertically, widen horizontally by the same amount. Thomas and Johnston's model was a half-filled flour sack — it deforms constantly, never gains or loses volume. ## Techniques **The 12 principles, working definitions:** 1. **Squash and stretch** — deform with speed and impact (a falling ball stretches, flattens on contact, recovers). More squash = softer/lighter material; a bowling ball barely deforms. 2. **Anticipation** — a small counter-move before the main action: crouch before the jump, wind-up before the pitch, a UI card dipping 4px before it expands. 3. **Staging** — compose so the action reads instantly: strong silhouettes, one focal action at a time, camera and background serving the pose. 4. **Straight ahead vs. pose to pose** — draw frame-by-frame for fluid, chaotic action (fire, splashes) or plan key poses first for controlled acting. Professionals block pose-to-pose, then loosen with straight-ahead passes. 5. **Follow through and overlapping action** — parts stop at different times: a cape, ears, or belly keep moving after the body halts; drag = parts lagging behind the root motion. 6. **Slow in and slow out (easing)** — cluster drawings near the extreme poses, space them wide mid-action. In software: ease-out for entrances, ease-in for exits. 7. **Arcs** — limbs, heads, and thrown objects travel on curved paths (a pendulum arm swing), never straight lines, unless the object is mechanical. 8. **Secondary action** — a subordinate gesture that reinforces the main one: a sad character walks (main) while wiping a tear (secondary). It must never upstage the primary action. 9. **Timing** — frame counts encode weight and emotion (see Core Principles). At 24fps, a blink is ~3–4 frames; a heavy door slam's anticipation can run 12+. 10. **Exaggeration** — push poses, spacing, and expressions past realism until the *idea* is unmistakable; exaggeration serves clarity, not randomness. 11. **Solid drawing** — forms must keep volume, balance, and perspective from every angle (today: solid modeling and rigging). 12. **Appeal** — characters and shapes that are pleasing to watch: clear shapes, varied proportions, a design you can read at thumbnail size. **UI motion numbers (Material Design-derived, widely adopted):** - Durations: small feedback (hover, toggle) **100–150ms**; standard transitions **200–300ms** on mobile, shorter on desktop (~150–200ms); large/full-screen transitions **300–400ms**. Under 100ms reads as instant; over 500ms reads as lag. Material's scale: short 50–200ms, medium 250–400ms, long 450–600ms. - Easing curves (cubic-bezier): standard `cubic-bezier(0.4, 0, 0.2, 1)`; decelerate/enter `cubic-bezier(0, 0, 0.2, 1)`; accelerate/exit `cubic-bezier(0.4, 0, 1, 1)`; a mild spring overshoot `cubic-bezier(0.34, 1.56, 0.64, 1)` for playful confirmations only. - Exits are faster than entrances (dismiss in ~75% of the enter time). Stagger list items by 20–50ms each. Animate only `transform` and `opacity` for 60fps; respect `prefers-reduced-motion`. ## Worked Examples - **Bouncing ball, the eternal exercise.** 24 frames at 24fps: ball accelerates down (spacing widens each frame), stretches ~15% at top speed, squashes to 60% height on the contact frame (widening equally), rebounds with clustered spacing at the apex. Change only the spacing and it becomes a bowling ball (no squash, fast fall) or a beach ball (big squash, floaty apex hang). - **Character jump.** Anticipation crouch (6 frames) → stretch launch → arc apex with hang (clustered frames) → squash on impact → follow-through: ears and coat settle 4 frames late. - **App sheet.** Enters in 300ms decelerate easing (fast start, gentle settle = slow out), exits in 200ms accelerate. The backdrop fades in 150ms linear — opacity is the one property allowed to be linear. - **Attention direction.** On a busy dashboard, the one new alert pulses scale 1.0→1.04 with anticipation and a soft ease — motion onset pulls the eye; six blinking widgets would pull it nowhere. ## Common Pitfalls - **Linear everything.** Default `linear` timing functions make premium products feel broken. - **Bouncing everything.** Overshoot on routine navigation reads as instability; save springs for success states and play. - **Same duration for all sizes.** A tooltip and a full-screen panel in the same 300ms: the panel feels rushed, the tooltip sluggish. Scale duration with distance and size. - **Motion without purpose.** Every animation must answer: what changed, where did it come from, where did it go? If it answers nothing, cut it. - **Ignoring interruption.** Users tap mid-animation; motion that can't be interrupted or reversed feels like the UI is ignoring input. - **Animating layout properties.** Width/height/top/left animations stutter; transform/opacity composite on the GPU. ## Practice Drills 1. **Flour-sack drop.** Animate a sack falling and landing at 24fps, 3 versions: rubber, sand, lead. Only timing and squash may change. 2. **One-pose anticipation.** Take any icon action (send, delete, like) and add a 100ms anticipation + follow-through version; compare feel. 3. **Easing autopsy.** Record three apps' transitions frame by frame; identify curve type and duration in ms. 4. **Arc check.** Animate a waving arm with straight-line interpolation, then on an arc. Show both without labels and ask which looks alive. 5. **Reduced-motion pass.** Redesign your animation set as fades and instant cuts for `prefers-reduced-motion` without losing meaning. ## When to Use and Limits - **Use it when:** a task calls for motion design basics, as laid out in the Techniques and Worked Examples above. - **Watch first for:** Linear everything.; Bouncing everything.; Same duration for all sizes. (see Common Pitfalls). - **Limits:** this is a general reference drawn from public sources; it is a starting point for practice, not a full course, and attributions and dates should be checked against the cited sources before quoting them. ## Quick Reference - 12 principles: squash & stretch, anticipation, staging, straight ahead/pose to pose, follow through & overlapping, slow in/out, arcs, secondary action, timing, exaggeration, solid drawing, appeal (Thomas & Johnston, *The Illusion of Life*, 1981). | Timing = frame count; spacing = distribution. | UI durations: feedback 100–150ms, transitions 200–300ms, large moves 300–400ms; exits ≈ 75% of entrances. | Curves: enter `cubic-bezier(0,0,0.2,1)`, exit `cubic-bezier(0.4,0,1,1)`, standard `cubic-bezier(0.4,0,0.2,1)`. | Stagger: 20–50ms/item. | Animate transform + opacity only. | Always honor `prefers-reduced-motion`. --- *Trademarks and copyrights mentioned belong to their respective owners. Educational reference only; not affiliated with or endorsed by them.*