Lottie Animations Examples

Lottie is an awesome tool that makes animation for web smoother, more manageable and without the user needing to download heavy animation files. Created by the clever folk over at Airbnb, it allows apps to natively show animations created in Adobe After Effects in real time. You can check out some of the best features and benefits of Lottie files in our overview of Lottie Animations & Bodymovin.

Below is a selection of the various ways in which we have begun to create Lottie specific content as well as the sort of places it may be useful.

Characters

Lottie is powerful enough to support an array of character specific animation tools. Here’s some of the plugins and tools currently supported by Lottie and Bodymovin that we use to create character animations.

Delightful Narrative

Bodymovin allows for the export of a multiplicity of elements from After Effects. The extremely satisfying looping piece below was created using the Newton physics in After Effects.

Simple UI Elements

Lottie is idea for all sorts of UI elements. It’s tiny file sizes and crystal clear resolution and frame rate mean that your designed icons remain exactly as you illustrated them.

Emojis and Stickers

We created an animated emoji set for Airtime’s app, creating a fun set of lovable stickers for their users. Using Lottie saves on a huge amount of bandwidth as the app is working with data not video files.

Dynamic Scenes

Lottie files don’t limit your ability to cut or wipe between scenes. The ability to precomposite shots means that you create dynamic narrative across a number of shots.

Logo Presentation

Logo presentation is made simple using incredibly lightweight files. Lottie files are vector based and as such scale with no difficulty leaving no ragged edges or compression artefacts.

Website Enhancement

The elements created for our Lottie & Bodymovin article bring life and zest to the piece without compromising on load times and quality. The perfect addition to any page.