Thoughts on getting started with Lottie and After Effects
AirBnB created this amazing tool for creating the ever so needed UI animations for Android, iOS & web. It’s called Lottie.
You can finally be the motion designer you always dreamt off. And you almost don’t have to code. So what is Lottie? Lottie is a library that renders After Effects animations. By using a plugin called Bodymovin. Bodymovin renders .json so you can hand it off to your developer (or implement it yourself).
But that’s cool and all. But where do I start? What do I need?
You’ll need: Adobe After Effects, Bodymovin plugin, xCode, Android Studio or Lottie Preview.
Is this really needed? I already have to think about Sketch, Flinto, Framer, Pixate, Affinity Designer, Adobe xD, Invision Studio, Zeplin etc etc etc….
Yes and no. I always recommend sticking to the guidelines of iOS and Android. But sometimes you want that extra bling bling in your app. Make things that pops, you know. Lottie is the tool to help you brand your app. Things like custom spinners, loadingbars, onboarding, login animation etc. And view Framer, Flinto and Princible as your transition tool, for the app as a whole.
Getting started with After Effects
After Effects feels like an intermediating step. And to be honest, it is. But if you have worked with the rest of the Adobe line, it might not be that bad. You got layers, masks, vectors, paths, precomps … precomps.. Okay maybe its not totally photoshop but you’ll atleast be used to tons of buttons you don’t know how to use.
I rarely use Illustrator, photoshop or inDesign these days. And it doesn’t seem like I’m the only one, so a few nice guys at Google created a plugin for Sketch, to export from Sketch to After Effects.
Now I’m no expert, but what I’ve learned is the easiest way to control animations in After Effects is to reproduce the shapes and strokes, with the tools in After Effects.
To get started with After Effects I highly recommend this Skillshare course by Jake Bartlett. The Ultimate Guide to Shape Layers in After Effects.
Using the Bodymovin plugin it’s super easy, to render your animation and export it to .json. Developer tip: If your animation has more states, write down the frames for the shift. Example the above, spinner to checkmark animation. It has 2 states. 1 is the spinning animation it starts at 0 frames and ends at 35 frames. If the loading isn’t complete, it should repeat frame 0–35. However, if it is loaded, we should animate frame 36 to the end. Try to keep the animation in one .json file.
Pleeeeeeease I don’t want to code!
I hear you. But getting the code to run in Swift, feels good man. If you want to get it up and running in Swift a small amount of code is needed to get it to run in a loop. First off you need to install Lottie with pods. Pods are fairly easy to get up and running. There is an installation guide here.
Create your xCode project.
Install Lottie in your folder.
Install Lottie inside xCode. This will create a workspace instead of a xCodeproject.
Now lets get this animation going! Import Lottie and let the magic begin!
But wait there is no loop. Sad smiley. Let’s fix it with animationView.loopAnimation = true
“This seems a bit much, let’s check our animation the easy way”
If you just want to see if your animation works, you can use Lottie Preview.
With Lottie Preview you can check if your .json runs smoothly. I still strongly recommend that you get it running in Swift so you understand what happens, so you don’t look like a big question mark, when the developer starts asking you questions.
So what’s next?
I’d love to see more Lottie content. There isn’t much information out there. And I hope more people will jump the wagon, and learn some After Effects. Hopefully some of the above information is usefull. Hit me up on Twitter if you have questions, good advice, or just want to tell me what a bad ass Lottie user you are 😎
