Motion Animation Library

About

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

• Bundle optimization techniques using LazyMotion (4.6 KB) and useAnimate (2.3 KB)
• SVG path morphing, line drawing, and physics-based spring animations
• Viewport-triggered and scroll-linked animation orchestration with hardware acceleration
• 117 GitHub stars
• FLIP-based layout animations and shared element transitions across routes
• Declarative API for gestures including drag, hover, tap, and pan

Use Cases

• Creating interactive drag-and-drop interfaces like Kanban boards and sortable lists
• Developing parallax hero sections and scroll-triggered content reveal effects
• Implementing smooth modal transitions and accordions with exit animations using AnimatePresence