/motion-and-storytelling

name: motion-and-storytelling
description: Disney's animation principles and cinematic technique applied to UI motion. Use when designing transitions, scroll animations or onboarding motion.
metadata:
  priority: 6
  pathPatterns:
    - "**/*.css"
    - "**/*.scss"
    - "**/*.tsx"
    - "**/*.jsx"
    - "design-system/**"
    - "components/**"
  promptSignals:
    phrases:
      - "animation"
      - "transition"
      - "motion"
      - "micro-interaction"
      - "scroll animation"
      - "easing"
      - "storytelling"
      - "entrance"
      - "exit"
retrieval:
  aliases:
    - animation principles
    - disney principles
    - motion design
    - micro-interactions
    - transitions
    - cinematic ui
    - storytelling ui
  intents:
    - animate this component
    - design a transition
    - make the ui feel alive
    - add scroll animations
    - design micro-interactions
  examples:
    - animate this modal entrance
    - make this button feel more satisfying to click
    - add scroll-driven animations to this landing page
    - design the transition between these two states

Motion and Storytelling in UI

Animation and motion are not decoration — they are communication. When applied with the same discipline as typography or colour, they tell the user what is happening, where to look, and what the product feels like to use. The source material — Disney's 12 principles, cinematic language, comic book conventions — is centuries of accumulated knowledge about how to communicate through movement and sequence.

The key word is **subtlety**. In UI, motion should be felt, not watched.

---

Disney's 12 Principles Applied to UI

1. Squash and Stretch

Objects compress on impact and extend on acceleration. In UI: a button that scales down slightly on press and springs back communicates physicality and responsiveness.

button:active { transform: scale(0.96); }
button { transition: transform 80ms ease-out; }

Use sparingly — reserved for primary CTAs and satisfying confirmations.

2. Anticipation

A small preparatory movement before the main action. In UI: a menu item shifting slightly before opening, or a loading indicator appearing before a transition begins, prepares the user for what is coming.

3. Staging

Present one idea clearly at a time. In UI: entrance animations should direct attention to the new content, not compete with existing content. When a modal opens, the rest of the page dims — that is staging.

4. Straight Ahead vs Pose to Pose

**Pose to pose** — defining start and end states and letting the system interpolate — is the CSS/JS approach. Define clear initial and final states; let `transition` or a spring physics library handle the in-between.

5. Follow-Through and Overlapping Action

Elements don't all stop at the same time. In UI: staggered list item entrances (each item enters 40–60ms after the previous) feel more natural than all items appearing simultaneously.

.item:nth-child(1) { animation-delay: 0ms; }
.item:nth-child(2) { animation-delay: 50ms; }
.item:nth-child(3) { animation-delay: 100ms; }

6. Ease In and Ease Out

Nothing in nature starts or stops instantly. Use easing curves, not linear transitions.

| Easing | Use for | |---|---| | `ease-out` (fast start, slow end) | Elements entering the screen — feels natural arrival | | `ease-in` (slow start, fast end) | Elements leaving the screen — feels intentional exit | | `ease-in-out` | Elements moving between positions on screen | | Spring physics | Interactive elements that respond to touch/drag |

Never use `linear` for UI motion — it reads as mechanical and unfinished.

7. Arcs

Natural movement follows arcs, not straight lines. Tooltips and popovers that scale from their origin point (rather than fading uniformly) follow this principle. `transform-origin` matters.

8. Secondary Action

A supporting motion that reinforces the main action. In UI: an icon inside a button that shifts slightly when the button is pressed. A checkmark that draws itself after a form submission. These details reward attention without demanding it.

9. Timing

Duration is meaning. Fast = responsive, energetic. Slow = weighty, important.

| Duration | Use for | |---|---| | 80–120ms | Micro-interactions (button press, hover) | | 150–250ms | Component transitions (dropdown open, tooltip) | | 250–400ms | Page-level transitions, modal entrance | | 400–600ms | Hero animations, onboarding sequences | | > 600ms | Almost always too long — the user is waiting |

10. Exaggeration

A small, deliberate overstatement makes an action feel satisfying. In UI: a success checkmark that overshoots slightly before settling, or a notification badge that pops just slightly larger than its final size. The exaggeration is 10–15%, not theatrical.

11. Solid Drawing (Solid Design)

Respect the depth and layering of the interface. Elements should move in ways consistent with their perceived layer — a bottom sheet slides up from below because it lives below the content, not from the side. A tooltip appears near its trigger, not across the screen.

12. Appeal

The overall motion should feel right for the brand. A playful consumer app can use bouncier, springier motion. A financial tool uses precise, controlled transitions. Appeal is not decoration — it is brand personality expressed through time.

---

Cinematic Techniques

Reveal and Entrance

Content that enters the viewport has more impact when it arrives, rather than simply existing. Scroll-triggered entrance animations — a section fading up as the user scrolls into it — borrow from cinematic reveals. The key: **the content drives in from a meaningful direction** (below, because that's where the user is scrolling from).

@keyframes fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

Parallax

Background elements moving slower than foreground elements create