Meet Lottie — The Open-Source File That Is Changing Animation As We Know It

Digital marketers, app developers, and other content creators know that when it comes to grabbing people’s attention, video is king. In fact, 92% of marketers said that video is an important part of their marketing strategy — and for good reason. Research shows that visual information is processed 60,000x faster than text and simply including a video on a landing page can improve conversions.

Armed with this information, marketers have turned to animation as a proven effective way to grab customers’ attention by allowing designers to convey important information in engaging and visually appealing ways. But animated files, just like other video formats, have often been expensive and labor-intensive to produce — resulting in large files such as GIFs, MP4s, or PNG sequences — that weigh down your page, don’t maintain
quality, and can often end up looking pixelated or result in a lag. That no
longer needs to be the case — thanks to Lottie animations.

Getting started with Lottie

So, just what is Lottie? Put simply, it’s a JSON-based animation file format that allows you to build lightweight, scalable, and interactive animations. This file type is comprised of code that can be easily changed to alter how the animation looks and moves without needing to recreate the animation. For example, if you wanted to speed up or slow down your animation, you would just change the code in the animation that affects the rate at which your animation moves.

Perhaps most importantly, Lottie solves some of the problems presented by some older forms of animation. It allows for high-quality animations on multiple platforms and high resolutions by mixing vector and raster elements and applying transformations at run-time. Even better, the smaller file size — about 600% smaller when compared to the GIF — won’t weigh down your app or website. In a time when speed is everything — both for user experience and SEO — using Lottie can ensure you don’t compromise on speed and quality, creating much better experiences for end-users.

Most Lottie animations can be exported right from within Adobe After Effects, using the extensions Bodymovin or LottieFiles for After Effects. It is through these extensions that a design can be exported to a Lottie. There are also tools like the SVG to Lottie converter by LottieFiles that apply animation presets to static SVGs transforming them into simple Lottie animations.

Platforms like Webflow, Figma, and Elementor have plugins that make it even easier to add Lottie animations to webpage designs (and this can be done with absolutely zero coding).

One of the main benefits of using Lottie, however, is the ability to free up designers to get creative. Implementing tools like LottieFiles can help you save even more time.

“Instead of spending dozens of hours learning Xcode or Android studio, I use LottieFiles to test and share. Now I use those hours to make my animations as dope as I can," says Salih Abdul-Karim, Lead Motion Designer at Airbnb.

Lottie makes animation possible for apps

“In the past, building complex animations for Android, iOS, and React Native apps was a difficult and lengthy process,” wrote Abdul-Karim in a blog post. “You either had to add bulky image files for each screen size or write a thousand lines of brittle, hard-to-maintain code. Because of this, most apps weren’t using animation — despite it being a powerful tool for communicating ideas and creating compelling user experiences.” But Lottie has changed all of that. In fact, Airbnb is just one of the tops apps that have come to embrace Lottie, after many years of avoiding animation.

“LottieFiles has helped hundreds of thousands of developers and designers from over 65,000+ global fortune companies (Netflix, Disney, Airbnb, Google, ByteDance, Amazon, Grab, etc.) ship interactive animation faster and more effectively,” says Kshitij Minglani, Co-Founder and CEO of LottieFiles. “This has made LottieFiles one of the largest and most active communities of animators, developers, project managers, and marketers who understand the power that animation and interactive content holds in boosting user engagement and conversions.”

It’s estimated that some 65% of people are visual learners, which means
the ability to embrace animations by apps like Duolingo — which helps users learn a foreign language — has been a game-changer. "LottieFiles plays a critically important role in our animation pipeline here at Duolingo,” says Kurt Hartfelder, Animator at Duolingo. “Without it, I don't know how I would get my work into our app! I can animate in After Effects and proof my own work before handoff all while keeping file sizes very low. Additionally, I've been using LottieFiles for over two years and their product just keeps getting better."

But as designers are freed up to put more time into imagining great content — and less into learning new coding languages — the truth is that the sky's the limit for these lightweight files. “We see use-cases of Lottie animations from app loading and wait screens, to gamification, user onboarding as well as to websites and apps that want to serve meaningful content to its users,” says Nattu Adnan, Co-Founder and CTO of LottieFiles.

Whatever your use case may be, it’s clear that Lottie animations may be just what you need to capture user imaginations with interactive video. Even if you’re on a tight budget, you’re in luck, because it’s currently an open-source tool. “It’s not often a revolutionary format comes about and disrupts an entire industry, saving tons of precious design and development hours,” says Minglani. “We didn’t want to stunt the adoption of Lottie by monetizing early on.” So if your design team has been stymied by stodgy, old animation files, it’s time to give Lottie a try.

Lomit Patel is the Vice President of Growth at IMVU. Prior to IMVU, Lomit managed growth at early-stage startups including Roku (IPO), TrustedID (acquired by Equifax), Texture (acquired. by Apple) and EarthLink. Lomit is a public speaker, author, advisor, and recognized as a Mobile Hero by Liftoff. Lomit’s book Lean AI, which is part of Eric Ries’ best-selling “The Lean Startup” series, is now available at Amazon.