3 ways to use Lottie animations to enhance your learning experiences

Back around 2017 I read a story about how Airbnb was using animations that were created in Adobe After Effects and exported out to code. The animations loaded more quickly and had a much higher quality than animated gifs. They were even a smaller size than static pngs. The library that made these animations work was called Lottie.

Lottie was new though. I didn't quite understand how to use it because I didn't have the knowledge at the time. Lottie has come a long way in the past few years. It's accessible to everyone, regardless of skill level. This is true, especially because of LottieFiles. LottieFiles is a site that, "provides all the tools that you need to create, edit, test and display Lottie animations."

On LottieFiles there are thousands of free and paid animations you can download. There are tons of resources to help you get started implementing current Lottie animations or in creating your own Lottie animations.

I recently created a quiz design in Adobe XD, imported some of its elements into After Effects, animated those elements, downloaded my animation with the Lottie plugin for After Effects, and reimported it back into Adobe XD to show in my design. 

There's also a LottieFiles plugin for XD where you can search for and add in Lottie animations from LottieFiles with the click of a button.

I added my Lottie animation to my web based project after I decided I liked how it looked in my design. One way to do this is by using the Lottie web player. Lottie also directly integrates with tools including Webflow, Figma, and more. You can even have Lottie animations appear on scroll or animate based on interactions like cursor movements.

So, what about Lottie animations and learning experiences? Lottie animations can enhance your learning experiences, especially now that implementing them is easier than ever. Here are three ways to use Lottie animations in your next project.

1. Tell a story or support a point

Brainfood is a free app that delivers, "bitesized knowledge" to users daily. They utilize Lottie animations to support the facts they present. I can see how Lottie animations would be a powerful way to immerse users in scenario based learning. With each choice a user makes in the scenario a different supporting animation could show. Learn more about how Brainfood uses Lottie.

2. Add elements of delight

Another way to use Lottie animations would be to use them to add an element of delight to your project. Headspace uses Lottie animations to add intentional moments of delight and depth to their app. In an example that prompts you to play random sleep music/sounds there are lightning bugs hovering in the background. It adds a peaceful element of delight to the app. Learn more about how Headspace uses Lottie.

In the quiz design that I created I decided to add confetti to the screen when users pass the quiz. The ways you can delight users with Lottie animations are boundless.

3. Draw attention to user interface elements

Last but certainly not least is using Lottie animations to draw user's attention to user interface elements. For instance, maybe I have users submitting a quiz question and I really want to highlight to them that it was successfully submitted. I could use a Lottie animation to do so.

Maybe I have an animated arrow that I want to use to draw user's attention to task. Or maybe I want users to rate a course with hearts or stars and the animation lets them know it was successful. Lottie animations can do that too.

What do Lottie animations look like in Articulate Storyline?

Who's your ADDIE? created a Storyline project using Lottie animations made by Luke Rauch. Stephanie Bandli, co-found of Who's your ADDIE, stated, "We've been using Lottie animations in Storyline to reduce the file size and ensure that the animations are clear and crisp as opposed to GIFs or videos." See how they used Lottie animations in a demo Storyline course.

Have you used Lottie animations in any of your learning projects or are you planning to? Share how you are using or plan to use Lottie in the comments!

-Mel