# Introduction

Introduction — Legend Motion documentation.

Source: https://legend.so/motion/v2/getting-started/introduction/

Legend Motion v2 documentation. Current documentation version.

LLM links: [llms.txt](https://legend.so/motion/v2/llms.txt), [llms-full.txt](https://legend.so/motion/v2/llms-full.txt), [llms-full.md](https://legend.so/motion/v2/llms-full.md)

Legend-Motion is a declarative animations library for React Native, to make it easy to transition between styles without needing to manage animations.

```jsx
<Motion.View
  initial={{ y: -50 }}
  animate={{ x: value * 100, y: 0 }}
  whileHover={{ scale: 1.2 }}
  whileTap={{ y: 20 }}
  transition={{ type: "spring" }}
/>
```

## [Highlights](https://legend.so/motion/v2/getting-started/introduction/#highlights)

-   ✨ Supports react-native and react-native-web
-   ✨ API similar to Framer Motion for easy mixing of React Native with React
-   ✨ Supports animating SVG and linear gradient
-   ✨ Supports transformOrigin
-   ✨ whileHover and whileTap for easy animations on touch
-   ✨ AnimatePresence for exit animations
-   ✨ Minimal dependencies — only `@legendapp/tools`, using the built-in Animated
-   ✨ Built for maximum performance
-   ✨ Strongly typed with TypeScript

## [Quick Start](https://legend.so/motion/v2/getting-started/introduction/#quick-start)

Legend-Motion can be installed in React Native or React Native Web.

### [Installation](https://legend.so/motion/v2/getting-started/introduction/#installation)

```bash
npm install @legendapp/motion
```

### [Importing](https://legend.so/motion/v2/getting-started/introduction/#importing)

```js
import { Motion } from "@legendapp/motion"
import { MotionSvg } from "@legendapp/motion/svg"
import { MotionLinearGradient } from "@legendapp/motion/linear-gradient"
```

### [Usage](https://legend.so/motion/v2/getting-started/introduction/#usage)

Then set values on the `animate` prop to animate as the value changes.

```jsx
<Motion.View
    animate={{
        x: value * 100,
        opacity: value ? 1 : 0.2,
        scale: value ? 1 : 0.5
    }}
/>
<MotionSvg.Svg>
    <MotionSvg.Polygon
        animateProps={{ points: value === 1 ?
            "120,10 190,160 70,190 23,184" :
            "100,50 140,160 50,130 23,84"
        }}
    />
</MotionSvg.Svg>
<MotionLinearGradient
    animateProps={{
        colors: value ?
            ["#F81FEC", "#59B0F8"] :
            ["blue", "yellow"]
    }}
/>
```

See the [Overview page](https://legend.so/motion/v2/usage/overview) for a more detailed usage guide.

## [Motivation](https://legend.so/motion/v2/getting-started/introduction/#motivation)

**Easy to use**: We love the API of Framer-Motion in our web apps and wanted to build our React Native animations with the same ease.

**Interoperable with React**: At [Legend](https://legendapp.com/) and [Bravely](https://bravely.io/) our web apps mix React.js with components from our React Native apps using react-native-web, and we wanted them to work the same way.

**High performance**: Performance is extremely important to us so we designed for maximum performance with as little overhead as possible, using 0 dependencies and minimal code. This library is tree-shakeable and comes in at a total of 3kb gzipped if you use every feature.

**SVG and Gradients**: The [Bravely](https://bravely.io/) app makes heavy use of gradient and SVG animations, so we wanted to make that easy for our developers and yours.

## [How it works](https://legend.so/motion/v2/getting-started/introduction/#how-it-works)

To keep the code small and performance high, we tried to design this as simply as possible.

When a prop passed into `animate` changes, the `Motion` component starts an `Animated.spring` or `Animated.timing` animation with the new prop. If the prop is a string or array, it needs to be interpolated, so it bounces the value of an `AnimatedInterpolation` between 0 and 1, interpolating between the previous prop and the new prop.

For SVG animations, `@legendapp/motion/svg` provides Motion wrappers around supported `react-native-svg` components, which itself supports passing Animated values into its props.

Linear Gradient animations were inspired by [react-native-animated-linear-gradient](https://github.com/heineiuo/react-native-animated-linear-gradient) (see it for a great description of how it works) and Legend-Motion additionally includes support for multiple color stops and animating `start` and `end`.

## [Alternatives](https://legend.so/motion/v2/getting-started/introduction/#alternatives)

### [Moti](https://legend.so/motion/v2/getting-started/introduction/#moti)

[Moti](https://moti.fyi/) may be better for you, depending on your needs. It has a similar goal and has some other advanced features like variants, delays, and sequences. But it is larger, depends on Reanimated 2, has a different API, and does not include svg or gradient animations.

[View Markdown](https://legend.so/motion/v2/getting-started/introduction.md)[Report a documentation correction](https://github.com/LegendApp/legend-docs/issues/new?title=Docs%3A+Introduction&body=Page%3A+https%3A%2F%2Flegend.so%2Fmotion%2Fv2%2Fgetting-started%2Fintroduction%0A%0AWhat+is+incorrect+or+missing%3F%0A%0AExpected+behavior+or+supporting+source%3A%0A)