Lottie is a new design format that is becoming increasingly popular with businesses big and small. So, what exactly is Lottie? We've been hearing this question a lot from marketing agencies, entrepreneurs and even web designers. In this article, we'll cover everything you need to know about Lottie.
What is Lottie?
Lottie is a lightweight, JSON-based animation format that plays on any device or browser. It's widely used by designers and developers to improve the interaction of websites and apps. The vector structure of Lottie allows users to scale animations without losing the quality of the picture, and without increasing file size.
What are the main benefits of Lottie?
Lottie has a number of benefits, and almost all come from their size and flexibility. Sounds simple, doesn't it? But let's look at it from the user experience perspective.
Not that long ago, developers used to struggle for every kilobyte of website and application files because slow loading times get users pretty upset. Load times can make the difference between whether a user stays - or leaves your site. Even Google downgrades SEO rankings if a website is slow because bad experience is considered a key indicator of a bad website. So what developers did back then was either decrease image quality for a faster load time, or use bigger files and create a longer load time. In both scenarios, user experience suffered.
But Lottie revolutionized digital design, giving everyone involved the best of both worlds. Let’s break down the details of why they are so great.
1. Plays Everywhere
Lottie is multi-platform and plays everywhere: web, IOS, Android, React Native, you name it. Also, you don’t need any modifications for different platforms or screen sizes. You just create one file, and it’ll play on every platform, saving tons of time for designers and accelerating the process.
2. Always High Quality
You can zoom in and the quality will still be high and never pixilate. You can even do that when it plays (in real time) on any device. I want to keep this explanation as simple as possible, but if you’re curious to learn more, you can look up how vector images work.
3. Animation File Size
The size of a Lottie is always super small. To understand just how small, imagine that a PNG image is a heavy bison on your homepage. And a Lottie? It would be an ant.
4. Interactive Animations
Implement cool interactive animations that respond to mouse movement, scrolling, and more. Scroll down for a fun example.
How is a Lottie Used?
You can use Lotties for almost any kind of digital visual purpose: For example, an app or website hero animation, icon animations, interactive animations when scrolling, as well as element animations like loading, waiting, or menus. In short, use them anywhere you’d like to improve user experience.
Where Can I Use a Lottie?
Lotties play on any platform; mobile, smartwatches, desktop applications, or websites. You can even use them on messaging platforms. So yeah, basically anywhere!
Can I Create a Lottie Myself?
Yes, but also no. Let me explain.
There are a lot of tools that can help you create animations. Marketers do a great job with convincing people that their software can create animations or blog posts. And then people think, “Oh yeah, I can do that.”
However, animation software is like any other tool. To animate means understanding the speed, tempo, and a number of nuances that people spend years practicing and learning. Having animation software and saying you can animate is like saying if you have a scalpel you can do surgery. So yes, technically you could create a Lottie. But you’ll need to put in a lot of work first.
Where Can I Get Lottie Animations?
There currently aren’t many places where you can purchase Lotties, but here are the best options available.
1. Creattie
Creattie is a curated design library dedicated to business solutions. The main difference that separates Creattie from other platforms is that all the designs are created by award-winning illustrators and animators. Also, Lotties here are sorted by industry to cover any business you may have.
2. LottieFiles
This is perhaps the biggest Lottie library, but you may be limited by choices that come only in the same style. This means if you liked an animation, it could be the only one in that style and you won't be able to fully cover your visual needs. Also, the quality can be lacking at times.
3. Drawer Design
This library isn’t big, but you can find relatively good quality design collections.
4. Motion Elements
A pretty small collection. Also, the quality can be very hit or miss.
Additionally, if you are looking for something specific, you can hire a team that specializes in creating Lottie animations and order custom designs.
