Implements sophisticated, production-grade React animations and gestures using the declarative Motion library.
This skill provides specialized guidance for building high-performance React animations using Motion (formerly Framer Motion), covering everything from basic transitions and gestures to complex scroll-linked effects and shared element transitions. It empowers developers to orchestrate intricate UI interactions, optimize bundle sizes via LazyMotion, and resolve common integration challenges with Next.js, Tailwind CSS, and Cloudflare Workers while maintaining hardware acceleration and accessibility standards.
Key Features
01Bundle optimization techniques using LazyMotion (4.6 KB) and useAnimate (2.3 KB)
02SVG path morphing, line drawing, and physics-based spring animations
03Viewport-triggered and scroll-linked animation orchestration with hardware acceleration
04117 GitHub stars
05FLIP-based layout animations and shared element transitions across routes
06Declarative API for gestures including drag, hover, tap, and pan
Use Cases
01Creating interactive drag-and-drop interfaces like Kanban boards and sortable lists
02Developing parallax hero sections and scroll-triggered content reveal effects
03Implementing smooth modal transitions and accordions with exit animations using AnimatePresence
