> ## Documentation Index
> Fetch the complete documentation index at: https://docs.zopio.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Motion

> A library for animating React components with ease.

<Tip>Motion was formerly known as Framer Motion.</Tip>

### Installation

To install Motion, simply run the following command:

```sh Terminal theme={"system"}
pnpm add motion
```

### Usage

Here is an example of how to use Motion to animate a component:

```tsx my-component.tsx theme={"system"}
import { motion } from 'motion';

function MyComponent() {
  return (
    <motion.div animate={{ x: 100 }}>This is a component that is animated.</motion.div>
  );
}
```

### Benefits

* <Icon icon="check" iconType="solid" /> **Easy Animation**: Motion makes it easy to animate components with a simple and intuitive API.
* <Icon icon="check" iconType="solid" /> **Customization**: Motion allows you to customize animations to your needs, providing a high degree of control over the animation process.
* <Icon icon="check" iconType="solid" /> **Performance**: Motion is performant and has minimal impact on your application's performance.

For more information and detailed documentation, visit the [Motion website](https://motion.dev/).