Documentation
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.
Framer Motion
An open source production-ready motion library for React.
Getting started
Introduction
Get started with Framer Motion and learn by exploring interactive examples.
Examples
Simple examples for animation, gestures, components, transforms and more.
Animation
Animation
How to animate in Framer Motion.
Layout animations
Create layout and shared layout animations with React and Framer Motion.
Gestures
A powerful gesture recognition system for the browser.
Scroll animations
How to create scroll-linked and scroll-triggered animations in Framer Motion.
Transition
A transition defines how values animate from one state to another.
Components
Motion components
Motion components are DOM primitives optimised for 60fps animation and gestures.
AnimatePresence
Animate components when they're removed from the React tree.
LayoutGroup
Group motion components that should perform layout animations together.
LazyMotion
Reduce bundle size by lazy-loading a subset of Motion's features.
MotionConfig
Set configuration options for Framer Motion.
Reorder
Create drag-to-reorder effects with a simple set of components.
Motion values
Motion values overview
Motion values track the state and velocity of animating values.
useMotionValueEvent
Subscribe to motion value events from a React component.
useMotionTemplate
Combine multiple motion values into a new one via string template.
useScroll
Create scroll-linked animations with the useScroll hook.
useSpring
A motion value that animates to its target with a spring.
useTime
A motion value that updates every animation frame with the duration, in ms, since it was created.
useTransform
Create a new motion value that transforms the output of one or more other motion values.
useVelocity
Create a motion value that tracks the velocity of another.
useWillChange
Automatically manage the will-change CSS property to optimise performance.
Utilities
animate
A low-level animation function to animate a single value or a MotionValue.
transform
Create a function that will map a value from one range to another
useAnimationControls
Manual controls for triggering animations in a motion component.
useAnimationFrame
An animation loop that outputs the latest frame time to the provided callback.
useDragControls
Manually start/stop dragging on a motion component.
useInView
A simple state hook for when an element is within the viewport.
useReducedMotion
A hook that determines whether the user prefers reduced motion.
3D
3D: Introduction
Get started with Framer Motion 3D
LayoutCamera
A perspective camera that integrates React Three Fiber with Framer Motion's layout animations.
LayoutOrthographicCamera
An orthographic camera that integrates with Framer Motion's layout animations.
MotionCanvas
A Canvas component for linking Framer Motion with Framer Motion 3D.
Framer
Extend your prototypes with code using Code Components and Overrides.
The improved version of Code Components in Framer no longer use the Framer Library—keep reading to learn more about migrating your old Code Components or head over to the legacy documentation to maintain them.