# Motion Design

Applies motion design principles to create emotionally-driven, technically sound...

- Repository: https://github.com/LottieFiles/motion-design-skill (2687 stars)
- Category: Design
- License: MIT
- Last updated: 2026-05-18
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add LottieFiles/motion-design-skill --skill motion-design -g -a claude-code -y`
Codex: `npx skills add LottieFiles/motion-design-skill --skill motion-design -g -a codex -y`
Cursor: `npx skills add LottieFiles/motion-design-skill --skill motion-design -g -a cursor -y`
Gemini CLI: `npx skills add LottieFiles/motion-design-skill --skill motion-design -g -a gemini-cli -y`

## Description

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.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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:**
1. Does it serve a functional purpose (feedback, guidance)? → Timing rules for responsiveness
2. Does it express brand personality? → Motion Personality archetypes
3. Does it tell a story or guide attention? → Disney principles + choreography
4. Is this a complex multi-element scene? → 1/3 Rule + stagger patterns

---

## Quick Reference: 8-Step Checklist

Before creating any animation:

1. **Emotional target?**, joy, calm, urgency, elegance
2. **Motion Personality?**, Playful, Premium, Corporate, Energetic
3. **Primary property?**, position, scale, rotation, opacity
4. **Duration?**, see duration table below
5. **Easing family?**, entrance=decelerate, exit=accelerate
6. **Hero element?**, apply staging principles
7. **Secondary + ambient layers?**, add richness
8. **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](director/core-philosophy.md)

The rest: https://github.com/LottieFiles/motion-design-skill/blob/HEAD/skills/motion-design/SKILL.md