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 208 stars 20 forks Updated today MIT

Install

View on GitHub

Quality Score: 88/100

Stars 20%

Recency 20%

100

Frontmatter 20%

Documentation 15%

100

Issue Health 10%

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: 6 months ago
Last Updated: today
Language: TypeScript
License: MIT

Integrates with

Anthropic · AI LangChain · AI FastAPI · Backend

Similar Skills

Semantically similar based on skill content — not just same category

Web & Frontend Solid

design-motion

Design and implement purposeful motion — micro-interactions, page transitions, scroll animations, and hover effects — using Framer Motion, CSS animations, and GSAP. Use when the user says "add animation", "make it feel alive", "micro-interaction", "page transition", "scroll animation", "hover effect", or "motion design". Outputs performance-safe, reduced-motion-aware animation code. Pairs with design-frontend, enhance-web-ui. Do NOT use for layout, typography, or purely functional UI work.

6 Updated 3 days ago

kensaurus

Web & Frontend Listed

motion

Build sophisticated React animations with Motion (formerly Framer Motion) - declarative animations, gestures (drag, hover, tap), scroll effects, spring physics, layout animations, and SVG manipulation. Optimize bundle size with LazyMotion (4.6 KB) or useAnimate mini (2.3 KB). Use when: adding drag-and-drop interactions, creating scroll-triggered animations, implementing modal dialogs with transitions, building carousels with momentum, animating page/route transitions, creating parallax hero sections, implementing accordions with smooth expand/collapse, or optimizing animation bundle sizes. For simple list animations, use auto-animate skill instead (3.28 KB vs 34 KB). Troubleshoot: AnimatePresence exit not working, large list performance issues, Tailwind transition conflicts, Next.js "use client" errors, scrollable container layout issues, or Cloudflare Workers build errors (resolved Dec 2024).

1 Updated 4 days ago

NafisRayan

Web & Frontend Solid

motion-design

Restrained, accessible web motion — Framer Motion declarative patterns and CSS-only staggered reveals for high-impact moments, always bundle-aware and reduced-motion-safe. Use when adding animation/transitions to a UI (entrance reveals, list stagger, page/route transitions, micro-interactions) or when motion feels janky, heavy, or gratuitous.

24 Updated today

nguyenthienthanh