motion-animation-patterns

Guides an agent through building UI animations with the Motion library in React and vanilla JavaScript. Covers picking the right import entry point, motion components with initial, animate and while props, tween, spring and inertia transitions, variants with staggered children, MotionValues with useScroll and useTransform, drag and hover gestures, layout and shared element transitions with layoutId, AnimatePresence and Reorder, imperative animate timelines, viewport triggers, SVG path drawing, and bundle tuning with LazyMotion. Use when the user wants to animate components, build parallax or scroll progress effects, add draggable or sortable lists, or shrink a Motion bundle. Not for CSS keyframes without Motion, other libraries such as GSAP or anime.js, or non-web platforms.

Version

v1.0.0

Size

19 KB

Updated

2026-10-06

Your client verifies the signature before reading. This explicit manual read is available on every plan. Free automatically loads five chosen skills; paid plans automatically load relevant skills across the library.