What is the difference between Motion and Framer Motion?

Motion is the rebranded version of Framer Motion (v11+), now utilizing the 'motion/react' package for better integration and performance.

Does this skill support accessibility preferences?

Yes, it includes patterns to automatically respect 'reduced motion' settings using MotionConfig or the useReducedMotion hook to ensure a comfortable experience for all users.

Why does this skill emphasize animating transforms?

Animating transform properties (x, y, scale) and opacity allows the browser to use GPU acceleration, ensuring smooth 60fps animations without causing layout reflows.

How are exit animations handled?

Exit animations require wrapping components in 'AnimatePresence' and providing unique keys to direct children so they can animate before being removed from the DOM.

When should I use variants instead of basic props?

Variants should be used for complex UI states, reusable animation sets, or when you need to orchestrate timing (like staggering) between multiple child elements.

Motion Animation Patterns for React

Name: Motion Animation Patterns for React
Author: agents-inc

byagents-inc

•

Design Tools

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

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