Transforms

Moti has the same API for transforms as a normal React Native component.

It also comes with some added convenience.

Like always, you can use a transform array:

<MotiView
from={{
transform: [{ scale: 0 }],
}}
animate={{
transform: [{ scale: 1 }],
}}
/>

Writing a transform array can be bulky. You can also pass your transforms directly:

<MotiView
from={{
scale: 0,
}}
animate={{
scale: 1,
}}
/>

Using multiple transforms#

If you're using multiple transforms, be sure to retain their order inside of each prop.

// ✅ scale first, then translateX
<MotiView
from={{
scale: 0,
translateX: -10,
}}
animate={{
scale: 1,
translateX: 0,
}}
/>

This only works with Reanimated 2.3.0+. For older versions, scroll down.

This will break your animation, since they have different orders:

// 🚨 from & animate don't have the same orders for transforms!
// this will break
<MotiView
from={{
translateX: -10
scale: 0,
}}
animate={{
scale: 1,
translateX: 0
}}
/>

If you prefer to use an array for multiple transforms, you can do that too. Be sure to retain the order of your transforms across props.

<MotiView
from={{
transform: [{ scale: 0 }, { translateX: -10 }],
}}
animate={{
transform: [{ scale: 1 }, { translateX: 0 }],
}}
/>

Using multiple transforms (on old versions of Reanimated)#

The following only applies if you're using Reanimated 2.2 or older. As of 2.3.0, you can use multiple transforms without an array if you want.

If you're using multiple transforms together, such as scale and translateY, and you're using Reanimated 2.2 or older, you must use an array.

This example is okay, since scale is the only transform:

// ✅ if you're only using one transform
<MotiView
from={{
scale: 0,
}}
animate={{
scale: 1,
}}
/>

But this won't work:

// 🚨 if you're only using multiple transforms, use an array
<MotiView
from={{
scale: 0,
translateY: -10,
}}
animate={{
scale: 1,
translateY: 0,
}}
/>

Instead, pass transform arrays.

// ✅ for multiple transforms, use an array
<MotiView
from={{
transform: [
{
scale: 0,
},
{
translateY: -10,
},
],
}}
animate={{
transform: [{ scale: 1 }, { translateY: 0 }],
}}
/>

Make sure the order in the from and animate prop is the same. In this case, we put scale before translateY.

Sequences#

Sequences for transform works like normal. Simply pass an array in place of your value

<MotiView
animate={{
scale: [0, 1.1, { value: 1, delay: 200 }], // scale to 0, 1.1, then 1 (with delay 200 ms)
}}
/>

That's equivalent to doing this:

<MotiView
animate={{
transform: [{ scale: [0, 1.1, { value: 1, delay: 200 }] }],
}}
/>