What is Lottie?

Lottie is an open-source animation file format. It was developed by the design team at Airbnb and launched in 2017 to make it easier for designers to add animations to their apps without requiring extensive coding.

The animations are vector based, so they preserve quality across screen sizes, and they’re exported as JSON, so file sizes are small, easy to manipulate and integrate with minimal impact on performance.

Creating, exporting and applying

The animations on this page were created using Cavalry, exported as JSON files, and directly uploaded to and manipulated in Webflow. There are plugins (Bodymovin) to export After Effects files as JSON and you can even make simple lottie animations from Figma using plugins. The controls and tools you can actually use within these files is limited, and often things don’t turn out as hoped or expected. This project involved a lot of trouble shooting, but as you learn about what works and what to avoid, you can move more quickly.

Other convenient integration methods I haven’t explored include using LottieFiles’ own web player, embedding via React or Vue components, or incorporating them directly into mobile apps through iOS and Android libraries.

Some limitations

• While motion in web can enhance engagement, these experiences are often inaccessable.
• Performance may be inconsistent across devices, browsers and other platforms.
• Interactive limitations like mouse-driven animations fail on touch devices.

Take-aways

Lottie’s great! I’ve used lottie animations a lot since these experiments. You’ll find some nice examples on some of the other pages on this site:

• The play-one/play-many toggle icon on the Collecting Failures page.
• The logo transition in the IZIZI case study (both the main animation and the little prompt to move cursor are lottie animations).
• The typography and colour sections on the case study for orla-kelly.com.

Lottie falls short, however, if you want to really tie an interaction to mouse position (x and y) or more granular scroll control where you might be better off looking to a library like GSAP instead.

‍