Get started with Framer Motion and learn by exploring interactive examples.

Overview

Framer Motion is a simple yet powerful motion library for React.

It powers the amazing animations and interactions in Framer, the web builder for creative pros. Zero code, maximum speed.

In this quick overview, we'll take a look at some of the APIs that Motion offers.

The motion component

The core of Motion is the motion component. Think of it as a plain HTML or SVG element, supercharged with animation capabilities.

<motion.div />

Animations

Animating a motion component is as straightforward as setting values on the animate prop.

<motion.div animate={{ x: 100 }} />

When these values change, Framer Motion will automatically generate an animation to the latest values. This animation will feel great by default, but it can be configured with the flexible transition prop.