If you’ve ever used Duolingo or Airbnb, you may have noticed the small, cheery animations scattered throughout each site and their apps. These animations may move when you scroll by or when you complete a task, like the flickering cartoon flame Duolingo displays when you’ve had a multiday streak of successful progress in your new language.
The animations that these companies use are examples of Lottie, an animation technology that’s grown more prominent in the past few years. Named for Charlotte Reiniger, the German pioneer of a technique known as silhouette animation used in movies in the 1920s, the technology behind Lottie has been around since 2015. But it didn’t gain significant attention until Airbnb developers worked on and named it when they started using it in 2017. With Lottie, their goal was to build a library to render Adobe’s After Effects animations in real time as a way to increase user engagement and communication. What they ended up creating allows them, and now other designers, to bring visual elements to life for their users in a fun, lighthearted way.
Always curious about methods of increasing learner engagement within our custom learning experiences, Extension Engine’s media team has started testing what Lottie can do with an eye to incorporating it in future work.
What Lottie Is and How It Works
Lottie is animation represented by text using the JavaScript Object Notation (JSON) file format. The benefits of using JSON are that it’s small and it is compatible with every major programming language. This means that any platform can read Lottie, making it easy to show your animations no matter what device your audience is using or what other design elements are on the page.
Lottie files use two things in addition to the JSON file format: 1) Adobe After Effects for animating and 2) a plugin that lets you export animation into a JSON file. Lottie works especially well with vector images, which are built of mathematical formulas rather than static pixels, meaning Lottie animations can work almost anywhere and don’t experience pixelation when they change size. This unique setup gives you animations that look the same whether you’re on a laptop or a mobile device, and through a variety of different settings and browsers.
This platform-agnostic setup is one of the best things about Lottie, according to Extension Engine Media and Content Lead Joey Azoulai. He says, “We might want to create an animation that learners can interact with, but then to implement it in a product requires developers. With Lottie, we can create interactive animations without a lot of technical expertise. We can manipulate these animations programmatically or through user interactions. And Lottie is scalable, so it’s efficient in the use of both computing power and bandwidth, and it adapts to the screen that it’s on.”
Beneath all lottie animations is data in json format. A highly simplified example might look like this: "object": {"assets": ["..."], "layers": ["..."],"markers": ["..."]}} .
Ways to Interact with Lottie
Another thing to love about Lottie is the simple and straightforward ways a user can interact with it. As Joey says, “With Lottie, the animation doesn’t live trapped in a video player. It’s dynamic.”
Because Lottie is an animation that’s being compiled at runtime in the user’s browser, it’s a great opportunity to weave content seamlessly throughout an online experience. For Joey, the goal is always to integrate the animation — and the ideas behind the animation — with the content. For example, Lottie could be used to feed live data into a dashboard, allowing animations to update as information changes.
There are a few primary ways your learners can interact with Lottie. Depending on how you set up the animations (a choice made based on your content needs), you can create the following animation interaction types:
-
Scroll-based: Users interact with an animation by scrolling by it. It will change based on how much the learner scrolls down or up.
-
Scroll with offset: This refers to when animations change with a scroll but on a delay. This allows two different animations to occur simultaneously; for example, an animation could be ongoing, and then when a user scrolls by it, it continues but another element is added, such as the appearance of a new character caused by the scrolling.
-
Hover: This kind of animation will react in some way when a user hovers the cursor over it. The animation’s reaction is based on the cursor’s position.
-
Click and toggle: These animations change when they are clicked or tapped, and the change can be reversed by toggling.
Is Lottie for You?
Although it’s relatively easy to implement, using Lottie with finesse does require some planning. You have to think through why and how you’re creating the animation, of course, but also how it will relate to and interact with all of the other elements on a given page. We think the time spent on this planning is worth it, given Lottie’s value-add of extra interactivity, ease of implementation and use, and ability to effectively engage users.
For Joey, figuring out how to use Lottie to improve learning is a fun challenge. He says, “Ultimately, we want to use animation to support learning, not distract from it. We can do this by making key content memorable and cueing the learner’s attention to the right place at the right time. Now and into the future, we’re thinking about ways to use this technology to deliver engagement at scale.”