Future of web animation is here. Introducing Lottie

Maybe you didnt heard about Lottie, but its on the rise in the world. We cannot be surprised by its slowly increasing popularity. Simple and fast implementation, attractive effects and data efficiency make Lottie an animation tool worth using.
For example, we can mention Belgium beer company, which tested Lottie animation for 12 months and, according to data, the conversion ratio increased by incredible 25%. So what are these Lottie animations?

Animations of the future

Lottie animation was created by the design department of Airbnb which parses animation from Adobe After Effects as JSON file using their additional product Bodymovin. The result is vector animation applicable to websites, mobile devices, for marketing purposes and mobile applications. This technology is also used by company Revolut, which offers innovative banking services. Throughout their app, the user is accompanied by interesting animations. In a playful way Revolut was able to explain to its users how their application works. And without using long explanatory text or large videos.

 

Source: dribbble.com/revolut (Examples are in .mp4 format)

Data friendly

You could create such animations as PNG sequence, but Lottie is much faster because it works with vector data and it can be used on many platforms. So far, other vector animations have been used mainly in GIF format or as a video.
The disadvantage of GIF is that it can only display 256 colors while Lottie animations are unlimited in this matter and therefore much more beautiful and in higher quality. In addition, GIF is, as well as video, much more data demanding. For example, the same animations in GIF can have 3 MB while Lottie is only 100 kb, that is 30x less. Also, implementation of Lottie is very quick. So you can create a nice design across your website. All these details work as a miracle from a user perspective. They make an average quality web a top website everyone will want to surf. And whether we like it or not, our website is our business card, it is a presentation of quality and reliability. Even minor detail has power to decide who the potential customer will choose.

Piggy Moneybox – Lottie animation (Json file: 60 kb)

Ideal for marketing purposes

In the competitive environment of online websites, the loading speed is a very important aspect not only for the best user experience but also for your website's SEO evaluation. Google takes into account quick websites and even the smallest detail can decide on what rank your website will end up in the search results. Large graphic files are significantly slowing down your website and that might be why it appears on much lower positions than while using less data-intensive graphics. But what to choose? Non appealing user environment or a slow website?
Lottie animation makes these problems easier and no compromise is necessary. Animations are data friendly and they don't slow down your website as much. Therefore you will be able to make a nice website without compromising your SEO. Today, the loading speed will also be affected in views on mobile phones, which is still very slow. With the use of Lottie, all graphic elements are loaded quickly and the user doesn't have to wait.

Burger – Lottie animation (Json file 40 kb)

Quality responsiveness and usefulness in applications

Whatever the platform or size of the device the graphics are displayed on, you can be sure Lottie animation always looks the best. Thanks to vector graphics it’s fully responsive, so you don’t have to worry about faulty display, because not only is the animation displayed correctly, it is also high quality on a small mobile screen as well as 27 inch monitor. We also have to mention Lottie in connection with applications. For its usefulness and integrability with user interactions, Lottie is an ideal tool for mobile applications. In addition, Lottie animation can be adjusted so that it is played only after user action, for example, the animation is played only after clicking, or only when scrolling. It is a great opportunity to create interactive animated elements on your website or app and achieve the "wow" effect.

 

Cons of using Lottie

Everything has its pros and cons, and so does Lottie. We noticed these cons while creating the animations.

• Lottie only supports vector in After Effects, (but there is a possibility to import .ai file and convert it into vector)
• it doesn't support any effects from the program menu
• you can't use any plugins to facilitate your work such as dynamic easing,
• it doesn't support JavaScript commands (Expressions)

 

Therefore, creation of Lottie animation is more time-consuming than creating video or GIF sequence. Sometimes you have to create more complicated animations frame-by-frame.

But that didn't scare us, quite the opposite. We didn't miss this chance and used Lottie on our website. You will find the animations on the main page of Motionspace. Who knows, maybe that is the reason why you came to our website.

 

Mimo Mascot – Lottie animation (Json file: 126 kb)