Animations in React Native have always been
difficult to make. In the last few years, however, it seems that
a lot of people have been working towards simpler animation tools. You might have heard about Reanimated, which
made animation easy and faster but also more recently about Moti. And while Moti isn’t good for making waffles,
wait, Fernando, does it do waffles too? I think that might be one thing it cannot do! While Moti is really not good for waffles,
it might be just what you need for animations. In today’s episode of How To Moti, let’s
see how you can use it. Long story short, Moti doesn’t give you
a better way to make animations, but a different way of writing them. If you need a fade-in effect in Reanimated,
which is what Moti is based on, you need a shared value, a timed animation,
and an animated style. Basically, you are describing
all the animation logic outside of the rendering part of your component. On the other hand, with Moti, you can get
rid of all the hooks and declare animations right from the view properties. On top of this, you can of course add a lot
more such as other style properties, delays, types of animations. You can even repeat one or create a series
of them for a given element. Now obviously, there’s no magic here. Moti is essentially recreating all the Reanimated
logic for you in the background. So the great part about it is definitely how
simpler it looks from a web developer perspective, where CSS animations and keyframes
are common practice. But you might be thinking this works well
for simple animations. What if you need more control and configuration? The problem you could think about is how to
trigger animations with Moti? Since you set the animation through props,
it will run as soon as it is mounted, as it appears on the screen. But in most cases, you’ll probably want
to animate a View differently based on its current state. If a text input value is wrong, the border
could turn red, or green if it’s correct. Meaning a text input could have three different
styles that need to be activated based on certain criteria. With Moti you can do this through an
animation state and variants. The idea is that instead of animating a component
upon mounting, you want to trigger an animation to transition it from one style to another. And to do this, we’ll use a hook this time
that defines a list of possible styles, called variants. You then can remove all the properties that
were on your element and pass this state to your Moti component. You could think of this as CSS classes in
web, where you’d conditionally add them to an element with a transition property. The only thing to know here is how to transition
the component from one style to another. Well, to do so, you can trigger it through
the animation state transitionTo method that takes any variant name. Now, maybe in a more real-life scenario, you
could do this based on what’s written inside the text input and therefore, transition either
to the success or fail variant. Here as you can see, we’re just checking
if the current text is “password”, and transitioning to the adequate variant. This is more performant as we define the list
of possible styles this element could transition to. But what if this should be more dynamic? Because yes, actually, these variants can’t
change over time meaning you couldn’t define a style property based on a changing variable. For example, if this input can be disabled,
it will keep the first value of this prop and not recreate a variant when it changes:
In most cases, this is okay, but if you ever need this, let’s see how it can be more
dynamic. So now that you know about variant-based,
static animation states, we can look at dynamic animations in Moti. It basically works like a state for your styles:
you pass it a list of the default properties, pass it to a Moti View and then you can trigger
changes just as if you were using setState. This is great, and it gives you much more
flexibility without compromising performance. There’s not much more to know about animations
in Moti, but there are however some handy components you might want to learn about in
the documentation. Alright, that’s it for today. In the next episode,
we’ll look at gestures in Moti. Remember to subscribe
if you don’t want to miss it. Thanks for watching
and see you next time :)
Very interesting. I never took the time to learn Reanimated, this could be a nice alternative for simple animations.
I like it❤️
Why should you use this instead of Reanimated2?