Export your After Effects animation into JSON in 9 simple steps. An absolute joy for UI designers.
JSON has 100 times smaller file size than GIFs with crystal clear resolution.
How many times have you heard developers saying:
“Let’s not use this GIF the size is way too much. Use some image…or select something from native library!!”
Almost every damn time!
That frustrates me like anything. Still I would bump in my seat to further reduce the GIF size. All that pixel perfect animation with smooth transition, carefully placed keyframe with perfect colour combination right on the highway to hell.
Followed by a desperate ☕ + 🚬 break.
That was life, struggling to get animation fit into my application. Then one fine day a developer friend of mine introduced me to Bodymovin by AirBNB.
And it changed everything.
Now…
What is Bodymovin?
Bodymovin is an open source After Effects extension to render your vector animation into .JSON file.
In a simple definition: JSON is Java Script Object Notation which turns your animation into a set of script rather than multiple PNG frames. Developers then copy paste these codes into their iOS, Android, and React Native library that renders After Effects animations in real time. This allows apps to use animations as easily as they use static assets with file size as low as SVGs itself.
• Since it is not a static animation, you have liberty to play around with responses. Like in the example below, Clap icon keeps on clapping the longer you keep hold on it. It is directly responsive to your action unlike GIFs.
•Resolution Free: Since these are SVG based animation you can control their sizes without any fear of loosing the clarity and resolution. Just change Width and Height in the body text code. 💁🏻
How do I get Bodymovin for After Effect?
Bodymovin is an open source extension so you don’t have to pay any extra dime for it. Here are the steps:
- Download the After Effect Bodymovin extension from here. See I have done the tough job for you already 😎
- Once downloaded, double tap the .dmg file.
3. Drag XZP installer into ‘Application’ folder.
4. Check your After Effects extension folder to confirm. Now all set!!! 👍
6. Make sure your animation doesn’t contain complex features like Color Inversion, Stylize, Simulation effect like Rainfall, Shatter, Wave, Drizzle, Bubble etc. You can however use basic features like masking and layer properties etc.
7. I have made one simple loader animation to help you guys understand how this works. Remember, use basic features because they are more than enough to get pretty and light animation. You can still use complex features, no restriction to that, but old OS might not be able to run it. So let’s be on the safer side.
8. Once your animation is done. Go to Window > Extensions > Bodymovin
9. In the Bodymovin extension window, there are few options like ‘change destination folder, select the composition you want to render, change the settings’ etc. Go to ‘Settings’ as highlighted below:
In the settings, selected the following options:
• Glyphs: Select this option if there is any text in design.
• Demo: Always select this option. You can directly play the .html file from export folder into a web browser.
• AVD: Thats’s the XML file used by Android developers.
10. Voilla!!! Here is your .json, .html and .xml file. Send them to your developer & watch Netflix.
I hope you liked the article. Put down your thoughts or any query you have into the comments. I will try to answer them as best I can.
You can also checkout this tutorial from Matt Wilson on Bodymovin: https://www.youtube.com/watch?v=FYOOucjdnkY
This has covered all the aspects around Bodymovin from with developer’s perspective.
Now let’s go put some kickass animation into your app.
Gracias 🙏🏼
