Career guide

Motion & Interaction Design

Create purposeful animation that communicates state, guides attention, and adds continuity to interfaces

Explore the study outline

01 / About this guide

Skills to build.
Work to practice.

Motion design in product contexts is not decoration — it is an architectural concern that communicates hierarchy, provides feedback, indicates status, and adds character. This path covers Disney's 12 principles mapped to UI, platform motion frameworks (Material Design 3, Apple HIG), code-based animation with CSS/GSAP/Framer Motion, motion token systems, accessibility via prefers-reduced-motion, and performance optimization.

Skills you’ll develop

  • Animation Principles
  • CSS Transitions & Animations
  • GSAP & Web Animation API
  • After Effects & Rive
  • Motion Tokens
  • Accessible Animation
  • Performance Optimization

What to work toward

  • Apply Disney's animation principles selectively to UI (timing, easing, anticipation, staging)
  • Choose the right tool for each context: CSS, GSAP, Framer Motion, Rive, or After Effects
  • Build a motion token system with named durations, easing curves, and choreography patterns
  • Implement accessible animation with prefers-reduced-motion fallbacks
  • Optimize animation performance: compositor-only properties, GPU layers, requestAnimationFrame
  • Create motion specs that developers can implement from token values

Before you begin

  • Proficiency with a design tool (Figma, After Effects, or similar)
  • Basic understanding of UI design patterns and component states
  • Interest in animation and interactive experiences
  • Some familiarity with CSS transitions or basic code is helpful but not required

02 / Study outline

Choose a topic.
Put it to work.

These 6 modules outline the topics to study. Follow the suggested order or start with a gap in your current work. Linked exercises include instructions, deliverables, and review criteria.

  1. 01

    Animation Principles for UI

    3 weeks

    Map Disney's 12 principles to interface contexts, learn platform frameworks, and understand when motion helps vs. hurts

    • Disney's 12 Principles in UI: Timing, Easing, Anticipation, Follow-Through, Staging, Appeal
    • Principles That Need Caution: Squash & Stretch, Exaggeration, and Arcs in Interfaces
    • The UX in Motion Manifesto: Realtime vs. Non-Realtime Motion
    • Material Design 3 Motion: Informative, Focused, and Expressive Principles
    • Apple HIG Motion: Purposeful, Quick & Precise, and Optional
    • NNGroup Duration Research: 100ms for Feedback, 100-300ms for Transitions, 500ms Max
  2. 02

    Motion Design Tooling

    3 weeks

    Navigate the tool landscape from exploration through production, and know when to use code vs. visual tools

    • After Effects for Motion Exploration, Prototyping, and Storyboarding
    • Rive: Interactive Animation for Web, iOS, and Android with State Machines
    • Figma Smart Animate, Prototype Animations, and Motion Handoff
    • Lottie: After Effects to Lightweight JSON Animation
    • Tool Selection Framework: Fidelity, Interactivity, and Platform Constraints
    • Exporting Motion Specs: Easing Values, Durations, and Choreography Documentation
  3. 03

    Code-Based Animation

    4 weeks

    Implement animations in code — CSS for simple transitions, GSAP for complex sequences, Framer Motion for React

    • CSS Transitions, @keyframes, Custom Properties, and transition-behavior
    • GSAP Fundamentals: Timelines, ScrollTrigger, Stagger, and SplitText
    • Framer Motion: Layout Animations, AnimatePresence, and Spring Physics
    • Web Animation API: KeyframeEffect, Animation, and Programmatic Control
    • SVG Animation: Path Drawing, Morphing, and Line Animation
    • Spring Physics: Mass, Stiffness, Damping — When to Use Springs vs. Easing Curves

    Put this into practice

    GSAP Scroll Animation
  4. 04

    Motion Token Systems

    3 weeks

    Build a systematic motion language with tokens that scale across a design system — durations, easings, delays, and choreography

    • Duration Token Scales: 50ms, 100ms, 150ms, 200ms, 300ms, 400ms, 500ms Increments
    • Easing Token Categories: Emphasized, Standard, Decelerate, Accelerate (M3 Model)
    • Custom Cubic-Bezier Curves: Defining Brand-Specific Motion Character
    • Choreography Patterns: Stagger, Cascade, Sequential, and Parallel
    • Interaction Patterns: Enter, Exit, Morph, Feedback, and Persistent Motion
    • prefers-reduced-motion: Graceful Degradation, Not Just Disabling All Animation
    • Documenting Motion Standards: Specs, Demos, and Usage Guidelines

    Put this into practice

    Build a Motion Token Scale
  5. 05

    Performance & Accessibility

    2 weeks

    Optimize animations for smooth 60fps rendering and ensure they work for everyone

    • Compositor-Only Properties: transform and opacity for GPU-Accelerated Animation
    • will-change, contain, and content-visibility for Rendering Hints
    • requestAnimationFrame vs. setTimeout: Proper Animation Loops
    • Layout Thrashing: Why Animating width/height/top/left Causes Jank
    • Vestibular Disorders and Motion Sensitivity: Medical Context for Reduced Motion
    • Testing Motion: Chrome DevTools Animation Panel and Performance Profiler

    Put this into practice

    Reduced Motion Audit
  6. 06

    Portfolio & Career

    2 weeks

    Showcase motion work effectively and position yourself for motion-focused design roles

    • Recording Animation Work: Screen Capture, GIF, Video, and Interactive Demos
    • Motion Case Studies: Rationale, Before/After, and Impact Measurement
    • Motion in Design Systems Roles: Defining How a Product Moves
    • Adjacent Paths: Motion Design → Design Engineering → Creative Technology

03 / Reading and exercises

Read. Try.
Make it your own.

Published articles, book recommendations, and practical projects that support this guide.

  • book

    The Illusion of Life — Thomas & Johnston

    The Disney animation bible. The 12 principles that underpin all animation work, including UI motion.

    Find the book

  • article

    Material Design 3: Motion Specifications

    Google's complete motion token system — easing curves, duration scales, and transition patterns.

    Read on the source site

  • article

    Apple HIG: Motion Guidelines

    Apple's principles for purposeful, accessible motion across iOS, macOS, and visionOS.

    Read on the source site

  • exercise

    GSAP Scroll Animation

    Build a scroll-triggered animation sequence with GSAP ScrollTrigger and staggered reveals.

    Try the exercise

  • exercise

    Build a Motion Token Scale

    Define duration, easing, and delay tokens following Material Design 3's token model.

    Try the exercise

  • exercise

    Reduced Motion Audit

    Audit a page for motion and implement meaningful prefers-reduced-motion alternatives.

    Try the exercise

Start with
one exercise.

GSAP Scroll Animation