# motiondivision/motion

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/motiondivision-motion).**

31,047 stars · 1,091 forks · TypeScript · mit

## Links

- GitHub: https://github.com/motiondivision/motion
- Homepage: https://motion.dev
- awesome-repositories: https://awesome-repositories.com/repository/motiondivision-motion.md

## Topics

`animation` `animation-js` `motion` `react` `reactanimations` `spring`

## Description

Motion is a high-performance animation library that provides a unified, declarative architecture for managing visual transitions and motion states across web interfaces. By utilizing a lightweight engine, it allows developers to define complex animations through component properties rather than manual DOM manipulation, ensuring consistent behavior across various component-based frameworks and vanilla JavaScript environments.

The library distinguishes itself through a sophisticated physics-based motion engine that simulates natural movement using mass, damping, and stiffness parameters. It includes advanced orchestration capabilities such as layout projection, which automatically corrects visual distortion during size or position changes, and shared element reconciliation to maintain continuity across different visual contexts. Developers can also leverage compile-time generation tools that transform complex spring physics into native CSS, effectively eliminating runtime overhead for high-performance requirements.

Beyond core transitions, the project provides a comprehensive toolkit for interactive experiences, including gesture-driven input handling, scroll-linked effects, and viewport-aware triggers. It supports detailed control over vector graphics, staggered sequences, and multi-step keyframe paths, all while maintaining type safety. The library includes integrated performance auditing and real-time editing utilities to help developers profile and refine motion characteristics directly within their development environment.

## Tags

### Graphics & Multimedia

