animation-motion-design

Solid

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.

Web & Frontend 180 stars 15 forks Updated today MIT

Install

View on GitHub

Quality Score: 86/100

Stars 20%
75
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
50
License 10%
100
Description 5%
100

Skill Content

# 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 crossf...

Details

Author
yonatangross
Repository
yonatangross/orchestkit
Created
5 months ago
Last Updated
today
Language
TypeScript
License
MIT

Integrates with

LangChain · AI FastAPI · Backend

Similar Skills

Semantically similar based on skill content — not just same category

Web & Frontend Listed

080104-motion-animation

Motion design and animation: timing, easing, spring physics, micro-interactions, reduced motion, and performance for frontend interfaces.

1 Updated yesterday
natuleadan
Web & Frontend Solid

motion

Motion (Framer Motion) React animation library. Use for drag-and-drop, scroll animations, gestures, SVG morphing, or encountering bundle size, complex transitions, spring physics errors.

162 Updated 2 weeks ago
secondsky
Web & Frontend Listed

ai-animation

Designs motion, transitions, and micro-interactions for UI components: spring animations, gestures, easing, staggers — taste-driven detail compounding. Trigger for 'animate this', 'add transitions', 'micro-interactions for', 'gesture design', 'swipe to dismiss', 'easing for this', 'stagger the'. Not for design systems; use /ai-design instead. Not for visual art; use /ai-visual instead. Not for testing animation code; use /ai-test instead.

49 Updated today
arcasilesgroup
Web & Frontend Listed

framer-motion

Comprehensive Framer Motion animation library for React. Covers motion components, variants, gestures, page transitions, and scroll animations. Use when adding animations to React/Next.js applications.

335 Updated today
aiskillstore
AI & Automation Solid

animation-patterns

Framer Motion patterns, page transitions, skeleton loading, scroll-linked animations, and gesture-based interactions for React.

496 Updated 1 months ago
vibeeval