How to Get Started Using Bodymovin and Lottie in After Effects
What is Lottie?
Lottie is a mobile library for Android and iOS that parses Adobe After Effects animations, created using shape layers, exported as JSON data files with Bodymovin and renders them natively on mobile. It is a library that allows a motion designer to create smooth, scalable animations that retain consistency across multiple development environments without the need to spend countless hours/days/weeks endlessly tweaking animations with engineers.
What is Bodymovin?
Bodymovin is an After Effects plugin that can be downloaded for free via GitHub. It translates animations based around shape layers in After Effects and exports them to SVG, Canvas, HTML + JS or, when combined with Lottie libraries, iOS and Android. All of this is done through the use of the JSON file format.
What is Needed to Get Lottie and Bodymovin Working?
Bodymovin extension for After Effects:
aescripts.com ZXP Installer (Used to install extension)
Bodymovin libraries, players, extensions, tips and version histories
Lottie libraries for iOS and Android:
The Lottie libraries below will need to be added to your codebase to utilize the Bodymovin JSONs and implement them in code.
Lottie and Bodymovin players for iOS and Android:
Lottie player for iOS (There is no official player for iOS, so the LottieFiles.com app is the first choice. However, if you download the Lottie library listed above, it comes with an Xcode project that includes a simple iOS player. If you compile that to a device, you can load JSONs through Xcode. It’s a fairly pain free process, but if you have little understanding of iOS development, you may want to ask an iOS engineer or UX prototyper to compile it to a device.)
Bodymovin player cross-platform (You can access a settings interface for each composition in the Bodymovin extension interface. One of these settings allows you to save an animation as ‘Demo’ which will create an .html file for your animation which can be viewed in a web browser on both Mac and PC.)
How Do I Get Bodymovin Installed?
1. Download the Bodymovin extension found here.
2. Download the aescripts.com ZXP installer found here. (You can also use the Adobe ZXP installer included with it’s more recent Creative Suite offerings)
3. Open ZXP Installer.
4. Drag bodymovin.zxp into the ZXP Installer window.
5. Once you get the “…installed successfully.” confirmation, hit ‘OK’.
6. Close the app and open Adobe After Effects
How Do I Use Bodymovin for Exports?
First off, we need to have a little talk about workflow. Bodymovin makes certain workflows really easy to translate to code: vector animations are the most beneficial. If your After Effects file is loaded with large amounts of PNGs, PSDs or flattened AI layers, the benefits of Lottie and Bodymovin are greatly reduced. Although bitmaps are supported, using a lot of bitmapped objects will lessen the benefits of the vector workflow. If you are using a large amount of AE or 3rd party plugins, Bodymovin and Lottie won’t be able to support these. If you have a spaghetti mess of expressions that infiltrate every layer of your project and your actual keyframing is minimal, Bodymovin won’t be able to translate much of those expressions to a reasonable workflow. If you are creating animations that are breaking free of the 2D space and venturing into 2.5 or 3D, support of those parameters are limited at this time. Always refer to this section of the Lottie documentation for what features are or are not supported.
Now, that doesn’t mean some of the above isn’t supported, but the ones that may be supported won’t be in a highly advanced stage. Plugins will probably never be supported, expressions will be supported in a more basic form, 3D may be supported over time, PNGs have already been included, but keep in mind, the more you craft your workflow to Bodymovin and Lottie’s strengths, the better results you will get in animation smoothness and small file size.
How to Export a Bodymovin JSON
Launch After Effects and open the animation you want to export with Bodymovin
Go to the ‘Window’ menu, move down to ‘Extensions’ and select ‘Bodymovin’
Once the Bodymovin window comes up, you will want to select what composition you want to export using the radio button on the left side labeled ‘Selected’ and then click on the 3 dots to the right side under the label ‘../Destination Folder’. (A warning here, if you have multiple compositions in the same project that are named the exact same, for example one in a ‘final comps’ and one in ‘old comps’, they will both show up here without reference of where they are in the project. This can cause workflow issues and you may find yourself exporting an outdated comp and pulling out your hair trying to figure out why your JSON is all messed up.)
Give your file a proper name since the default is ‘data.json’ and choose a location to save it, then hit the ‘Save’ button.
If you are not looking at tweaking any other settings hit the ‘Render’ button and let Bodymovin do its thing.
There is a settings icon that you can click on for more options for your comp. The ‘Glyphs’ setting is checked by default but all the others remain unchecked. So far, the only real setting in this window that gets a decent amount of regular use is ‘Demo’ which will create an HTML file for you to play your Bodymovin JSON in a web browser if you don’t have a mobile player to preview what you exported. I encourage you to tinker with the other settings if you feel like they could fix a problem in your workflow.
How Can Illustrator Layer Assets be Made Into Shape Layers?
Thanks to the amazing and brilliant Adam Plouff, there is a tool that smooths the transition between Illustrator and After Effects called Overlord. Pick up a copy through his website to get started animating faster.
He also makes an amazing plugin called SketchtoAE which can help you when have to work from Sketch source files.
Otherwise if you have work that was created in Adobe Illustrator to be brought into After Effects, you can convert these assets into shape layers, whether you already separated them into layers in Illustrator or not. Below is a quick rundown on how to make this happen.
Select your Illustrator layers in your composition timeline. You can select all the layers at the same time, or just do a chunk at a time, it’s all personal preference and how you like to organize your project.
Bring up the contextual menu, scroll down and choose ‘Create Shapes from Vector Layer’.
After Effects will create new shape layers with all the vector assets and keyframes included at the same time that it will hide the visibility of the old Illustrator layers. You can do a couple things with the old AI layers, you can delete them, you can use the ‘Shy’ layer setting to hide them for now or you can just leave them as they are if the clutter doesn’t bother you. One thing to consider after you have converted the layers is to check your parenting settings, these new vector layers will be paired to the old Illustrator layers and not to their new vector counterparts, so you may want to correct that before deleting anything.
In this example, I have chosen to get rid of the old layers and just work with the new vector versions.
Once the layers have been converted, you will will need to clean the layers up a bit. Select a layer and open it up by hitting the little arrow next to it. Do the same for the ‘Contents’ subset. Depending on the complexity of the vector shape, there could be a number of variations you will find here, but more often you will see ‘Group 1’ as your first content layer. If you open that up, you should see something like the image above. In most cases ‘Path 1’ will be your shape, followed by a nested ‘Group 1’ and ‘Merge Paths’. Two things to consider here, ‘Merge Paths’ doesn’t work in Lottie, so any time this results in a layer conversion, you will need to find a way around it. Secondly, you may find when converting an Illustrator document from an older version, somewhere in the layer you may see a combo like above. What ‘Group 1’ is as well as ‘Merge Paths’ in these instances is a reference to the Illustrator canvas that your vector object is built upon. These are unnecessary carry overs translated into the shape layers. When you come across this combo and it seems to serve no purpose, it’s more than likely this issue and can just be deleted.
Aside from the empty canvas shape groups, you will encounter other ‘Merge Paths’ for letters, numbers, vector objects, etc. When you have located these, modify the shape to replicate the look but eliminate the ‘Merge Paths’ effect. Until Lottie supports this, not eliminating these will result in drawing errors during Lottie playback.
One last thing to consider when optimizing the layers after they have been converted is whether you want to take the time to combine different groups in different layers into the same layer. The bonus from investing time here is you have a more concise and efficient After Effects workflow and could save you some file size in final JSON output file.
JSON Looks Like a Text File Full of Gibberish, Now What?
When you have made revisions to your animations and got all the kinks worked out, the JSON file is all you will need to hand to the engineering team for implementation.
Before that, however, you will need to preview your animations and make sure they are performing to your standards. Here’s a number of options to get you previewing what you’ve created.
Official Android Lottie Player
Official-ish iOS Lottie Player In order to use the iOS player you need to have Xcode connected to an Apple Developer account that would allow you to add JSONs to the Xcode project and compile to devices.
LottieFiles.com A great web player to give a quick preview of your animated files. There is also an iOS app created by the team at LottieFiles.com that could be used on iOS devices and sync files from your web account.
One word of caution when evaluating animation playbacks during implementation phases, if you are sending JSON files to your engineers and they are sending you captures back, make sure they are doing it from a tethered device. If they try and capture your animation from the simulator on either Android or iOS, you are going to see a ton of jank and a poor representation of what you created and you may spend days trying to fix something that’s not even broken.
What AE Things Can I Use in Bodymovin/Lottie?
As this list is ever changing with all the updates Lottie gets, it’s best to just check the features website for an easy to read checklist of what you can and can not do with bodymovin’ and the Lottie library.
Supported Feature Guide for Lottie
I Need Some Help With Lottie/Bodymovin, Who Do I Reach Out To?
If you are looking for official support of Lottie or Bodymovin and have issues, bugs, glitches, workflow requests, please join the Lottie and Bodymovin #Slack channel at lottieanimation.slack.com. This is where the engineers in charge of the projects are most easily reachable. If that doesn’t work you could also look to the links above for the Lottie pages for iOS and Andoird on GitHub as well as Bodymovin’s page on GitHub. The ‘Issues’ sections of those pages are heavily frequented by the engineers building the products, they usually respond within 24 hours and the more issues we bring to their attention, the better the libraries get.
Android Library Engineer: Gabriel Peal
iOS Library Engineer: Brandon Withrow
Bodymovin Engineer: Hernan Torrissi
LottieFiles.com Engineer: Natu Adnaan
