The State of Lottie in 2024: Powering a New Era of Web & App Animations

Lottie is an amazing format. Prior to Lottie, the idea of getting an animation into a website or app felt like an afterthought. Although the desire to elevate digital experiences with animated and interactive elements was always there, it was simply too time consuming to create, test and iterate through them.

Over the years, we’ve had various ways to add interactive animations to apps and sites including Flash, Javascript and CSS3 animations. Flash eventually phased out due to various challenges, and manually coding animations remained a time consuming process with too high a learning curve for most designers.

For designers, investing significant engineering effort for animations only made sense when they were absolutely critical to the experience, as in games or highly interactive apps like Duolingo, rather than it being a way to enhance general product design and experience.

Basically, it had to be very very important.

The introduction of Lottie reduced this barrier… somewhat. It meant we could use an animation tool that already had a large community and educational material around it (After Effects), although it also has its own challenges. Originally called Bodymovin, Lottie began an After Effects plugin project created by Hernan Torrisi. With backing from Airbnb, the functionality was further developed by Gabriel Peal and Brandon Withrow to include native support for Android and iOS.

Over the years, Lottie has become immensely popular. Millions of designers and developers now use it, and top design teams from companies like Google, Netflix, and Duolingo rely on it. The number of Lottie animations out there are in the millions, which means whatever your use case may be, you never have to start from scratch. Chances are, you've interacted with a Lottie animation at some point without even realising it.

What Made Lottie So Popular?

Lottie’s rise to popularity was simply due to its openness and community. The format is both open-sourced and JSON-based, which means you can easily dissect what’s going on inside. This accessibility makes it easy for the community to extend and integrate it into various platforms and use cases. And since it’s a relatively decentralised project, maintained by many but owned by none, it makes it a reliable project to build on.

After Effects already having a core user base of animators also meant they could use a tool they were comfortable with, whilst having an additional super power - exporting the animations as code.

All of this, packaged into a simple exchangeable format, led to it becoming an easy way for people to share and re-use vector animations.

Lottie's Widespread Adoption: A New Industry Standard

The ubiquity of Lottie has become a strength in itself. It means that you get to leverage a near-universal format used across multiple design and productivity tools. Think of SVG, PDF, PNG, Gif etc - what has made these formats the industry standard? It's their raw openness and ubiquity. They belong to no one and everyone. Most importantly, they organically became the most accessible ways to exchange specific data types between tools and platforms.

SVG became the natural language of vector files. Just like you can import and export SVGs from Illustrator, Figma, Framer, Webflow, Google Docs (or any document tool), and even Lottielab, Lottie has become the go-to language for compact vector animations. It's easy to understand its structure across various platforms, and you're not reliant on any single tool as they all work together seamlessly to ensure your animation data is accessible across all your project needs.

A wide range of tools now support Lottie in some way, either natively or through extensions. These include Webflow, Framer, Adobe XD, Origami, Notion, Google Docs, Windows OS, iOS, Jitter, and Canva.

Challenges and Looking Forward

It’s important to note that there have been many challenges with the format over the years. While the format itself has improved with time and one can imagine further improvements in the future, its initial creative dependence on After Effects - as the only editing tool that both imports and exports Lottie - slowed down its progress.

After effects is a complex animation tool that wasn’t built from the ground up for what Lottie is intended for - product animations. However, Lottie itself, independent of After Effects has empowered a world of users and started on this incredible journey of democratising product animations beyond animators and developers only. For the first time, we have access to a really small and dynamic format compared to earlier alternatives like GIFs or MP4s, and this is largely due to the open and collaborative nature of the Lottie community.

2024 has seen a surge in the number of tools that leverage Lottie and extend its usage in various creative ways and applications. As support for Lottie animations becomes more pervasive, its manipulation and publication have also become more diverse.

The journey of a single Lottie animation means you animate once and easily integrate that animation to your website or app as a simple interactive animation, your Google slides presentation, your Canva design, your whimsical whiteboard, your Wordpress, Webflow, Framer or EditorX site, your Figma or Origami prototypes, or Notion, or even import it into tools for advanced interactions such as Rive. If you Could choose your animation to exist in any format, you want it to be a Lottie. It opens up a world of possibilities to you.

But as the tools that leverage Lottie in the ecosystem continue to evolve, Lottie itself needs a companion product animation tool that not only grows with it but further enhances the different ways it can be used. The format itself needs to continuously evolve to power the fluidity of use cases it now serves as the foundation for. Keep the essence of what makes Lottie a Lottie, whilst evolving it to serve how it’s used.

What does this mean?

Today, there are several design tools (including Lottielab) that either import or export Lottie in some way, although none does both outside of Lottielab and After Effects.

Some tools like Origami or Rive let you import and use Lotties for various interactive purposes localised to those tools, but you can't export them. With othet tools like Fable and Jitter, you can export Lotties but not import them.

Democratising motion design means enabling everyone to access an animation format that can be understood by any tool, and today, that’s Lottie.

Want a Gif or MP4? Start with Lottie.
Want your animation on a website or app? Start with Lottie.
Want to use your animation in the latest creator tools? Start with Lottie.
Want access to the biggest animation library out there? Start with Lottie.

Having your animations as Lottie ensures the most scalability and usability of your animation data. And that’s its core strength, the ability to democratise animations.

Lottielab is the only tool on the market that lets you import, edit and export Lotties seamlessly. Its design philosophy was influenced by Lottie, not only in terms of the technical makeup of the format only, but the essence of what made it ubiquitous - being accessible. When Alistair and I started Lottielab around two years ago, we had a blank canvas. We simply wanted to democratise motion design for all and and we saw a lot of potential in this space. But we needed a format at the heart of it all, one that already resonated with the idea of democratisation and accessibility, and nothing spoke more strongly to us than Lottie.

It’s honestly a testament to the hard work of people like Hernan Torrosi, Gabriel Peal, Brandon Withrow, the ongoing work from Airbnb and the large array of tools and users out there. Lottie has created magic and we understood this very well. So it was incredibly important to us to create a tool that reflected this philosophy: easy to use, accessible to everyone (technical and non-technical alike), and allowing Lotties to flow in and out without locking you in on either side of the pipeline.

People like Lottie not only because it’s small, but because it’s open. Even if Lottielab stops its operations today, your Lottie animations will always be available to you to edit and use in various other tools.

LottieLab ensures that Lottie, which is now the common language for vector animation across tools and platforms, and offers millions of starter animations, remains a format that's always accessible to everyone. Although Lottielab as a product is independent of the format (and this has its advantages), in this moment in time, nothing shares our philosophy of opening up the world of vector animations to as many people as possible as the Lottie format does.

With Lottielab users like Isaac saying "Lottielab is magic and makes me feel like a superstar with my team" even though he's not an animator, and designers/animators saying 'I think anyone that can use a computer can use Lottielab,' it makes us feel like we're on the right track even though we know we're just at the beginning of this journey to make the world of vector animations more accessible to all.

Lottielab isn't just about raising the ceiling for animation, it's also about lowering the barrier to entry, making it easier than ever for anyone to get started. Our beta is just the first step in this mission, and we have many more exciting developments planned as we continuously reduce the floor for vector animations.