Agent skill · design visual · yonatangross
animation-motion-design
Animation and motion design patterns using Motion library (formerly Framer Motion) and View Transitions API. Use when implementing component animations, page transitions, micro-interactions, gesture-driven UIs, or ensuring motion accessibility with prefers-reduced-motion.
Why this skill is useful
Provides specific patterns and rules for implementing animations and motion design that the AI wouldn't reliably generate on its own.
What it needs
About 4k tokens when loaded. Last updated 2026-08-06. 215 stars on the source repository.
What this skill does
Animation & Motion Design Patterns for building performant, accessible animations using Motion (formerly Framer Motion, 18M+ weekly npm downloads) and the View Transitions API (cross-browser support in 2026). Covers layout animations, gesture interactions, exit transitions, micro-interactions, and motion accessibility. Quick Reference Rule File Impact When to Use ------ ------ -------- ------------- Layout Animations rules/motion-layout.md HIGH Shared layout transitions, FLIP animations, layoutId Gesture Interactions rules/motion-gestures.md HIGH Drag, hover, tap with spring physics Exit Animations rules/motion-exit.md HIGH AnimatePresence, unmount transitions View Transitions API rules/view-transitions-api.md HIGH Page navigation, cross-document transitions Motion Accessibility rules/motion-accessibility.md CRITICAL prefers-reduced-motion, cognitive load Motion Performance rules/motion-performance.md HIGH 60fps, GPU compositing, layout thrash Total: 6 rules across 3 categories Decision Table — Motion vs View Transitions API Scenario Recommendation Why ---------- --------------- ----- Component mount/unmount Motion AnimatePresence handles lifecycle Page navigation transitions View Transitions API Built-in browser support, works with any router Complex interruptible animations Motion Spring physics, gesture interruption Simple crossfade between pages View Transitions API Zero JS bundle cost Drag/reorder interactions Motion drag prop with layout animations Shared element across routes View Transitions API viewTransitionName CSS property Scroll-triggered animations Motion useInView, useScroll hooks Multi-step orchestrated sequences Motion staggerChildren, variants Quick Start Motion — Component Animation View Transitions API — Page Navigation Motion — Accessible by Default Rule Details Layout Animations (Motion) FLIP-based layout animations with the layout prop and shared layout transitions via layoutId. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills yonatangross/animation-motion-design--81b2b7