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 179 stars 15 forks Updated today MIT

Install

View on GitHub

Quality Score: 86/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: 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 3 days ago

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.

160 Updated 2 weeks ago

secondsky

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.

495 Updated 1 months ago

vibeeval

Web & Frontend Listed

animations

Authors performant web animations CSS-first AND brainstorms the right feedback for an interaction via a verb-to-motion catalog. Covers GPU-safe properties, modern primitives (@starting-style, interpolate-size), View Transitions, scroll-driven timelines, state-choreography morphs, React state (Motion, AnimatePresence), advanced effects (Liquid Glass, glow, 3D tilt), external engines (Lottie, Rive), React Three Fiber, prefers-reduced-motion, AND perceived performance (skeleton loaders, optimistic UI, loader floor, predictive prefetch, stale-while-revalidate). Use when building transitions, hover effects, route changes, when an animation feels janky, when deciding what feedback an interaction should have, or when the app needs to feel snappier. Triggers on "animate this", "fade in", "hover effect", "liquid glass", "lottie", "rive", "ideal feedback", "how should X feel", "skeleton loader", "perceived performance", "feel faster", "optimistic UI", "/animations".

4 Updated yesterday

mthines