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
Decision gist · record as of 2026-03-14
Motion Design Patterns provides ready-to-use React animation recipes for springs, staggers, layout shifts, and micro-interactions. 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.
Use it when
- Motion Design Patterns covers springs, staggered lists, layout animations, exit effects, hover interactions, scroll-triggered reveals.
- Motion Design Patterns teaches animation principles through practical UI interaction patterns.
Similar skills
Install
dylanfeltus/skills/motion-design-patterns
generated, unverified - the skill's exact subdirectory could not be determined; check the repository on GitHub
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently 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.
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Find motion design patterns and animation guidelines”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
Aceternity UI is a production-ready component library offering 100+ animated, interactive React elements designed for Next.js applications. Built with Tailwind CSS and Framer Motion, it includes hero sections, parallax effects, 3D cards, and background animations—all installable via shadcn CLI with full source code access for customization.
Motion React lets you build fluid animations and interactive effects in React applications using declarative components and hooks. Animate on gestures (drag, hover, tap), scroll events, and layout changes with spring physics, keyframes, and exit animations via AnimatePresence.
This skill provides a complete design system for React applications, featuring Tailwind configuration, reusable component patterns, and dark mode support. It covers visual effects like glassmorphism and GPU-accelerated animations via Framer Motion, plus accessibility patterns including focus states and skip links.
Set visual tone, brand identity, and composition strategy for HyperFrames projects through design specs, style presets, and beat planning. This skill handles palettes, typography, narration pacing, and audio-reactive direction while delegating motion patterns and transitions to hyperframes-animation.
Hyperframes Creative directs the visual and narrative layer of HyperFrames videos, covering brand identity, color palettes, typography, composition patterns, beat planning, and audio-reactive design. It works alongside hyperframes-core for technical setup and hyperframes-animation for motion, providing design specs, style presets, and production-ready composition guidance.
r3f-animation simplifies working with motion and keyframe sequences in React Three Fiber scenes. It provides utilities to drive animations through the render loop and load pre-built animation clips from GLTF models, letting you focus on creative timing rather than low-level graphics code.
More skills laravel-inertia-react (MIT) · Animated Diagram (unlicensed)