Published on December 23, 2023
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 on 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 it’s 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
An alternative to the aforementioned methods is a simplified approach: designing the animation and delivering a video file as a reference. However, the challenge arises when the developer needs to reconstruct it from scratch using code. While creating animations through coding may seem intricate, it offers a distinct advantage. The resulting file is compact in size and grants the flexibility to manipulate the animation further within 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, the 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?
Even if Adobe After Effects seems daunting, the Lottie community has your back. There’s an abundance of free Lottie animations available for download, offering a treasure trove of creativity. Just remember, when you utilize these resources, giving credit to the original author is a way to honor their hard work.
In a nutshell, if you haven’t embraced Lottie for your websites or apps yet, Animoox strongly suggests you do. For animators, it’s a game-changer, making your workflow ten times smoother. Tasks are completed swiftly, file sizes can be adjusted without compromising quality, and, as mentioned before, you have the freedom to position animations wherever you please.
