Lottie
Mon Mar 2021

A Brief Outline of Lottie

In the current world of animation, the role of Lottie is significant. But a mere statement wouldn’t exactly give everyone the idea why Lottie is awesome. To provide you an overall picture of why you should be using Lottie, Animoox did its research and came up with this brief outline. Let’s began with the old days of animation, shall we?

3 Ways Animation Was Done In the Past

In the early days of animation, the process was tiresome and took a toll on the animators. They had three options to create a wonderful animation but to their dismay, neither of them was any convenient, to say the least. The options and their issues were as follows:

1) The Humongous Size of Images or Video

Thing is, it’s definitely a great idea to renovate your website with images, GIFs, video or PNG. However, however, the files are humongous and to edit an animation, you need to go back to the original file. This creates a lot of hassle and takes away the valuable time of an animator.

2) The Complications of Flash Animation

Nearly 15 years ago, content creators were able to create things that were never before seen on the internet. Since then, Adobe Flash had lived its days. The process was a bit little complicated but it wasn’t bad when we consider the era. The animation was created in Adobe Flash then it had to export as a Flash file, for example, as SWF (ShockWave Flash), and then finally, it could be incorporated on the web.

As mentioned earlier, it wasn’t bad or anything but as the internet began to grow, the downfall of Flash came pretty quick. The internet witnessed the rise of HTML5 which overshadowed Flash. Besides, the ritzy-looking smartphones didn’t support Flash implying that it’d be just as good as the extinct dinosaurs. To make matters further complicated, any Flash content took a lot of time in loading and an animator would have to return to the drawing board in order to edit an original file. Imagine, how tiring this sounds!

If this wasn’t enough, Adobe Flash Player would have to be installed in order to create the content in the first place. And Adobe Flash Player required regular updates otherwise the content wouldn’t have properly worked. It already sounds so tedious. No wonder why Flash never really lasted.

3) Lagging Behind With Coding

To make things much simpler, the alternative for the above options is to design the animation and later on, deliver the video file as a reference. Next comes the tricky part – the developer is responsible to use that reference file and create it from scratch using code. The advantage of creating animations through coding is that the ultimate file is low in size and provides the opportunity to manipulate that animation later in the code.

However, there’s also a drawback. The process is very, very tedious and takes away a lot of time in replicating an animation by using code. Also, it is very unlikely whether coded animation would be just as same as the reference file. You could second check by matching the animation frame by frame but surely no one has the time to do that.

How Lottie saved the world of animation!


The world of animation was in a dire need of Lottie.

Why? you may ask.

We have an entire blog-post on it but we’re going to run you through the process just so your understanding of Lottie gets clearer and clearer. The work of Lottie begins by creating animations in Adobe After Effects. While creating the animations, it’s necessary to avoid bitmap images as Lottie wouldn’t what to do with these formats of images. Another thing that’s necessary to keep in mind is that you need to stick using the vector tools that are placed inside of After Effects.

For the time being, what Lottie supports are shape layers, masks, solids, trim paths, alpha mattes, and dash patterns.

After preparing the animation, you need to run it through the Boydmovin After Effects plugin. This would present you with a very small-sized file called a JSON file. It’s only a few kilobytes making it convenient for you to use it anywhere you like, however you like. In the later steps, then only you need to do is implement this JSON file into your website or app just by using a few lines of code. How easy could this get, right?

Where to get free Lottie animations in case you don’t know the basics of Adobe After Effects?

It’s alright if you don’t know how to use Adobe After Effects. Even though that’s where the animation is created from scratch. Because the Lottie community has a lot to offer. You can get a pile of free Lottie animations, which you can download very easily but remind yourself to credit the author. After all, every hard work must be respected.

So, to sum everything up, if you aren’t using Lottie for your websites or apps then Animoox highly recommends you to do so right away. As an animator, your life would become 10 times more convenient. Your work will be done quickly, you can change the size of the files without ruining their quality, and as mentioned earlier, you can place it anywhere you like. 

That’s Lottie for you – the lifesaver of every animator, the super awesome element that made websites cooler than ever and paved the way for a dynamic new future of animations.

Let’s work Together

At Animoox, we bring together our client’s opinions and our creativity to create effective and memorable animation.