How to Create a LottieFiles Animation in After Effects

0

LottieFiles has created a fast, scalable, post-render editable file type, and it’s easy for you to get involved and create animations in this format. Using Adobe After Effects and some plug-ins, you can become part of the hot new file type: the Lottie.

What is a lotto?

A Lottie, or dotLottie, is a file type that is taking web developers by storm. You may have created animations to include in your designs, 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 is all the good parts of these file types, but smaller, faster, and easier to edit after rendering.


Screenshot showing the LottieFiles animation library

LottieFiles is a huge database of animation presets saved in Lottie or JSON formats. These animations are rendered in real time, allowing for faster shipping in your designs. There is no waiting for these files to be downloaded; they will appear as soon as the page opens.

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

To start

We will 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 animation in SVG format to Lottie if you have already made an animation in this format.

USE VIDEO OF THE DAY

However, After Effects is our top choice, since LottieFiles was originally created for use in After Effects. Let’s start.

1. Create your animation


Screenshot showing illustration in Adobe Illustrator

The animated look of your Lottie is the same as any other format. We created the artwork for our animation using Adobe Illustrator. This keeps the layers separate and ready to import into After Effects. Once your artwork is imported, you can adapt the layers of your composition for the final animation.


Screenshot showing animation in Adobe After Effects

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

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 also be found in other software. They each do slightly different things, but we’ll focus on the LottieFiles plugin for now.



Screenshot showing LottieFiles plugin options

To download the LottieFiles plugin, go to LottieFiles After Effects plugin page. You will find two download options.

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


Screenshot showing Anastasiy Extension Manager and LottieFiles plugin

Once the ZXP plugin is downloaded, open the Anastasiy extension manager, click on Side effectsselect the LottieFiles plugin from the list and press To install.


Adobe Plugins screenshot showing LottieFiles install button

Back on the LottieFiles plugin page, also download the Adobe Exchange plugin; open your Creative Cloud desktop app and install the plugin. Go back to your finished animation in After Effects.


Screenshot showing the After Effects Preferences menu

Some people have permission error when using these plugins. To avoid this problem, go to Side effects > Preferences > Scripts and Expressions > Application script and check the box for Allow scripts to write files and access the network.

Once done, the LottieFiles popup will ask you to sign in. If you don’t already have a LottieFiles account, now is the time to create one.

3. Export your lottery


Screenshot showing After Effect LottieFiles rendering options

With LottieFiles plugins installed, you can render your Lottie animation. When your animation composition is complete, click The window > Extensions > LottieFiles. This will bring up a pop-up window with the names of your comps. Click it 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 in a loop. Here you can choose to save your animation or upload your animation to the LottieFiles library.


Screenshot showing LottieFiles save options

By clicking Save as will give you two export options: Lottie JSON (*.json) or dotLottie (*.lottie). The dotLottie file is a compressed 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. What if you wanted the animation ready to go? Let’s see how you can access it.

How You Can Use Your Lottie Animation

To upload your Lottie to the LottieFiles library, click To download. This will display 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 animation to the LottieFiles library. Name your file and press Delivery.

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.


Screenshot showing the LottieFiles editor and its layers

There are more ways to use your LottieFiles animation than directly in the plugin library. You can further edit your Lottie animation from the browser window. It offers a basic layers panel; you can change the background color, playback speed, frame rate, and a few other things.


Screenshot of the LottieFiles transfer page

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 GIF for more conventional uses. You can also embed your animation with an HTML embed code, and there are also iOS and Android options, so you can embed the animation into your web design.

Lottie HTML integration allows you to modify the code to modify 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 some posts.

Create a lottery in After Effects

While it may still seem like an unconventional file type, since you can’t just upload your animation directly to social media like you can with a GIF or PNG, the Lottie has many advantages for web developers and designers who use plugins or embed codes into their designs.


Lottie and JSON files save space and loading time, and preserve quality compared to traditional file types. LottieFiles is constantly creating new ways to implement designs, the possibilities are endless.


iPad showing Procreate animation
How to create motion animation using Procreate

Creating motion animation in Procreate is easy, and this article will show you how to do it.

Read more


About the Author

Share.

About Author

Comments are closed.