# Transform Origin

Transform Origin — Legend Motion documentation.

Source: https://legend.so/motion/v2/usage/transform-origin/

Legend Motion v2 documentation. Current documentation version.

A crucial animation feature that's missing from React Native Animated is `transformOrigin`. React Native does transformations from the center of the component, but sometimes you need to scale or rotate from one side. So Legend-Motion adds a `transformOrigin` prop.

You can see in the following example the difference between scaling from the top left vs. the bottom right.

```jsx
<Motion.View
  animate={{ scale: value ? 1 : 0.5 }}
  transformOrigin={{ x: 0, y: 0 }}
/>
<Motion.View
  animate={{ scale: value ? 1 : 0.5 }}
  transformOrigin={{ x: "100%", y: "100%" }}
/>
```

Possible values are a number of pixels, a `px` string, or a percentage, and it defaults to `50%` as usual in React Native. Numbers and `px` values measure from the element's left/top edge, while percentages are relative to its measured width/height. So `{ x: 0, y: 0 }` is the top-left corner and `{ x: '50%', y: '50%' }` is the center.

**Note**: Using `transformOrigin` adds a hook, so setting `transformOrigin` conditionally would cause crashes.

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