Motion Design
Applies motion design principles to create emotionally-driven, technically sound...
Install
npx skills add LottieFiles/motion-design-skill --skill motion-design -g -a claude-code -y- Repository
- LottieFiles/motion-design-skill2.7k
- Category
- Design
- Updated
- 6mo ago
- License
- MIT
- Context cost
- Mediumabout 2,988 tokens
- Runs scripts
- No, instructions only
What it does
Applies motion design principles to create emotionally-driven, technically sound animations and transitions. Provides timing, easing, choreography, and Disney animation principles adapted for UI. Use when creating animations, transitions, micro-interactions, loading states, page transitions, scroll-triggered effects, or any motion work. Works with CSS, Framer Motion, GSAP, Lottie, Spring, or any animation system.
Motion Design Skill
When to Apply
Use this skill when:
- Creating UI animations (buttons, cards, modals, page transitions)
- Designing micro-interactions and feedback animations
- Building loading, success, or error states
- Animating illustrations or decorative elements
- Planning scroll-triggered or progress-based animations
- Establishing brand motion identity
- Choreographing multi-element sequences
Decision tree:
- Does it serve a functional purpose (feedback, guidance)? → Timing rules for responsiveness
- Does it express brand personality? → Motion Personality archetypes
- Does it tell a story or guide attention? → Disney principles + choreography
- Is this a complex multi-element scene? → 1/3 Rule + stagger patterns
Quick Reference: 8-Step Checklist
Before creating any animation:
- Emotional target?, joy, calm, urgency, elegance
- Motion Personality?, Playful, Premium, Corporate, Energetic
- Primary property?, position, scale, rotation, opacity
- Duration?, see duration table below
- Easing family?, entrance=decelerate, exit=accelerate
- Hero element?, apply staging principles
- Secondary + ambient layers?, add richness
- 1/3 rules?, motion distance, simultaneous elements
Three Pillars (CRITICAL)
Every animation must satisfy three pillars before any technical decisions:
| Pillar | Question | Drives |
|---|---|---|
| Emotional Intent | What should the viewer FEEL? | Easing, timing, amplitude |
| Visual Narrative | What's the micro-story? | Setup → Action → Resolution |
| Motion Craft | How do we make it believable? | Physics, secondary motion, paths |
Three motion layers (flat animation = missing layers):
- Primary: Main action the viewer follows
- Secondary: Supporting richness (shadows, icons shifting)
- Ambient: Background life (gradients, subtle pulses)
Deep dive: director/core-philosophy.md
