How to Create a LottieFiles Animation In After Effects – MUO – MakeUseOf

Want to join the Lottie trend? We’ll show you how to make a LottieFiles animation in After Effects.
LottieFiles created a fast, scalable, post-rendered editable file type, and it’s easy for you to get involved and create animations in this format. Using Adobe After effects and some plugins, you can be part of the newest file type hype: the Lottie.
A Lottie, or dotLottie, is a file type that’s taking web developers by storm. You may have made animations to include in your designs, whether they be for social media, web design, or UX and UI design. And you probably save your animations as GIF, SVG, or PNG files. A Lottie file is all the good parts of those file types, but smaller, faster, and easier to edit after rendering.
LottieFiles is a huge database of premade animations saved in Lottie or JSON formats. These animations render in real-time, allowing for faster shipping into your designs. There’s no waiting around for these files to download; they’ll appear as soon as the page opens.
To learn more about LottieFiles, check out our introduction to the Lottie.
We’re going to create a Lottie using Adobe After Effects, but there are other software you can use to create your Lottie animation. You can use Adobe Animate with the LottieFiles plugin to create a Lottie. You can also convert an SVG format animation into a Lottie if you’ve already made an animation in this format.
After Effects is our top choice, however, given LottieFiles was created originally to be used in After Effects. Let’s get started.
The animating aspect of your Lottie is the same as for any other format. We created the illustration of our animation using Adobe Illustrator. This keeps the layers separate and ready to import into After Effects. Once your illustration is imported, you can adapt your composition’s layers for the final animation.
Lottie animations run on a continuous loop, so consider that for the ending and start points of your design. The animation should be simple and around three seconds long.
There are two plugins you can use to create a Lottie file: the LottieFiles plugin or the Bodymovin plugin. Both are available for After Effects, but the LottieFiles plugin can also be found in other software. They each do slightly different things, but we’re going to focus on the LottieFiles plugin right now.
To download the LottieFiles plugin, head to the LottieFiles After Effects plugin page. You’ll find two download options.
The option on the right requires an Extension Manager from Anastasiy that works with both Mac and Windows. Once you’ve downloaded the Extension Manager, download the ZXP plugin from the LottieFiles page.
After the ZXP plugin has been downloaded, open the Anastasiy Extension Manager, click After Effects, select the LottieFiles plugin from the list, and hit Install.
Back on the LottieFiles plugin page, download the Adobe Exchange plugin as well; open your Creative Cloud desktop app and install the plugin. Return to your finished animation in After Effects.
Some people have a permission error when using these plugins. To avoid this issue, go to After Effects > Preferences > Scripting & Expressions > Application Scripting and tick the box for Allow Scripts to Write Files and Access Network.
Once this is done, the popup for LottieFiles will ask you to log in. If you don’t already have a LottieFiles account, now is the time to create one.
With the LottieFiles plugins installed, you can render your Lottie animation. While on your finished animation composition, click Window > Extensions > LottieFiles. This will bring up a popup with the names of your compositions. Click the green arrow next to the name of your composition, this will bring up the Lottie render window.
After a few seconds, your animation will appear in the popup window. The animation will play in real-time on loop. Here, you can choose to save your animation or upload your animation to the LottieFiles library.
Clicking Save As will give you two export options: Lottie JSON (*.json) or dotLottie (*.lottie). The dotLottie file is a zipped file that includes metadata, which we don’t really need for exporting. We went with Lottie JSON.
Your exported file will be a text file, not a visual animation file; this is how JSON files work. But what if you wanted the animation ready to go? Let’s see how you can access it.
To upload your Lottie to the LottieFiles library, click Upload. This will render for a few seconds. Then, click the button with the globe on it. This opens the LottieFiles website where you can submit your Lottie animation to the LottieFiles library. Name your file and hit Handoff.
Once your animation has been approved in the LottieFiles library, you can use the LottieFiles plugin in software like Adobe XD, Figma, or Sketch to ship your animation to your design.
There are other ways to use your LottieFiles animation aside from directly in the plugin library. You can further edit your Lottie animation from the window in the browser. It offers a basic layers panel; you can change the background color, playback speed, frame rate, and a few more things.
From the Handoff window, you can download your animation as a JSON file for implementation in web development and design, or you can convert it to a GIF for more conventional uses. You can also embed your animation with an HTML embed code, and there are iOS and Android options too, so you can ship the animation into your web design.
Embedding the Lottie HTML allows you to edit the code to edit your animation. You can change colors and sizes right in the code when you add it to your website.
Downloading the LottieFiles app on your phone allows you to scan the animation’s QR code to preview the animation in the app. You can also use the LottieFiles keyboard and drop your dotLottie as a comment in certain posts.
While it may still feel like an unconventional file type, since you can’t simply just upload your animation straight to social media like you can with a GIF or PNG, the Lottie comes with many benefits to web developers and designers who use plugins or embed codes in their designs.
Lottie and JSON files save space and loading time, and preserve quality compared to traditional file types. LottieFiles constantly create new ways to implement the designs, the possibilities are endless.
Creating a motion animation in Procreate is easy, and this article will show you how to do it.
Ruby is a writer in MUO’s Creative category, focusing on writing about design software. Having worked as a designer, illustrator, and photographer, Ruby also has a BA in Graphic Communication and an MA in English with Creative Writing.
Join our newsletter for tech tips, reviews, free ebooks, and exclusive deals!

source