What The Heck Are Lottie Animations?

If you’re a web designer or animator and haven’t experienced Lottie animation files yet then you are missing out! Lottie Files are an incredible animation file format that runs purely off text based code. (That sounds Geeky I know but…) Due to this, the code and file size is incredibly small; Lottie themselves compare it to that of a small puppy compared to the dinosaur-esque size file of existing GIFs and PNG files we animators are used to. Lottie Files are causing a BIG buzz in the animator’s community due to their super-optimised size and simplicity.

We’re going to delve more and more into Lottie at the Artist Animator Life blog and help you get to grips with this unique type of animation file. It’s going to be massive! and a hugely useful tool kit to have in your online animation arsenal. Let’s first take a quick overview of the file, its uses and why it’s so damn good! before we delve deeper into using and creating Lottie Files in your day-to-day work in designing for websites and apps.

Lottie Files are a JSON animation file format composed of vector graphics that more and more designers are turning to for their own animation designs and projects.

So what’s so good about Lottie animations?

So what is it about Lottie Files that make them so good? Let’s start with the obvious – the look! It’s always fun to discover new animations as they are such an interactive and bright medium to work with.

Here are a couple of cool Lottie files that caught my eye when having a look at some of the free-to-use examples available on the Official Lottie Website:

As you can see from these Lottie animation examples, they can be used for character animation, 2d motion design of graphs and chats, logo animation and animated illustrations. Seamless, simple and slick, these are prime examples of what the Lottie file can do. It’s clear to see from these how heads are turning when it comes to considering this file option for your project or website.

Major advantage!

Secondly, the major feature of Lottie Files that makes them so good is that they are vector-based animations (rather than raster). This means they are really scalable, you can scale them up without losing any resolution or quality!

If you have used Adobe Illustrator before you will have experience with vector graphics already, you can make these as large as you want and they won’t get pixelated.

“Scale them up without losing quality!”

As opposed to something like Adobe Photoshop which is raster based. Imagine you take a photo, then scale it up or zoom in. The larger you go the lower the quality and the more pixelated. But NOT with Lottie files! they are resolution-independent… scale away people, you have nothing to worry about!

This can really help with the flexibility of Lottie file use.

The Lottie File Marketplace is a great place to start if you want to get a feel of what is possible with this file type. Here you can see a whole host of designs and animations from some of the top animators in the Lottie File community.

Consider when you’re looking at the size of the code behind the design. I for one am always blown away by the high quality you can see within this animation and how that is preserved within such a simple base code.

“Seamless, Simple and Slick”

Free Lottie animations

One feature of the Lottie marketplace that is great for new starters is the simple method of getting your hands on some animations to play with.

With a free account, you can easily download a selection of free Lottie animations for you to play with. It’s just a few clicks to get the lines of code you’ll need in order to place the file where you want to place it. 

When downloading, some animations are customisable so you can change colours, playback speed, background colour – you name it.

Of course, there’s a place for you to upload your own Lottie files to share with other artists and Lottie File users. The marketplace makes it possible for you to monetise and sell your creations which is certainly an added bonus if you’re an aspiring Lottie explorer who’s looking for ways to share their work with others.

“change colours, playback speed, background colour – you name it”

Can I use them in WordPress?

You’ll be able to see at a glance where all the animations could potentially be used (we’re talking HTML, WordPress) as well as all the places you can manage and manipulate the file if needed.

There is a FREE Lottie WordPress Plugin available that not only lets you insert lottie animation files straight into your WordPress posts, you can actually browse the full library from within WordPress using the Discover function and insert them in one click!

Can I make my own Lottie animations?

You certainly can make your own Lottie animations! You will need some animation experience and knowledge of Adobe Illustrator & After Effects to make Lottie files, as it is equipped for working with vector based animation.

The most widely used plug currently for Adobe After Effects to export Lottie files is called Bodymovin

Unfortunately, when it comes to Lottie Files, old faithful Adobe Photoshop just won’t cut it!

For all you animators and Motion designers, I plan to make another tutorial and article on how to make your own Lottie animations and Lottie files… watch this space

I’ve not yet personally set up a creator account but I imagine it’s pretty user-friendly and easy to work with.

Lottie files vs GIF’s & PNG’s

When pitted against other animation file formats (such as GIFs & PNGs), Lottie Files certainly have a whole lot to brag about. In the red corner, we have Lottie Files.

A featherweight contender, Lottie Files are smaller, agile and take up less lines of code when it comes to implantation on websites and apps.

In the blue corner, long-standing contenders GIF and PNG are certainly more of a heavyweight duo with larger file sizes taking up more code space and load time.

Naturally, smaller applications and mobile design will lean towards lighter file sizes to assist with installation ease and even less load-up time.

Whilst GIF & PNG probably isn’t going away any time soon, it’s fair to say that Lottie files are a fierce contender when it comes to which animation file type.

It’s definitely the right time to acquire a working knowledge, understanding and appreciation of Lottie files and how they can be an important tool in any animator’s toolkit.

I imagine a good animator/creator CV will certainly be enhanced by a knowledge of creating and implementing Lottie files.

Everybody loves Lottie

The Lottie file is welcome in all of the digital playgrounds.

For all you web developers out there, Lottie files are compatible with any browser that runs JavaScript.

In terms of design and development, this means you can get your Lottie files everywhere from Web to iOS and Android. Gone are the days of working for one format and for one platform.

You’ll need your animations to be mobile-friendly, responsive and viewable on all kinds of devices – with its size, flexibility and maintain quality when resizing, it’s fair to say Lottie ticks all the boxes.

A Lottie still to talk about

Before we close this article, here are couple of fun extra bits of info on Lottie files that I found interesting when looking more into this topic:

• Why are Lottie files called Lottie? The creators named the file after German film director Charlotte ‘Lotte’ Reiniger who was one of the original pioneers of silhouette animation.
• Who created Lottie files? If you can believe it or not, the creators of AirBNB are behind this new file phenomenon! Their top developers pooled together to develop this new format.

It’s been great to get a bit more insight into this file type and I’m looking forward to exploring them further. I think this intro to Lottie files has literally scraped the tip of the iceberg in terms of what’s possible with this animation file type.

Here on Artist Animator Life, we’ll be putting out additional content and tutorials on Lottie to help you get even more insight into this file type. Stay tuned for additional guides on use, creation and implementation.

If you find video tutorials as useful as I do, then make sure to check out my YouTube channel for regular hands-on tutorials on animation techniques for new starters and beginners alike.

I also have a growing community of animators on Facebook if you’re looking to ask questions, share ideas and get involved with the latest goings-on in the animation world in my Private Facebook Group