# Overview

Overview — Legend Motion documentation.

Source: https://legend.so/motion/v2/usage/overview/

Legend Motion v2 documentation. Current documentation version.

Legend-Motion provides a set of components wrapping React Native Views.

The `Motion` namespace includes `View`, `Text`, `Image`, `ScrollView`, `FlatList`, `SectionList`, and `Pressable`.

```js
import { Motion } from "@legendapp/motion"
```

This page includes live examples running through React Native Web.

## [Simple animations](https://legend.so/motion/v2/usage/overview/#simple-animations)

We can simply set values on the `animate` prop.

```jsx
<Motion.View
  animate={{
    x: value * 100,
  }}
/>
```

When any value in `animate` changes, it will automatically animate to the new values.

Supported transform keys are `x`, `y`, `scale`, `scaleX`, `scaleY`, `skewX`, `skewY`, `perspective`, `rotate`, `rotateX`, `rotateY`, `rotateZ`, and `matrix`.

## [Transitions](https://legend.so/motion/v2/usage/overview/#transitions)

Animations use a tween of `300ms` by default, which you can change with the `transition` prop. The easiest way to do that is to set a `Transition` on all animations.

```jsx
<Motion.View
  animate={{
    x: value * 100,
  }}
  transition={{
    type: "spring",
    damping: 20,
    stiffness: 400,
  }}
/>
```

You can customize the animations even further by settings a `Transition` for each animated property. The `default` Transition will apply to all animated properties unless they have a specified transition.

```jsx
<Motion.View
  animate={{
    x: value * 100,
    opacity: value ? 1 : 0.2,
    scale: value ? 1 : 0.5,
  }}
  transition={{
    default: {
      type: "spring",
      damping: 20,
      stiffness: 300,
    },
    x: {
      type: "spring",
      damping: 20,
      stiffness: 1000,
    },
    opacity: {
      type: "tween",
      duration: 1000,
    },
  }}
/>
```

Legend-Motion supports two kinds of transitions, `spring` or `timing`. They pass straight through to Animated, so see the React Native docs on [Timing](https://reactnative.dev/docs/animated#timing) and [Spring](https://reactnative.dev/docs/animated#spring) for usage.

Transitions with durations are called `timing` in React Native's Animated and `tween` in Framer Motion, so Legend-Motion has transition types of both names that do the same thing, to make it easy to match props with the rest of your codebase.

Set `transition.loop` to the total number of times to run a tween or spring transition: `loop: 2` runs twice, and `loop: -1` loops forever. Set `transition.delay` on tween/timing transitions to delay the start in milliseconds; `configureMotion({ timing: 's' })` changes `duration` units only.

The `onAnimationComplete` callback receives the property name when that property's animation ends, including when it is stopped.

## [Animate on mount](https://legend.so/motion/v2/usage/overview/#animate-on-mount)

When a component mounts, it will automatically be set to the `animate` value. But you want to animate it into position on mount, set `initial` as a starting point.

```jsx
<Motion.View initial={{ x: 0 }} animate={{ x: 100 }} />
```

This example can be hard to see because it's a mount transition, so try refreshing the page to see it animate into place.

## [Automatic interpolating](https://legend.so/motion/v2/usage/overview/#automatic-interpolating)

For values that are strings or arrays, Legend-Motion automatically interpolates between the values so you don't have to worry about it.

```jsx
<Motion.View
  animate={{
    backgroundColor: value ? "#F81FEC" : "#59B0F8",
  }}
/>
```

## [Text](https://legend.so/motion/v2/usage/overview/#text)

With the automatic interpolating, it's easy to animate text colors as well as simple numbers like fontSize.

```jsx
<Motion.Text
  animate={{
    color: value ? "#F81FEC" : "#59B0F8",
    fontSize: value ? 48 : 24,
  }}
>
  Text
</Motion.Text>
```

## [Easing](https://legend.so/motion/v2/usage/overview/#easing)

React Native and Framer Motion use different naming, so Legend-Motion supports either `ease` or `easing` props, which do the same thing.

It accepts the same easing functions as React Native's `Animated` along with some named functions to match usage of Framer Motion.

Easing applies only to tween/timing transitions and is ignored by spring transitions. If you pass both `ease` and `easing`, React Native uses `easing`.

The supported values match most of Framer Motion's options:

`linear`, `easeIn`, `easeOut`, `easeInOut`, `circIn`, `circOut`, `circInOut`, `backIn`, `backOut`, `backInOut`

See the [React Native docs](https://reactnative.dev/docs/easing) for more details.

```jsx
<Motion.View
  animate={{ x: value * 100 }}
  transition={{
    type: "timing",
    duration: 300,
    easing: "linear",
  }}
/>
<Motion.View
  animate={{ x: value * 100 }}
  transition={{
    type: "timing",
    duration: 300,
    easing: Easing.linear,
  }}
/>
```

## [Gestures](https://legend.so/motion/v2/usage/overview/#gestures)

The `whileTap` prop animates to the target while the component is pressed, and the `whileHover` prop animates to the target while the component is hovered. Try pressing the box on the right to see it in action. `whileHover` is only supported in `react-native-web`.

These props require a `Motion.Pressable` ancestor, which is uses for tracking whether it is hovered or pressed. So you could have multiple inner elements that use the same hovered/pressed state.

```jsx
<Motion.Pressable>
  <Motion.View
    whileHover={{ scale: 1.2 }}
    whileTap={{ y: 20 }}
    transition={{
      type: "spring",
      damping: 20,
      stiffness: 300,
    }}
  />
</Motion.Pressable>
```

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