Lottie is a library that helps render Adobe After Effects animations natively on mobile and the web. I like using Lottie for animations in my projects because:

  • Creating an animation from scratch can be time-consuming, and
  • GIF files can be double the size of Lottie JSON files (the files containing the Lottie animation)

If you use Lottie frequently in your projects, you have probably felt the stress of:

  • finding an appropriate Lottie animation (if you are not familiar with Adobe After Effects)
  • knowing what the complete animation looks like
  • editing it to your preferred style, and
  • implementing it on the web or mobile.

The aim of this article is to boost your productivity as a Lottie designer and developer by providing you with efficient Lottie resources. I will try to include a lottief resources to be as helpful as possible. No pun intended.

Resources to Get Lottie Animations

After you have created your animation in Adobe After Effects, you can export it to the Lottie JSON format using the bodymovin extension.

If you are not familiar with Adobe AE, you can get Lottie animations from a number of places. Let's look at some options here.

Drawer

Drawer offers both free and paid Lottie animations in various formats like JSON, SVG, and PNG as well as Adobe AE, XD and Illustrator files.

After you have selected your preferred animation pack, you can then go ahead with the format you want to use, preferably the Lottie JSON format.

Screenshot of Drawer's Coronavirus Icons' page

LottieFiles

LottieFiles also offers free and paid Lottie animations. There are packs and individual icons, but unlike Drawer, LottieFiles strictly provides JSON files for Lottie animations.

Screenshot of teen walking animation on LottieFiles

Icons8

Icons8 provides individual animated icons as well as packs of related animated icons. They provide links to the statically-hosted Lottie JSON files of the animations, which you can either download or use as is in your implementation.

Screenshot of Icons8's pause animated icon's page

Lordicon

Lordicon is a website that offers animations that you can customize before you use them. You can edit features like color and width and then download the animations in your preferred format.

Aside from the JSON format, they also provide animations in HTML, GIF, AEP, PNG, EPS, and SVG.

Screenshot of Lordicon's icons page

How to Preview Lottie Animations

After you have gotten your Lottie animation from one of the sites listed above, you might want to see all the frames you have in the animation. That is, you'll want to watch the animation play from beginning to end.

While this is usually displayed on the sites where you get the animation, I recommend that you check what is in the file you are downloading to confirm that it is what you think you are actually downloading.

Screenshot of Drawer Preview page

To do this, you could go ahead and implement it on web or mobile – but that would just be time-consuming.

Instead, there are resources out there like Drawer Preview and LottieFiles Preview that allow you see what is in a Lottie JSON file. All you have to do is drag and drop the file on the provided box. When you have dropped the file, the animation plays automatically and loops, too.

Screenshot of LottieFiles Preview page

How to Edit Lottie Animations

You might want to tweak one or two things in your animation. Since you did not create it yourself on Adobe AE, you might think that tweaking it isn't possible. But that is not entirely true.

With LottieFiles Editor, you can see the width and height of the animation, frame rate, number of frames, duration, playback speed, and all the layers present in the animation.

Apart from the number of frames, you can edit all these features to your preferences. When you are done, you can share the draft with someone, export a particular layer or the entire Lottie animation, or export it as a Telegram sticker after meeting the required specifications.

Screenshot of LottieFiles Editor page

How to Implement Lottie Animations

This is the part where you actually use the animation after you've inspected it and made any edits you wanted to make.

You could implement the animation natively on the web, mobile, or CMSs. There are many tutorials out here that show you how to do this, but here I'll provide a few comprehensive resources.

How to Implement Lottie on the Web

How to Implement Lottie on Mobile

How to Implement Lottie on CMSs

Lottie Docs and Libraries

In addition to the tools I listed above, when you're implementing Lottie animations there is no better place to start looking than the Lottie documentation. If you are more comfortable with the npm package, here is the package’s documentation too.

Also, the Lottie libraries for various platforms are available on GitHub:

With all these resources, I really hope you will not be lost because of something Lottie-related.

Thanks for reading and happy animating!