My name is Katia. I am a freelance illustrator so it’s implied I’m a master in Adobe Photoshop and Illustrator. I also am super amazing in After Effects, which proved to be a Hail Mary moment while on a gig: my producer came to me asking about Lottie. I spent many hours digging through a lot of confusing documentation, GitHub posts, and breaking my files to emerge before you as a Lottie expert.
I wrote this article because I was desperate for “Lottie for Dummies” documentation and couldn’t find anything simple and comprehensive. If you don’t know what it is and want a high level overview of Lottie, Bodymovin, and this elusive Jason everyone keeps talking about, you’re in the right place.
What the Hell is Lottie?
It’s a way to export animations (ideally but not limited to vector) from a designer to an engineer in a file that already has the cool stuff like assets, timing, animation baked into it and ready to implement in code.
What the designer delivers is a single .JSON file (which… if exported properly… contains the asset directly in that file).
Why Lottie is Cool and Powerful
Having worked in mobile games, I’ve seen the pipeline required to get a single asset moving and then implemented in a product. Often we rely on PNG sequences, sprite sheets (OLD SCHOOL!), and/or engines like Unity that require technical artists. This is then pushed to code and usually the engineers are pissed because someone broke something somewhere. Or, the engineering team is given reference animation of a button push, and they have to eyeball the timing and animation effects, which might lose the essence of the delivered reference in translation between artist and engineer.
How Lottie is a Cruel Mistress
Lottie requires JSON files which at the time of this writing, can only be done via After Effects using the Bodymovin Extension.
So if you don’t know how to use After Effects, you need to have a quick boot camp on compositions, keying, or at the least be able to import footage like gifs or pngs and know how to use the Bodymovin extension.
Also, since After Effects is the middle man, this means all XD, Illustrator, and Photoshop assets need to go through Bodymovin to get a JSON file.
Further, and this is the most frustrating part: Lottie doesn’t support over half of the things you can even do in After Effects, therefore limiting you to scale, position, opacity, rotation, some masks, and specific types of object layers. So your JSON will be missing the effect or just be broken.
Don’t worry though: you can always import png sequences and/or convert your elements with layer styles (such as bevel, drop shadow) to Smart Objects which can then be brought into After Effects for animation.
There’s a great chart I found deep in the documentation that will give you better insight into what exactly you can and cannot do. You can find it here.
Where Bodymovin Comes into Play
Bodymovin is a free Extension you add to AfterEffects. Instead of rendering footage via the Render Queue, you’re using the extension to “render” to JSON. Keep in mind that there’s permissions you need to grant for Bodymovin to do this which is set in Preferences. (If you don’t do this you WILL NOT be able to export)
Bodymovin has different ways to handle assets (the art) so be sure to click on the Asset Options and select assets to be included in the JSON file.
When You’re Ready: Lottie!
This all ties back together by taking those sweet fresh JSON files and uploading them to the Lottie preview website! Now, you can send that JSON animation to team members, clients, and your mom! They can view the file in iOS/Android by scanning a QR code (which comes in handy if you’re delivering, say, a PDF to a client) or by clicking a link that’ll take them to mobile.
Other cool things you can do in the preview mode is toggle layers (if applicable), change background color, and even change playback speed.
TLDR;
Lottie is a platform that uses/shares JSON files, Bodymovin is an After Effects extension that “exports” After Effects compositions as JSON files. It’s a great way to retain the original intent of animated assets between designer and engineer because it animates stuff natively/in code.
Thank you, save often, and be brilliant.
Follow @katiadesignsthings
Hire www.katiadesignsthings.com
Hello katiaoloyinfo@gmail.com
