Tools to create Lottie animations and integrations
In this section, we'll learn about the tools and plugins we need to install before we start creating our own Lottie animations. Don't worry if you haven't heard of them before. In this section, we'll cover all the main ones such as Adobe After Effects, Adobe Animate, and the LottieFiles platform.
If you need more information about how to install these tools, plugins, and extensions, please move on to Chapter 6, Don’t Stop! Exploring Plugins and Resources That Will Keep You Going, for a how-to install guide.
Adobe After Effects
Adobe After Effects is known as the industry-standard motion graphics and visual effects software. It's used to create movie titles, intros, transitions, visual effects for movies and videos, and animations.
So, if we want to create our own animations, we need to install Adobe After Effects. There's no other way, or at least there wasn't until recently (keep reading). Anyhow, bear in mind that this is not a free tool. However, before purchasing it, Adobe gives you the option to install the 7-day free trial version. This can be found at https://www.adobe.com/products/aftereffects.html.
The Bodymovin extension for After Effects
Bodymovin was the first After Effects extension that was initially created to export your Lottie animations. It exports your animation into.json format, which can later be tweaked on the go. You can download your Bodymovin plugin at https://exchange.adobe.com/creativecloud.details.12557.bodymovin.html:
Figure 1.19 – The Bodymovin icon
The LottieFiles extension for After Effects
We've been talking a lot about the Bodymovin extension. But recently, Lottie has also released the LottieFiles plugin for After Effects, which exports your animation as a .Lottie file. The difference between Bodymovin and LottieFiles is the newly added features in the LottieFiles plugin. We will go into more depth on this once we talk about how to export your animations in both the Bodymovin and LottieFiles plugins.
Download the LottieFiles for After Effects extension at https://lottiefiles.com/plugins/after-effects:
Figure 1.20 – The Adobe After Effects icon
The Lottie extension for Adobe Animate
If you are not that familiar with After Effects and would like to try some other tools to create your animations, now you can! It seems that people at Lottie just released an early Beta version of the Lottie plugin for Adobe Animate.
We could say Adobe Animate is the evolution of what once was known as Macromedia Flash, and it is used to bring vector graphics to life.
If you want to try it, you can download the Adobe Animate plugin from https://lottiefiles.com/plugins/animate. However, in this book, we are going to focus on Adobe After Effects:
Figure 1.21 – The Adobe Animate icon
The LottieFiles platform
We can download and install LottieFiles on our mobiles and desktops to preview, test, and share our Lottie animation files. Here are the relevant resources for Mac and Windows:
- LottieFiles for Desktop: https://lottiefiles.com/desktop
- LottieFiles for Android: https://play.google.com/store/apps/details?id=com.lottiefiles.app&hl=en&gl=US
- LottieFiles for iOS: https://apps.apple.com/us/app/lottiefiles/id1231821260
Figure 1.22 – The LottieFiles icon
That's all we need to create our own animations. However, Lottie gives us some more integrations with other tools and software such as Figma or Sketch. You can check them out at https://lottiefiles.com/integrations.