Building animations in React Native, using Illustrator, After Effects, and Lottie

8 min readJun 11, 2018

In this tutorial, I’m going to go through a step-by-step process on how to add animations into your React Native app using Adobe Illustrator, After Effects, and Lottie by Airbnb. The goal here is to provide you with some insight on how you might go about bringing your animation design to mobile. First, let’s look at the tools we’ll be using:

React Native

Framework for building mobile apps using Javascript and React. In the provided example, we’re using Typescript.

Lottie

A mobile library by Airbnb that reads JSON files exported from After Effects via Bodymovin and renders them natively.

Adobe Illustrator

Vector graphics editor for creating our shapes.

Adobe After Effects

Digital visual effects, motion graphics, and compositing application for animating our vector shapes. This will be imported from Illustrator.

Bodymovin

After Effects extension for exporting our animations to JSON format.

One particular place that I like to grab inspiration from is Dribbble, a show and tell community for designers. Ranging from microinteractions to entire app designs, it is the perfect place to go for design references.

For this example, we’re going to be building a neat little tab bar where it animates when you switch tabs. This design called Magic Tabs was created by Abhinav Chhikara and can be found on Dribbble.

Before diving into the building process, here are the key elements that happen in this animation:

Underline changes colors
Icons move
Both underline and icons animate relative to the scroll position

With that in mind, lets begin!

1) Create a mobile app with React Native and install Lottie

If you already have an existing React Native app with Lottie that you want to use, go ahead and skip to the next step. Otherwise, you can download the completed app over here and follow along.

2) Download Bodymovin for After Effects

Grab the Bodymovin plugin here. You’ll also need ZXP installer to install the plugin so that you can access it in After Effects later.

3) Creating the icons in Illustrator

Starting with the smiley face, create a new document that’s 200px by 200px. Create three layers named Shadow, Face, and FacialFeatures. Select the Shadow layer and place a circle that has a diameter of 140px in the middle of the canvas. Select a color for the shadow layer. This should be a darker shade than the face’s color. With the Face layer selected, create another circle with a diameter of 126px. Offset it to the bottom right so that the smaller circle’s edge is almost flush with the larger one — give this circle a lighter shade. Select the FacialFeatures layer, create some eyes with a mouth, and offset them to the right.

Now lets build the chart icon! This one is pretty simple. You can either create a separate project for this or just use another layer. For our example, we’ll continue working in the same project. Create three layers named Bar1, Bar2, and Bar3. Switch to the Bar1 layer and create a line down the middle with a height of 85px and a stroke of 28px. Give the stroke a color and set the fill to none. Copy the line and paste it into both Bar2 and Bar3 layers. Finally, position them so that that they look something like this:

4) Animating the icons in After Effects

For the animations, let’s create two compositions: one for the smiley face and the other for the chart. Give each one a size of 200px by 200px and set the duration to one second. Right click the empty space in the composition panel and import your Illustrator file. You should see two new items: a composition under the name of your Illustrator file and a folder that contains Illustrator files (those are your layers). We won’t be using the generated composition so go ahead and delete it. Here’s how mine looks:

Double click your smiley composition to reveal an empty preview and timeline. Drag the Shadow, Face, and FacialFeatures Illustrator layers from the composition panel to the timeline panel. Right click the three layers in the timeline and choose Create Shapes from Vector Layer.

Repeat the same steps for the chart composition. Once that’s done, you can delete all of the Illustrator files from both the composition and timeline panels. You are now ready to begin animating the smiley face.

Select the Shadow and FacialFeatures layers and set position keyframes at zero seconds (Alt + P is the Mac shortcut). Let’s also desaturate the colors while we’re at it. Open up the drop down on the Face layer until you see the color row. Change the color to grey and click the watch clock to set a keyframe. Do the same thing for the Shadow layer but give it a darker shade of grey.

Move the timeline marker to one second and adjust the position of both the FacialFeatures and Face layers so that the face is looking towards the left. Remember to set the position keyframes if it hasn’t been done already. Finally, set the color keyframes with the original colors.

For the chart, the colors are animated the same way. The only difference is that we’re going to add a trim path to animate each layer.

Set the keyframes (at time=0s and time=1s) for the trim path’s startproperty and adjust the percentage so that you end up with this:

The last thing to do is to export our animations into JSON format so that we can use it in our React Native app. You should see the Bodymovin option under Window -> Extensions. Once you’ve set the destination folder and checked both compositions, click Render to generate the JSON.

5) Back to React Native world!

Before we dive into the code, lets think about what we need to build. First, we’re going to need a scroll view since it will be the mechanism that drives our animations. We will also use it to move the tab indicators, the piece right below each icon. We will achieve this by storing the scroll offset in a state. The animatable components will then hook into the scroll offset and animate based on the movement of our scroll view. Here is an example of how I setup my code:

Initialize the state with a scrollProgress property — this is what we will be using to track the scroll offset. Create an array of objects that describe each tab’s properties (ie. such as the animation file to use, the main color associated with it, etc). This allows us to iterate through the array and generate the animatable components without having to define them multiple times.

Here, we create a horizontal scroll view that wraps all of the tab content. Mapping the magicTab array that we defined earlier, we can render pages based on the number of tabs while also supplying each one with the correct background color. Using the Animated API by React Native, we store the scroll offset into our state.

In the first section, we are interpolating the scroll offset and mapping it to the Lottie view’s animation progress (0 for 0% and 1 for 100%). In the second section, we generate an indicator for each tab, each with their own color. The idea is that every scroll indicator scrolls at the same rate as its adjacent ones. The opacity, however, behaves differently. While one indicator fades in, the adjacent one will fade out simulating the color fading effect. Finally, wrap it all up and style the components like so:

That’s all there is to it! What you should end up with is an awesome animation:

Unlimited possibilities

Here’s another cool example built using the same technique. The view above the line is a Lottie view, while the bottom is just a horizontal scroll view that the controls the animation.

While you can use images and a combination of transforms to achieve what we’ve just built, I found that building animations using this method saved me from writing excess code and allowed me to build much more complex animations. As an added bonus, this also keeps my code more maintainable. If this has helped you or if you liked this tutorial, feel free to share it with your friends! I’d love to hear your thoughts.

For more examples like this one, check out this project.