- [Animation Engines](https://awesome-repositories.com/f/graphics-multimedia/animation-engines.md) — The animation library provides a lightweight, high-performance engine that manages complex motion paths and state-driven transitions within standard web development environments. ([source](https://github.com/motiondivision/motion))
- [Web Animation Libraries](https://awesome-repositories.com/f/graphics-multimedia/web-animation-libraries.md) — The animation library animates CSS properties, SVG attributes, and hardware-accelerated values to create smooth visual transitions across various interface components and complex data structures. ([source](https://motion.dev/docs/quick-start))
- [Animation Sequences](https://awesome-repositories.com/f/graphics-multimedia/animation-sequences.md) — Provides automated staggering of animation start times to create sequential visual effects across groups of elements. ([source](https://motion.dev/docs/quick-start))
- [SVG Animation Libraries](https://awesome-repositories.com/f/graphics-multimedia/svg-animation-libraries.md) — Performs smooth panning and zooming effects by programmatically animating the viewBox attribute of SVG elements. ([source](https://motion.dev/docs/react-svg-animation))
- [Vector Animations](https://awesome-repositories.com/f/graphics-multimedia/vector-animations.md) — The animation library creates fluid transitions between different vector icons or illustrations by animating the path data attribute between similar shapes. ([source](https://motion.dev/docs/react-svg-animation))
- [Animation Timing Controls](https://awesome-repositories.com/f/graphics-multimedia/animation-timing-controls.md) — The animation library allows configuration of animation duration, easing curves, and physics-based spring dynamics to achieve precise control over the motion characteristics of any animated value. ([source](https://motion.dev/docs/quick-start))
- [Vector Animation Libraries](https://awesome-repositories.com/f/graphics-multimedia/vector-animation-libraries.md) — Creating fluid transitions for SVG elements by morphing paths, animating stroke offsets, and manipulating coordinate systems for high-quality visuals.

### User Interface & Experience

- [Animation Frameworks](https://awesome-repositories.com/f/user-interface-experience/animation-frameworks.md) — A unified animation architecture that provides consistent motion capabilities across multiple component-based web frameworks and vanilla JavaScript environments.
- [Animation Libraries](https://awesome-repositories.com/f/user-interface-experience/animation-libraries.md) — The animation library describes motion states and transitions using a clear, readable syntax that separates animation logic from the underlying component structure. ([source](https://motion.dev/docs))
- [Orchestrated Motion](https://awesome-repositories.com/f/user-interface-experience/orchestrated-motion.md) — The animation library coordinates synchronized motion across parent and child elements by propagating named animation states through the component tree. ([source](https://motion.dev/docs/react-animation))
- [Component Transitions](https://awesome-repositories.com/f/user-interface-experience/component-transitions.md) — The animation library animates interface components using a dedicated integration that provides smooth, declarative motion effects and transitions throughout the component lifecycle. ([source](https://github.com/motiondivision/motion))
- [Declarative Animation Frameworks](https://awesome-repositories.com/f/user-interface-experience/declarative-animation-frameworks.md) — Defining complex motion and visual transitions using simple component properties rather than manually managing imperative animation state changes.
- [Physics-Based Animation Engines](https://awesome-repositories.com/f/user-interface-experience/physics-based-animation-engines.md) — Simulates fluid movement using mass, damping, and stiffness parameters to create natural and realistic interface interactions.
- [Component Transition Effects](https://awesome-repositories.com/f/user-interface-experience/component-transition-effects.md) — The animation library defines initial and target states to automatically animate component properties as they enter the viewport, creating smooth visual transitions for new content. ([source](https://motion.dev/docs/react))
- [Declarative Animation Libraries](https://awesome-repositories.com/f/user-interface-experience/declarative-animation-libraries.md) — A programming interface that defines visual transitions and motion states through component properties rather than manual DOM manipulation.
- [Interaction Animations](https://awesome-repositories.com/f/user-interface-experience/interaction-animations.md) — The animation library provides clear visual feedback for interactive components like buttons or text inputs by animating elements to a specific state upon receiving focus. ([source](https://motion.dev/docs/react-motion-component))
- [Layout Animation Engines](https://awesome-repositories.com/f/user-interface-experience/layout-animation-engines.md) — Ensuring smooth visual movement when elements change size, position, or order within a page layout without manual coordinate calculations.
- [Layout Transition Engines](https://awesome-repositories.com/f/user-interface-experience/layout-transition-engines.md) — The animation library connects separate elements using a shared identifier to trigger automatic crossfade or movement animations when components transition between different pages or states. ([source](https://motion.dev/docs/react-layout-animations))
- [Layout Transition Libraries](https://awesome-repositories.com/f/user-interface-experience/layout-transition-libraries.md) — The animation library corrects visual distortion during size, position, or reordering updates by applying layout properties that maintain a polished and consistent user interface. ([source](https://motion.dev/docs/react))
- [Shared Element Transitions](https://awesome-repositories.com/f/user-interface-experience/shared-element-transitions.md) — Tracks components across different states or pages using unique identifiers to automatically animate transitions between distinct visual contexts.
- [State Orchestration Libraries](https://awesome-repositories.com/f/user-interface-experience/state-orchestration-libraries.md) — Manages complex animation sequences by propagating named state objects through component trees to synchronize parent and child motion.
- [Viewport Animation Libraries](https://awesome-repositories.com/f/user-interface-experience/viewport-animation-libraries.md) — Triggers animations and callbacks automatically when elements enter or exit the viewport using configurable detection thresholds. ([source](https://motion.dev/docs/react-motion-component))
- [Gesture Interaction Frameworks](https://awesome-repositories.com/f/user-interface-experience/gesture-interaction-frameworks.md) — Captures pointer events and velocity data to map user input directly to animated properties for responsive and interactive interface feedback.
- [Gesture Interaction Libraries](https://awesome-repositories.com/f/user-interface-experience/gesture-interaction-libraries.md) — A set of primitives for capturing and responding to pointer events like dragging, panning, and tapping with built-in momentum and constraints.
- [Physics Engines](https://awesome-repositories.com/f/user-interface-experience/physics-engines.md) — The animation library calculates movement using mass, damping, and stiffness parameters to produce natural, fluid, and realistic interface interactions. ([source](https://motion.dev/docs))
- [Gesture Recognition Libraries](https://awesome-repositories.com/f/user-interface-experience/gesture-recognition-libraries.md) — The animation library implements element dragging with configurable constraints, momentum, and snapping while tracking movement progress through dedicated callback functions. ([source](https://motion.dev/docs/react-motion-component))
- [Keyframe Animation Engines](https://awesome-repositories.com/f/user-interface-experience/keyframe-animation-engines.md) — The animation library controls complex motion paths and timing by providing arrays of values to animation properties for precise, multi-step visual sequences. ([source](https://motion.dev/docs/react-animation))
- [Layout Animation Utilities](https://awesome-repositories.com/f/user-interface-experience/layout-animation-utilities.md) — Applies style configurations to maintain consistent element appearance during complex layout animations. ([source](https://motion.dev/docs/react-layout-animations))
- [Layout Rendering Utilities](https://awesome-repositories.com/f/user-interface-experience/layout-rendering-utilities.md) — Corrects visual distortion during size or position changes by measuring element geometry and applying inverse transforms to maintain consistent appearance.
- [Scroll Animation Utilities](https://awesome-repositories.com/f/user-interface-experience/scroll-animation-utilities.md) — Linking visual animations directly to the user scroll position to create immersive storytelling and dynamic page navigation effects.
- [Scroll Animations](https://awesome-repositories.com/f/user-interface-experience/scroll-animations.md) — The animation library defines animation states that activate when elements enter or leave the viewport to create engaging visual effects during page navigation. ([source](https://motion.dev/docs/vue))
- [Animation Optimization Tools](https://awesome-repositories.com/f/user-interface-experience/animation-optimization-tools.md) — The animation library compiles complex spring physics into native CSS linear easing functions to enable high-performance animations without requiring a JavaScript runtime.
- [Interaction Handlers](https://awesome-repositories.com/f/user-interface-experience/interaction-handlers.md) — The animation library detects and responds to hover, press, focus, and drag interactions using specialized component properties that extend standard event handling capabilities. ([source](https://motion.dev/docs/vue))
- [Scroll-Driven Animation Tools](https://awesome-repositories.com/f/user-interface-experience/scroll-driven-animation-tools.md) — The animation library links property values directly to the scroll offset to trigger animations or visual transitions as elements move through the visible viewport area. ([source](https://motion.dev/docs/react))
- [Viewport Visibility Observers](https://awesome-repositories.com/f/user-interface-experience/viewport-visibility-observers.md) — Monitors element visibility using intersection observers to trigger animations or state changes precisely when content enters the user's field of view.

### Testing & Quality Assurance

- [Performance Profilers](https://awesome-repositories.com/f/testing-quality-assurance/performance-profilers.md) — Profiles render-pipeline costs to identify and resolve motion bottlenecks for high-performance animations. ([source](https://motion.dev/docs/ai-kit))

### Web Development

- [CSS Motion Generators](https://awesome-repositories.com/f/web-development/css-motion-generators.md) — The animation library provides specialized tools to create custom easing curves and spring functions that output standard CSS code for use without additional runtime overhead. ([source](https://motion.dev/docs/ai-kit))
- [Cross-Framework Integration Utilities](https://awesome-repositories.com/f/web-development/cross-framework-integration-utilities.md) — The animation library integrates animation capabilities across diverse development environments including standard web scripts and popular component-based user interface libraries. ([source](https://motion.dev/docs))
- [CSS Generation Tools](https://awesome-repositories.com/f/web-development/css-generation-tools.md) — Transforms complex spring physics and easing curves into native CSS functions to eliminate runtime animation overhead.