framer/motion
Motion
Framer Motion is a React animation library and hardware-accelerated motion engine. It provides a suite of systems for managing declarative transitions, automated layout interpolation, and animation states within React user interfaces.
The project distinguishes itself through a layout transition orchestrator that automatically interpolates visual changes when elements shift position or size. It includes an interactive gesture system to trigger motion based on drags, hovers, and taps, as well as tools for binding animation progress to scroll positions.
The library covers a broad range of motion capabilities, including the sequencing of complex choreography and the use of physics-based engines to calculate natural movement. It leverages native browser APIs and GPU-accelerated transforms to maintain high frame rates.
Features
- Hardware-Accelerated Engines - Implements a hybrid engine using GPU-accelerated transforms and native browser APIs to maintain high frame rates.
- Hardware-Accelerated Engines - Provides a hardware-accelerated motion engine that leverages native browser APIs for smooth frame rates.
- Animation Prop Abstractions - Uses React components to abstract complex animation logic into simple props describing desired visual states.
- Gesture Interaction Libraries - Provides primitives for capturing and processing pointer-based interactions such as drags, hovers, and taps.
- Layout Animation Engines - Automatically calculates and animates visual transitions when UI elements change size or position.
- Layout Transition Engines - Implements a specialized engine for animating changes in element geometry and hierarchy during UI updates.
- Physics-Based Animation Libraries - Uses a physics-based engine with mass, stiffness, and damping to create natural, responsive movement.
- Scroll-Based Animations - Links animation progress to the page scroll position to create interactive layouts and storytelling.
- Layout Interpolators - Computes intermediate layout properties between frames to produce fluid transitions during element resizing and movement.
- Timeline Orchestrators - Provides a system to coordinate multiple animations and callbacks into unified timelines for precise motion choreography.
- CSS Transform Animations - Directly manipulates CSS transform and opacity properties to ensure animations run on the GPU.
- Interaction State Machines - Tracks the lifecycle of user interactions through discrete states to trigger coordinated motion responses.
- Orchestrated Motion - Coordinates complex, multi-element animation sequences to create sophisticated motion choreography.
- Scroll-Driven Animation Tools - Synchronizes visual transitions and property changes with the current scroll position of the page.
- React Animation Libraries - Production-ready animation and gesture library for React.
- UI Animation - Comprehensive animation and gesture interaction library.
