Implements declarative, high-performance web animations using Motion (formerly Framer Motion) for React applications.
This skill provides specialized guidance for implementing Motion in React projects, focusing on declarative animation props and GPU-optimized patterns. It covers the full spectrum of modern web animation, including variant-based orchestration, physics-driven spring transitions, and complex layout animations using the FLIP technique. By strictly adhering to performance best practices—such as animating transforms over layout properties and ensuring accessibility through reduced motion support—it enables the creation of fluid, production-grade user interfaces that feel natural and responsive.
Key Features
01Advanced layout animations and shared element transitions (FLIP)
02Scroll-driven interactions including parallax and reveal effects
03Declarative animation using motion components, variants, and props
04GPU-accelerated performance via transform and opacity optimizations
05Orchestrated sequences with parent-child stagger and timing control
065 GitHub stars
Use Cases
01Implementing complex shared-element transitions between UI states or pages
02Creating accessible, physics-based gesture interactions for mobile-friendly web apps
03Building interactive dashboards with fluid component presence and entry animations