motion-designer
dylantarre/animation-principles
Apply Disney's 12 animation principles to design expressive, purposeful motion systems and UI animations.
What is motion-designer?
A motion design framework grounded in Disney's 12 principles for creating organic, meaningful movement. Use this when designing animation specifications, visual motion systems, or guiding designers on crafting animations that communicate and delight.
- Apply squash and stretch to preserve volume and add personality to movement
- Use anticipation and staging to build expectation and direct viewer attention
- Implement follow-through, overlapping action, and arcs for natural, fluid motion
- Control timing and easing curves to convey weight, emotion, and pacing
- Layer secondary actions and exaggeration to reinforce primary movement without distraction
- Create motion style guides and timing specifications for developer handoff
How to install motion-designer
npx skills add https://github.com/dylantarre/animation-principles --skill motion-designerHow to use motion-designer
- 1.Reference the 12 principles as a mental checklist when designing any motion
- 2.Sketch key poses first (pose-to-pose approach) or frame-by-frame (straight-ahead) depending on motion type
- 3.Apply easing curves and timing to convey weight and emotion
- 4.Add secondary actions and overlapping motion to reinforce the primary action
- 5.Create motion style guides or After Effects reference animations for handoff to developers
- 6.Test animations at different speeds and include reduced-motion variants
Use cases
- Designing UI animations for buttons, drawers, and transitions with personality
- Creating character animation and mascot movement specifications
- Developing motion style guides with easing curves for design systems
- Specifying timing and secondary actions for complex choreographed sequences
- Building reduced-motion alternatives for accessibility compliance
- Motion designers and animators
- UI/UX designers creating interactive experiences
- Design system maintainers documenting animation standards
- Product teams needing animation specifications for developers
motion-designer FAQ
Use straight-ahead (frame-by-frame) for fluid, unpredictable motion like fire or water effects. Use pose-to-pose for precise, choreographed sequences where you key positions first, then fill in-betweens.
Match exaggeration to context and brand voice. Subtle exaggeration for UI (around 110% scale) feels refined; bold exaggeration for character animation (stretched limbs, squashed faces) feels playful and expressive.
Use arcs instead of linear paths, apply ease-in and ease-out curves, add follow-through and overlapping action, and vary timing for contrast. Living things move in curves, not straight lines.
Provide motion style guides with easing curves, timing specifications in milliseconds, reference animations in After Effects or Principle, and reduced-motion alternatives for accessibility.
Secondary action is supporting movement that reinforces the primary action—like a coat swaying while a character walks, or a shadow breathing while a card opens. It adds depth and naturalism without distracting from the main motion.
Full instructions (SKILL.md)
Source of truth, from dylantarre/animation-principles.
name: motion-designer description: Use when designing visual motion systems, creating animation specifications, or when a designer needs guidance on crafting beautiful, meaningful movement.
Motion Designer: Visual Animation Craft
You are a motion designer creating expressive, purposeful movement. Apply Disney's 12 principles to craft animations that communicate and delight.
The 12 Principles for Motion Design
1. Squash and Stretch
The soul of organic movement. Compress on impact, elongate during speed. Preserve volume—wider means shorter. Use for characters, UI elements with personality, brand mascots.
2. Anticipation
Wind-up before action. A button recoils before launching navigation. A drawer shrinks before expanding. Anticipation builds expectation and makes actions feel intentional.
3. Staging
Composition through motion. Use scale, position, focus, and timing to direct the viewer's eye. Clear the stage before introducing new elements. One clear idea per scene.
4. Straight Ahead vs Pose to Pose
Straight ahead: Draw frame-by-frame for fluid, unpredictable motion. Ideal for fire, water, organic effects. Pose to pose: Key positions first, then in-betweens. Precise control for choreographed sequences.
5. Follow Through and Overlapping Action
Nothing stops at once. Hair trails the head, fabric follows the body. Stagger element arrivals—faster elements lead, heavier ones lag. Creates rhythm and naturalism.
6. Slow In and Slow Out
Ease into and out of poses. More frames near keyframes, fewer in motion. Bezier curves control this feel. Sharp curves = snappy. Gentle curves = graceful.
7. Arc
Living things move in curves. Avoid robotic linear paths. Pendulum swings, hand gestures, eye movements—all arcs. Even UI elements feel more natural on curved paths.
8. Secondary Action
Supporting movements that reinforce the primary action. While a character walks (primary), their coat sways (secondary). While a card opens, a shadow breathes. Adds depth without distraction.
9. Timing
The heartbeat of animation. Fast timing = light, agile, comedic. Slow timing = heavy, dramatic, weighted. Vary timing for contrast. Consistent timing creates rhythm.
10. Exaggeration
Push beyond reality for clarity and impact. Subtle exaggeration for UI: 110% scale. Bold exaggeration for character: stretched limbs, squashed faces. Match exaggeration to brand voice.
11. Solid Drawing
Understand form, weight, and volume. Even 2D motion should feel three-dimensional. Maintain consistent perspective. Avoid "twins"—asymmetry adds life.
12. Appeal
The charisma of design. Clear shapes, balanced proportions, appealing movement quality. Not just "pretty"—captivating. The viewer should want to keep watching.
Design Deliverables
- Motion style guides with easing curves
- Timing specifications for developer handoff
- Reference animations in After Effects or Principle
- Reduced motion alternatives
Related skills
More from dylantarre/animation-principles and the wider catalog.
video-motion-graphics
Apply Disney's 12 animation principles to After Effects and Premiere Pro motion graphics.
framer-motion
Implement Disney's 12 animation principles in React using Framer Motion's declarative API.
micro-interactions
Apply Disney's 12 animation principles to small UI feedback moments like buttons, toggles, and form validation.
mobile-touch
Apply Disney's 12 animation principles to iOS/Android gestures, haptics, and native mobile motion.
dt-alerting
Configure Dynatrace alerting end-to-end: detectors, Grail event storage, problem grouping, and workflow notifications.
dt-app-dashboards
Create, modify, and analyze Dynatrace dashboards with JSON tiles, layouts, DQL queries, and variables.