Motion Designer
- 1.1k installs
- 63 repo stars
- Updated December 30, 2025
- dylantarre/animation-principles
motion-designer is a design skill that applies Disney's 12 animation principles to UI transitions and motion specs for developers and designers building expressive interface movement.
About
motion-designer is a dylantarre/animation-principles skill for visual motion systems, animation specifications, and meaningful UI transitions. The guide maps Disney's 12 principles—squash and stretch, anticipation, staging, and related craft rules—to interface work such as button recoil before action, volume-preserving squash on impact, and brand-forward mascot motion. Developers and designers invoke motion-designer when drafting CSS, Framer Motion, or design-handoff specs that must communicate state changes clearly instead of adding decorative easing. The skill emphasizes purposeful movement that delights while staying readable across components and marketing surfaces.
- Applies all 12 classic Disney animation principles to digital interfaces and experiences
- Guides creation of expressive, purposeful movement that communicates clearly and delights users
- Covers Squash and Stretch, Anticipation, Staging, Straight Ahead vs Pose to Pose, Follow Through, Slow In and Slow Out,
- Produces animation specifications ready for implementation in code or design tools
- Helps craft brand-aligned motion systems for characters, UI elements, and interactive components
Motion Designer by the numbers
- 1,149 all-time installs (skills.sh)
- +70 installs in the week ending Jul 29, 2026 (Skillselion tracking)
- Ranked #358 of 1,888 Design & UI/UX skills by installs in the Skillselion catalog
- Security screen: MEDIUM risk (skills.sh audit)
- Data as of Jul 30, 2026 (Skillselion catalog sync)
npx skills add https://github.com/dylantarre/animation-principles --skill motion-designerAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 1.1k |
|---|---|
| repo stars | ★ 63 |
| Security audit | 3 / 3 scanners passed |
| Last updated | December 30, 2025 |
| Repository | dylantarre/animation-principles ↗ |
How do you apply animation principles to UI motion design?
Get expert guidance applying Disney's 12 principles when creating animation systems, motion specs, or UI transitions.
Who is it for?
Frontend developers and designers specifying UI animations who want principle-driven motion instead of arbitrary easing.
Skip if: 3D character rigging pipelines or game engine animation blueprints outside UI motion scope.
When should I use this skill?
A task designs UI transitions, motion systems, or animation specs needing structured craft guidance.
What you get
Motion specifications, transition timing notes, and principle-backed UI animation guidance.
- Animation specifications
- UI transition guidance
By the numbers
- Covers Disney's 12 animation principles for motion design
Files
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
Frontend DesignGenerate distinctive, production-grade frontend interfaces and components that avoid generic AI aesthetics.698k164k
Web Design GuidelinesAutomatically audit frontend code against the latest Vercel Web Interface Guidelines for consistency, accessibility, and UX quality.486k29.4k
Lark WhiteboardGenerate valid Lark Whiteboard (Feishu Board) documents with correctly placed connectors, automatic routing, and proper schema compliance directly from agent inst382k15.8k
Sleek Design Mobile AppsGenerate mobile app screens and UI from plain English descriptions using the Sleek.design API.315k470
Design Taste FrontendOverride generic LLM frontend output with intentional, metric-driven UI/UX taste.284k66.9k
Ui Ux Pro MaxGet instant, high-quality UI/UX decisions, component recommendations, style guidance, and code improvements across web and mobile projects.282k109kHow it compares
Use motion-designer over generic CSS animation tips when specs need principle-based rationale for UX motion decisions.
FAQ
What principles does motion-designer teach?
motion-designer teaches Disney's 12 animation principles—including squash and stretch, anticipation, and staging—applied to UI elements, transitions, and brand motion specifications.
When should motion-designer be invoked?
motion-designer fits tasks designing visual motion systems, animation specifications, or UI transitions where movement must communicate state rather than decorate statically.
Is Motion Designer safe to install?
skills.sh reports 3 of 3 security scanners passed. Review the Security Audits panel on this page before installing in production.