Moti has a number of powerful features that make your animations slick and simple.
You can set the initial state with
from. Any styles passed to
animate will transition for you.
This is useful for dynamic height changes, for instance.
Moti animations are highly configurable, thanks to the
transition prop. If you've used
framer-motion, this will look familiar.
You can also configure different transitions per-style:
If you set
type: 'spring', you can pass any options that Reanimated's
withSpring accepts. Same goes for
type: 'timing' & Reanimated's
Framer Motion introduced the incredible
AnimatePresence component to animate a component before it unmounts.
With Moti, you can now achieve the same thing in React Native.
Wrap your animation with
AnimatePresence, and add an
Even though it's experimental, I think this feature is so cool.
You can leverage the
exitBeforeEnter prop to only allow one item to be visible at a time.
Make sure that its direct children have a unique
key prop for this to work.
In the example above, the
content won't load in until after the
skeleton has faded out.
exit prop can be inside of a nested component. However, it's important that the direct children of
AnimatePresence have a unique
You can use the
Or, pass your
You can also set a different delay per-style:
To create a sequence animation, similar to CSS keyframes, just pass an array to any style:
This will animate to
If you want to customize each step of the animation, you can also pass an object with a
transition settings can be passed to a sequence object.
Repeat an animation 4 times.
By default, repetitions reverse, meaning they automatically animate back to where they just were.
You can disable this behavior with
true is like setting
animationDirection: alternate in CSS.
Infinitely loop from 0 to 1:
Repetition styles can't be changed on the fly. Reanimated's
withRepeat has some limitations, so just keep that in mind.
If you're trying to change them on the fly via re-render, you may have to update the component's
onDidAnimate function prop gets called whenever an animation completes.
You can define static variants when your component mounts:
Or set custom variants and update them on the fly:
You can use this to create reusable animations, too:
Read more about