Motion Design Patterns
Motion Design Patterns teaches you how to build polished React animations with Motion, covering springs, staggered lists, layout animations, exit effects, hover interactions, scroll-triggered reveals, and page transitions. Each pattern includes tuned spring configs and anti-patterns to avoid janky motion.
Motion Design Patterns provides ready-to-use React animation recipes for springs, staggers, layout shifts, and micro-interactions.
AI-generated summary based on this skill's SKILL.md
Install
dylanfeltus/skills/motion-design-patterns
git clone https://github.com/dylanfeltus/skills
cp -r skills ~/.claude/skills/motion-design-patternsgenerated, unverified - the skill's exact subdirectory could not be determined; check the repository on GitHub
npx skillfed install dylanfeltus/skills/motion-design-patternsFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
What are motion design patterns and how does Motion Design Patterns help?
Motion Design Patterns teaches you how to build polished React animations with Motion, covering springs, staggered lists, layout animations, exit effects, hover interactions, scroll-triggered reveals, and page transitions. Each pattern includes tuned spring configs and anti-patterns to avoid janky motion.
What animation patterns for design does Motion Design Patterns cover?
Motion Design Patterns covers springs, staggered lists, layout animations, exit effects, hover interactions, scroll-triggered reveals, and page transitions. Each pattern is equipped with tuned spring configurations and guidance on anti-patterns to help you avoid janky motion in your React applications.
How can I learn animation principles for UI interactions?
Motion Design Patterns teaches animation principles through practical UI interaction patterns. You'll learn how to implement hover interactions, transition animations, and scroll-triggered reveals with proper spring configurations that create smooth, polished motion instead of jarring effects.
Where can I find motion design reference and examples?
Motion Design Patterns provides a comprehensive reference with tuned spring configs and real examples for each pattern type. The skill includes layout animations, exit effects, staggered lists, and page transitions—all with anti-patterns highlighted so you understand what to avoid.
What are the best practices for creating motion animations?
Motion Design Patterns emphasizes tuned spring configurations, proper timing for staggered effects, and understanding anti-patterns that create janky motion. Best practices include using appropriate spring settings for different interaction types and avoiding common pitfalls in hover interactions and page transitions.