3 Easy React Native Transition Animations with Moti
Moti is a fairly new React Native package from Fernando Rojo for creating “animations and transitions that work well on both websites & native apps,” in the author’s own words. It provides a super simple API around Reanimated 2.
I started playing with Moti a few weeks ago, and so far my favorite thing to do with the library is to create content transitions. Making these transitions is an absolute breeze with the MotiView component.
Here are three examples of simple, beautiful transitions you can add to your app with just a few lines of code.
Note: the GIF format of the previews here don’t do justice to how smooth these animations are on an actual device. Visit the GitHub Gist links for each code example and scroll down to the comments for an actual screen recording of each.
Example 1: Staggered Reveal Image Gallery
This first effect works well when you have a list of images or similar visual content, and you want them to reveal them gradually in a sequence. Each image animates from an opacity of 0 to 1 from a Y translation of 10 to 0. We use a timing transition so each image loads 300 ms after the previous one, and each animation takes 300 ms to complete.
Example 3: Subtle Spring Text Intro
This next example uses an effect very similar to the previous one. The main difference is that this one uses a spring transition rather than a timing transition. A spring transition gives us a nice subtle “settling in” effect after each element is revealed.
Example 3: Drop-in and Slide-in UI Elements
My inspiration for this example came from how iOS home screen elements transition in after the lock screen is dismissed. This could be used for all types of content, but I think it’s a great way to present interactive UI elements rather than have them appear all at once.
There are actually two separate transitions here. The top elements’ container animates from a scale of 1.5 to 1, giving it a “drop in” effect, while the bottom element’s Y position translates from 500 to 0, making it “slide in” from the bottom of the screen.
Conclusion
I hope these examples have given you a taste of the powerful simplicity of the Moti library, and I hope they’ve inspired you to create your own unique animations. I’d love to see what you come up with. Tag me on your creations on Twitter @useRNRocket. Be sure to follow me there and here on Medium for more React Native content.
