Lottie animation is a relatively new type of digital animation technology that has become increasingly popular in recent years. It is used to create high-quality animations for websites, mobile apps, and even messaging platforms. Lottie animations offer an attractive alternative to traditional GIF animations, as they are smaller in size, faster to render, and more cost effective.
Lottie animation is a special - so called JSON based - format that is rendered directly by the web browser instead of a pre-rendered animation being loaded and played. In layman terms that means that the user saves a lot of bandwidth because you only upload the instructions for an animation, not the rendered out animation itself as a compressed video and when somebody loads it, their computer will decode and render it out, meaning it will be much faster to load and display so it saves a lot of time and megabytes.
Previously animators had to render out huge GIF files that could be integrated onto websites, but not only were they huge in file size, they weren't interactive at all. With lottie animation, that all gets solved. Because it is not pixel, but vector based, you don't have to have a big pixel size. In fact, Lottie animations don't really have a set size and can be scaled to any dimension without losing any detail. It's effectively the same like having a PNG file compared to an SVG, only that this is an animated medium.
(Fun fact: Lottie animation got its name from Charlotte ‘Lotte’ Reiniger a German film director and the foremost pioneer of silhouette animation.)
Lottie animation has become one of the most popular tools for developers and designers when creating and animating user interfaces in mobile applications since it is a really versatile format and offers an innovative way to animate designs for both web and mobile applications that is consistent and fast.
Using Lottie animation makes it possible to do things that would usually require extensive coding and long hours of work. Now, animators have software to export vector animations to JSON format ready to be integrated with the app or website, no coding required. While animators have to follow some set of rules (limitations), they create it basically the same way as they would create any other animation. The difference is that when exporting, it is saved out in a JSON file format, rather than a GIF or MP4.
Since it is vector based, Lottie animations can be scaled to any size and will still be sharp, while if you would enlarge a GIF animation it would look pixelated, so the same assets can be used on every platform and interface, no need to create multiple versions to display one on a phone, the other on a computer screen.
This is the reason why Lottie animations take up a fraction of disc space than GIFs. What previously was 5 MB for example could easily be just a few KB. And that is a HUGE difference!
Another great advantage of using this technology is its ability to create dynamic animations with a wide range of styles.
Lottie animation allows you to add flair to your app or website, that wasn't possible a few years ago. It can be used in subtle ways, for example to have some elements, buttons move a little or suggest what the user should do by changing shape, moving a bit etc. Nothing too fancy, just enough to guide the users attention and help their navigation.
On the other hand you can be bold with Lottie and have a huge firework festival appear on screen when they press the subscribe button or create a smooth looking transition between pages.
Another useful feature of Lottie animations is the fact that the user who is browsing the app or website can manipulate them using various controls which can create unique and interesting experiences to an otherwise dull site or app.
For example you could set a moon to orbit a planet when the browser is being scrolled. But when the scrolling stops, so does the motion of the moon. If you scroll back up, the moon orbit reverses direction, so you control the planetary motions with your mouse scroll wheel. In short, it's fun!
You can also control how the animation plays with the motion of the mouse or the position. You can get really creative with its applications and can leverage the fact that a Lottie animation can be any size without losing quality, so it can even be as big as the browser window. For example you can have rain falling as you scroll that covers the whole site or have somebody walk through the screen. It's only limited by the imagination.
Talking about limitations, the power of Lottie animation is also the downside - kind of. It will give you a lot of freedom, but not everything is possible.
Since it is rendered within and by the browser, this disables the ability to use effects and plugins that would otherwise be available for animators in After Effects. Most of the animation will have to rely on simpler shapes moving around and changing into each other. Lottie works best with simple animations, but thankfully, there is still a good amount of things you can do with it.
What can you use:
What can't you use:
But since these limitations are known and not that big of a deal, good animators can work around them and create elegant animations that make user interfaces pop.
In conclusion, Lottie is a powerful tool for creating animation that works on all devices and platforms. It can be used to add motion to apps, websites, and other digital products. Not only is it incredibly easy to set up and use, but it also offers control over all aspects of the animation - from timing, easing, and more. Furthermore, developers can create animations within the same codebase as their app or website, making maintenance easier and faster.
Since Lottie is a relatively new file format, you can expect it to get better as time goes on. It's still something worth exploring if you want to animate in After Effects but use the animation in an environment where SVG and CSS are already being used.
