# Animate Props

Animate Props — Legend Motion documentation.

Source: https://legend.so/motion/v2/usage/animate-props/

Legend Motion v2 documentation. Current documentation version.

Legend-Motion allows you to animate props, which passes an `Animated.Value` into the prop. It's not necessary for the basic React Native components, but it's useful for Legend-Motion's SVG and LinearGradient components or for creating custom components.

See this SVG example that animates the `fill` prop:

```jsx
<MotionSvg.Svg height="200" width="200">
  <MotionSvg.Rect
    stroke="#555"
    strokeWidth="1"
    x="0"
    y="10"
    width="150"
    height="150"
    animateProps={{
      fill: value ? "#F81FEC" : "#59B0F8",
    }}
    transition={{
      type: "tween",
      duration: 500,
    }}
  />
</MotionSvg.Svg>
```

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