Airbnb Lottie Beginner's Animation Course
Hello! I’m Mariaucris UX UI Designer, but with a keen interest in animations :)
If you clicked on this article, maybe you are in the same phase that I’m in: discovering, learning and investigating. That’s why I would like to facilitate and share plugins that you can install, a step-by-step guide and tips to animate with this powerful tool, because while I did the official course of Airbnb Lottie, I didn’t have a place to summarize such a large amount of very useful information.
What does Airbnb have to do with this?
In the past, building complex animations was a difficult process. It was common to write a thousand lines of code, just to have something similar to first animation ideas. This still happens and also is a hard-to-maintain code. Because of this, most platforms weren’t using animation (despite it being a powerful tool for communicating ideas and enhancing the user experience). So here is when Airbnb came with their solution :)
Surely there is an interesting story behind it, but the way Airbnb explains it tells us that the extension Bodymoving is created by Hernan Torrisi approximately in 2015, and thanks to his work, animations can be rendered on the web. Then Airbnb’s team used it to share their expertise with iOS, Android and React Native.
Investigating with real examples
If you want to better understand those smooth animations on your favourite website, I recommend you just inspect the html, and there will be the answer. This will tell you if that beautiful animation is made with code (which is the best approach) or if is just a video/gif.
Here an example of how looks an animation made with code using a .json resource.
So here are the main points I’ve analyzed about implementing this kind of animation.
- It’s an open source tool.
- Higher quality and less weight.
- Easy-to-maintain code.
- It’s the perfect solution for responsive animations.
- The result will be exactly the motion designer’s intent, because the code isn’t created from scratch.
- Loads faster than a video or gif.
- Works only with After Effects.
- It doesn’t support DUIK plugin or expressions in AE.
- You have to be careful on what effects you use, because maybe won’t work when you export it into a .json file.
And now the free course!
Now that we can identify types of animations (I mean the type of creation) and we already know more about the origin of Lottie, we can start the course, and create smooth animations in code. Here you can find the link to the free course (an initiative from Airbnb) Start Lottie’s course!
As you can see in this picture, you will need around 5 hours to complete it (at least to see it) then more time if you want to do the exercises.
Our Teacher
Salih Abdul Karim is a “Design Leader” at Airbnb with a passion for animation and motion design. He’d explain to us the basics to have the best animation in a .json file. If you want to know him better, here is a interesting interview as well as a portfolio of his creative interface animations. Salid Abdul interview.
Tools
These are the main tools you will need in order to successfully complete the course and finally create your first animation on Lottie.
Scripts Needed for After effects
While I was doing the course I started searching for the tools needed in order to migrate illustrations from the Sketch app or Illustrator to finally work on after effects composition. In this section, I will summarize all of the plugins and tools needed, in the hope that it will help you.
1. ZXP Installer
ZXP is a user-friendly installer for Adobe extensions. Let’s see it as a manager tool that will only help us to connect scripts to our after effect software. These scripts, that will be connected, are normally downloaded from other sources such as websites (sometimes free). Download here:https://zxpinstaller.com/
2. Group Layers
This is a very valuable script that will help you animate faster, allowing you to merge shape layers. It has an “after effects” focus. Here you can find a old but free downloadable version of the Explode Shape Layers script. If you want to buy it with the last version it’s possible in the official website. Download here: Free Explode Shape Layers & Aescripts.com
3. Sketch Connection
And you will wonder … Is it possible to bring our design in sketch to after effects in a single click? The answer is yes! For this we’ll get a plugin which will need to be installed in both programs (sketch and after effects).
First of all, you must download both extensions; the AEUX plugin and the AEUX script. Download here: AEU extensions
Once you have it, just open the file plugin with sketch, and then open the script with ZPX manager (Tool #1, that we previously installed).
Both extensions work on both softwares
4. Here is the magic!
With this plugin “Bodymoving” (that one that Hernan Torrisi created) we can translate our animation into a code, so we can add it to a website. An animation made in code, will always be better than adding a video or a gif in your html, because It’s a “readable” media, that has a better quality, better behavior to scale in another device’s breakpoints and also is faster to load. Download here: Bodymoving
5. Lottie
Lottie airbnb plugin allows you to upload animations into Airbnb marketplace and also have some tools to edit it. Actually, I think it’s the only value it provides, because if you only need the .json file then the “bodymoving” is enough to accomplish your objective. Download here Lottie plugin
The take away
In this article we have covered:
- What the origin of Lottie was and how Hernan Torrisi worked with airbnb to achieve this wonderful tool.
- A simple way to discover animations and how they are created just using the “inspect mode” in your browser.
- Some advantages and disadvantages when we use this tool. For example that this only works with After Effects.
- The new free course from Airbnb to animate with after effects, which will help you to understand better practices and how to install all plugins and scripts needed.
- Finally, links and quick tutorials to install each of the tools mentioned in the airbnb course.
I hope you enjoyed reading this article! And has also helped you with this little onboarding process for Lottie!
