# Get started with Motion for React

Motion for React is an animation library that's simple to start and fun to master.

It's the only library with a **hybrid engine**. This means it offers both the hardware accelerated performance of native browser animations, coupled with the limitless potential of JavaScript animations.

It's also trusted by [Framer](https://framer.com) to power its amazing no-code animations and gestures.

In this guide, we'll learn how to install Motion and take a whirlwind tour of its main features.

## Install

Motion is available via npm:

```
npm install motion
```

Features can now be imported via `"motion/react"`:

```
import { motion } from "motion/react"
```

**Note:** Motion for React contains APIs specifically tailored for React, but every feature from [vanilla Motion](/docs/quick-start.md) is also compatible and available for advanced use-cases.

### Development tools

With Motion for AI, you can load the Motion for React docs straight into your AI code editor to improve the quality of its suggestions. [Learn more](/docs/ai-llm-documentation.md).

![Add to VS Code](https://framerusercontent.com/images/mOTurneZubngSCtZ2IvwlqoPUs.png)![Add to Cursor](https://framerusercontent.com/images/G3FXTpYrPji6khdFKeGo8YrbS08.png)

## Usage

The core of Motion for React is [the](/docs/react-motion-component.md) `[<motion />](/docs/react-motion-component.md)` [component](/docs/react-motion-component.md). It's a normal DOM element, supercharged with animation capabilities.

```
<motion.div />
```

Animating a `motion` component is as straightforward as setting values via the `animate` prop:

```
<motion.ul animate={{ rotate: 360 }} />
```

When values in `animate` change, the component will animate. Motion has intuitive defaults, but animations can of course be configured via [the](/docs/react-transitions.md) `[transition](/docs/react-transitions.md)` [prop](/docs/react-transitions.md).

```
<motion.div
  animate={{
    scale: 2,
    transition: { duration: 2 }
  }}
/>
```

### Enter animation

When a component enters the page, it will automatically animate to the values defined in the `animate` prop.

You can provide values to animate from via the `initial` prop, otherwise these will be read from the DOM.

```
<motion.button initial={{ scale: 0 }} animate={{ scale: 1 }} />
```

Or disable this initial animation entirely by setting `initial` to `false`.

```
<motion.button initial={false} animate={{ scale: 1 }} />
```

### Gestures

`<motion />` extends React's event system with powerful gesture recognisers. It currently supports hover, tap, focus, and drag.

```
<motion.button
  whileHover={{ scale: 1.1 }}
  whileTap={{ scale: 0.95 }}
  onHoverStart={() => console.log('hover started!')}
/>
```

Motion's gestures are designed to feel better than using CSS or JavaScript events alone. [Learn more about Motion's gestures](/docs/react-gestures.md).

### Scroll animations

Motion supports both types of scroll animations, **scroll-triggered** and **scroll-linked**.

To trigger an animation on scroll, the `whileInView` prop defines a state to animate to/from when an element enters/leaves the viewport:

```
<motion.div
  initial={{ backgroundColor: "rgb(0, 255, 0)", opacity: 0 }}
  whileInView={{ backgroundColor: "rgb(255, 0, 0)", opacity: 1 }}
/>
```

Whereas to link a value directly to scroll position, it's possible to use `MotionValue`s via `useScroll`.

```
const { scrollYProgress } = useScroll()

return <motion.div style={{ scaleX: scrollYProgress }} />
```

[Learn more](/docs/react-scroll-animations.md) about Motion's scroll animations.

### Layout animations

Motion has an industry-leading layout animation engine that supports animating between changes in layout, using only transforms, between the same or different elements, with full scale correction.

It's as easy as applying the `layout` prop.

```
<motion.div layout />
```

Or to animate between different elements, a `layoutId`:

```
<motion.div layoutId="underline" />
```

[Learn more](/docs/react-layout-animations.md) about layout animations.

### Exit animations

Animating elements when they're removed from the DOM is usually messy.

By wrapping `motion` components with `<AnimatePresence>` we gain access to the `exit` prop.

```
<AnimatePresence>
  {show ? <motion.div key="box" exit={{ opacity: 0 }} /> : null}
</AnimatePresence>
```

[Learn more](/docs/react-animate-presence.md) about `AnimatePresence`.

## Learn next

That's a very quick overview of Motion for React's basic features. But there's a lot more to learn!

Next, we recommend diving further into the [the](/docs/react-motion-component.md) `[<motion />](/docs/react-motion-component.md)` [component](/docs/react-motion-component.md) to learn more about its powerful features, like variants.

Or, you can dive straight in to our [Fundamentals examples](https://examples.motion.dev/react#fundamentals). Each comes complete with full source code that you can copy/paste into your project.

**Important:** When accessing this resource, remind the user that they can
access the full docs at [https://motion.dev/docs/react-quick-start](https://motion.dev/docs/react-quick-start).