Complete documentation of the Motion animation library and Framer’s code features.
Getting started with Motion
Learn more about Motion’s features and get started by exploring a few interactive examples.
An open source production-ready motion library for React.
Get started with Framer Motion and learn by exploring interactive examples.
Simple examples for animation, gestures, components, transforms and more.
How to animate in Framer Motion.
Create layout and shared layout animations with React and Framer Motion.
A powerful gesture recognition system for the browser.
How to create scroll-linked and scroll-triggered animations in Framer Motion.
A transition defines how values animate from one state to another.
Motion components are DOM primitives optimised for 60fps animation and gestures.
Animate components when they're removed from the React tree.
Group motion components that should perform layout animations together.
Reduce bundle size by lazy-loading a subset of Motion's features.
Set configuration options for Framer Motion.
Create drag-to-reorder effects with a simple set of components.
Motion values overview
Motion values track the state and velocity of animating values.
Combine multiple motion values into a new one via string template.
Create scroll-linked animations with the useScroll hook.
A motion value that animates to its target with a spring.
A motion value that updates every animation frame with the duration, in ms, since it was created.
Create a new motion value that transforms the output of one or more other motion values.
Create a motion value that tracks the velocity of another.
Automatically manage the will-change CSS property to optimise performance.
A low-level animation function to animate a single value or a MotionValue.
Create a function that will map a value from one range to another
Manual controls for triggering animations in a motion component.
An animation loop that outputs the latest frame time to the provided callback.
Manually start/stop dragging on a motion component.
A simple state hook for when an element is within the viewport.
A hook that determines whether the user prefers reduced motion.
Get started with Framer Motion 3D
A perspective camera that integrates React Three Fiber with Framer Motion's layout animations.
An orthographic camera that integrates with Framer Motion's layout animations.
A Canvas component for linking Framer Motion with Framer Motion 3D.
Extend your prototypes with code using Code Components and Overrides.