How to render your own JSON file in Adobe After Effects
17 Jan 2021

How to render your own JSON file in Adobe After Effects

Have you ever wondered how to render Lottie animation? Follow those few easy steps from processing the prepared Illustrator file to exporting the JSON file.

Let’s start with Bodymovin plugin

Bodymovin is an After Effects extension for exporting the animation to a JSON file, which you can use on your website or in your Android or iOS app.

You can download it for free here or here, where you can show your love to the creators and pay any price you want.

After downloading Bodymovin, you’ll get bodymovin.zxp file (Adobe zip Format Extension Package file) that you can install with Adobe’s Extension Manager or use a zxp installer.

Get your design into Adobe After Effects

Your tools are ready, now let’s animate! To be as efficient as possible, it’s good to have a nicely prepared design file. You can save a lot of time by preparing the design in advance. If you don’t know how to prepare the design file, check our previous blog.

Import your Adobe Illustrator file

Import the design file into Adobe After Effects. Select File” in the top bar and choose Import option. (File > Import)

When importing your organized .ai file into the Adobe After Effects, make sure the Import As option is selected as Composition – Retain Layer Sizes. With this option chosen Adobe After effects will import the layers exactly as they are saved in Adobe Illustrator.

import file dialog

Convert .ai layers to shape layers

The great thing about Lottie is that it works well with vectors, and that’s the magic why JSON files are so tiny.

Converting the layers from Illustrator file into After Effects vector shapes is fairly straightforward. Select all layers, right-click and select Create and then choose Create shapes from Vector layer option.

Bodymovin would export the layers as raster images without this step and increased the JSON file size.

After creating the shapes, you can delete or hide original .ai layers.

Set your composition settings

Go to Composition and select Compositions Settings to adjust your Width and Height, Duration of an animation, or Frame Rate. Lottie animations support up to 60 fps.

Composition settings dialog

Set Background Color (black in our case) will not be rendered into your Lottie animation; the background will be transparent. To see the transparency of the document, click on the Toggle Transparency Grid”.

toggle transparency grid in ui

Pro tip

When you work with Ai files in Adobe After Effects more often as we do, we highly recommend the Overlord plugin; it will save your time.

With Overlord, you can send the Illustrator layers into the Adobe After Effects with one click. It will import Adobe After Effects shape layers and preserve layer names and position. Overlord can further export guides, color palettes, gradients & editable text layers as well.

Create animation

When it comes to animating itself, try to use only basic features – scale, position, rotation, opacity, or animate paths. If you want to use some advanced Features, always check Supported After Effects Features first.

We advise you not to use raster files (it affects the file size) and any effects from the Effects panel; most of them are not supported by Lottie.

Export the JSON file

Once you have created your animation and are satisfied with the result, navigate to Window, select Extensions, and choose Bodymovin option. (Window > Extensions > Bodymovin)

Now select a composition or multiple compositions that you want to render.

bodymovin dialog for rendering the animation

When you go to the Settings in the Bodymovin dialog, you can see a few different options you can choose from. Each option is well explained, but you might not know what GUIDED layers are. Plugins create those layers for rigging characters like Duik or RubberHose, so if you are using such a plugin, make sure to select the option.

If you like to see your Lottie animation implemented in the HTML file, you can quickly test if the animation works as designed and select Demo in the Export Modes section. Another option to test your animation is using our Lottie Preview, where you can drag and drop your JSON file.

bodymovin settings dialog

Save the settings and hit Render.

Final animation

That’s it! Your Lottie animation is ready to be implemented on your website or in your app to improve the experience and delight your users.

Looking for ready to use animations?

Not every company has the assets to hire an animator to create custom Lottie animations. In this case, we are providing an out-of-the-box solution in the form of ready to use animations. Check out our library of pre-made animations.