LottieFiles has created a fast, scalable, post-render editable file type, and it’s easy for you to join and create animations in this format. By using Adobe After Effects and a few plugins, you can be a part of the latest file type promotion: Lottie.

What is a Lottie?

A Lottie, or dotLottie, is a file type that is taking web developers by storm. You may have created animations to incorporate into your design, whether 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 has all the good parts of those file types, but is 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 of your designs. There’s no waiting for these files to download; They will appear as soon as the page is opened.

To learn more about LottieFiles, see our introduction to Lottie.

To start

We are going to create a Lottie using Adobe After Effects, but there are other software you can use to create your own Lottie animation. You can use Adobe Animate with the LottieFiles plugin to create Lottie. You can convert an SVG format animation to a Lottie if you have already created an animation in this format.

Our top choice for After Effects, however, is that LottieFiles was originally built to be used in After Effects. let’s get started.

1. Create Your Animation

The animating aspect of your Lottie is the same as any other format. We created an illustration of our animation using Adobe Illustrator. This keeps the layers separate and ready to be imported into After Effects. Once your illustration is imported, you can customize the layers of your composition for the final animation.

Lottie animations run on a continuous loop, so consider the end and start points of your design. The animation should be simple and about three seconds long.

2. Download Plugins

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 be found in other software as well. They each work a little differently, but we’re going to focus on the LottieFiles plugin for now.

To download the LottieFiles plugin, visit the LottieFiles After Effects plugin page. You will get two download options.

The option on the right requires Anastasi’s Extension Manager that works with both Mac and Windows. Once you have downloaded the extension manager, download the ZXP plugin from the LottieFiles page.

Once the ZXP plugin is downloaded, open the Anastasi Extension Manager, click on After Effects, select the LottieFiles plugin from the list, and hit Install.

Back to 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 permission error when using these plugins. To avoid this problem, go to After Effects > Preferences > Scripting and Expressions > Application Scripting and tick the box for Allow scripts to write files and access networks.

Once this is done, a popup for LottieFiles will appear asking you to log in. If you don’t already have a LottieFiles account, now is the time to create one.

3. Export your lottery

With the LottieFiles plugins installed, you can render your Lottie animations. When creating your finished animation, click Window > Extensions > LottieFiles. This will bring up a popup with the name of your creations. Click the green arrow next to the name of your creation, this will open the Lottie render window.

After a few seconds, your animation will appear in a popup window. The animation will run in real-time on a loop. Here, you can choose to save your animations or upload your animations 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 contains metadata, which we don’t really need to export. 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 want the animation to be ready to go? Let’s see how you can access it.

How can you use your Lottie animations?

To upload your Lottie to the LottieFiles library, click Upload. It will render for a few seconds. Then, click on the button with the globe on it. This opens the LottieFiles website where you can submit your Lottie animations to the LottieFiles library. Name your file and hit Handoff.

Leave a Reply

Your email address will not be published. Required fields are marked *