```jsx
import { Motion } from "@legendapp/motion"
```
`}
hideCode
/>
See the [Overview page](./usage/overview) for a more detailed usage guide.
## 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 dependences 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
To keep the code small and 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, `legend-animations` provides Motion wrappers around all of the `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
### 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.
## resources/caveats
## Cannot mix native and non-native animations
React Native does not support mixing native and non-native animations, so Legend-Motion cannot either. The following properties animate with `useNativeDriver` and you cannot mix them with any other properties.
- opacity
- x
- y
- scale
- scaleX
- scaleY
- skewX
- skewY
- perspective
- rotate
- rotateY
- rotateZ
- matrix
If you do need to mix properties together we suggest making them separate components.
## Transform Origin percentages do not work on SVG
The transformOrigin depends on onLayout from the animated component, which doesn't really apply to drawing SVG elements. So you'll need to specific transformOrigin in pixels.
## resources/next-js
There are a few extra steps to get Legend-Motion working on Next.js.
First, Legend-Motion and its dependencies need to be added to the transpile list.
```npm
npm install next-transpile-modules
```
Then wrap your export in `next.config.js` with `withTM`. This is the full config needed to setup Legend-Motion including Linear Gradient and SVG features. You can remove those lines if you don't need them.
```js
const withTM = require("next-transpile-modules")([
"@legendapp/motion",
// Only required for MotionLinearGradient:
"react-native-linear-gradient",
// Only required for MotionSvg:
"react-native-svg",
]);
module.exports = withTM({
webpack(cfg) {
cfg.resolve.alias = {
...(cfg.resolve.alias || {}),
"react-native$": "react-native-web",
// Only required for MotionLinearGradient:
"react-native-linear-gradient": "react-native-web-linear-gradient",
};
// Only required for MotionSvg:
cfg.resolve.extensions = [
".web.js",
".web.jsx",
".web.ts",
".web.tsx",
...cfg.resolve.extensions,
];
return cfg;
},
});
```
**_Note_**: The reason for these changes is that `react-native-svg` needs `.web.js` to be added to the resolve extensions, and Linear Gradient requires aliasing `react-native-linear-gradient` to `react-native-web-linear-gradient`.
## resources/typescript
Legend-Motion tries to be as strongly typed as possible, with the `animate` prop autocompleting the available styles of the component, `animateProps` autocompleting the component's props, and the `transition` prop autocompleting only the properties that are animated.
If types are not working please ensure that you've installed both `@types/react` and `@types/react-dom`.
```npm
npm install @types/react @types/react-native
```
## usage/animate-presence
`AnimatePresence` lets you use the `exit` prop to animate components when they unmount.
React Native does not have a built-in way to defer unmounting, so `AnimatePresence` holds onto removed components until their exit animation is finished.
Any children of `AnimatePresence` that have an `exit` prop will animate before being removed.
## Usage