/ Graphics Hub

How to Export SVG Animation Using Bodymovin to 'Lottie'

Md. Zobaer Hossain Tokder

Md. Zobaer Hossain Tokder

Principal Graphic Designer, MazeGeek Inc.

Read More
How to Export SVG Animation Using Bodymovin to 'Lottie'

SVG (Scalable Vector Graphics) animation is not so easy. But Airbnb released a great open-source called ‘Lottie’ which allow running SVG animation using Adobe After Effects by Bodymovin plugin. Any designer can easily export animated graphics as .json format using after effects through bodymovin. Smooth motion and low size file is one of the best points on this SVG animation.

Export Process:

Developers can control the file with Lottie on web and mobile app too. That's really cool. In this article, I am showing how to export an SVG animation using after effects plugin called Bodymovin. Forget to use big size GIF.

Lottie animation process (Image: medium.muz.li)

1. Install Bodymovin Plugins

At first thing is to install the plugin correctly on your pc. You can find it Github or Adobe Add-ons. Here you can download this file and know plugin install guideline.

2. Prepare Your Animation

Now time to prepare our animation. Here I am creating a simple animation for the article. It's a funny animated play button. Before creating your animation you have to remember some point very important:

  • Always download latest version of Bodymovin plugin. You can find the latest version in Github.
  • This is very important that currently all aftere effects feature/effects does not support Lottie. So you should check these restrictions first. You can find all the restrictions in this link Supported Features.
  • Composition support in Lottie is so poor, so not try to use this. You can merge all layers into one composition in the final stage.
  • Don't use Expressions while creating animation.
  • Be careful to look your animation file size. Use a few dots per inch as possible. Because they can increase your file size high.
  • Create simple animation using position, shape, opacity, transition, rotate, scale etc.
We are going to a simple animation like play button

3. Open Bodymovin Plugin

If your animation fully complete time to go with export .json file. Click the Bodymovin plugin. You can find look like this under follows.

You have to select a destination folder where you can save all the files and select the composition which you are going to export. Make sure all files goes in one folder.

4. Click Settings

In the settings menu you see some options like Hidden, Guides, Extra Comps each option has some different tab  Select this tab ‘Demo Exports an HTML for local preview. And click Save.

5. Click 'Get the Player'

Click 'Get the Player' and choose the destination folder to save it.

Choose destination folder

6. Click the Render

It takes some sec only which depends on your animation size. After that, you can get .json file which contains your animation which I created for the first time. You can get Html file too for demo view in web. Click the Html file and you can see preview the animation on web browser.

All done !!! your file is ready to use on app or web. You can control size, color and other things as well. You may check file size that is too low size.

                                                   Finally find this three files.

Final Outcome:

If you open the demo.html file your browsers show the animation. Yes now its a SVG formatted animation.

Here is our final exported SVG animation. Hope you like this. So don't be late Prepare your animation and use it on app and web just a simple way. Happy Animating. 😊