Recently I have been doing more animation work here at Delicious Brains Inc and finally decided to experiment with Airbnb’s rave-reviewed, Lottie framework.

Lottie is a React Native, Android and iOS JavaScript library that makes it super easy to integrate animations into your website or app.

It’s more of a designers tool as it allows users to export animations directly from Adobe After Effects into a JSON file that can be used instantly with the framework.

If you’re a developer who often has to recreate animations from scratch, you might want to share this post with whatever designers you’re working with. But read on for exactly how much easier it can make your life.

Why Lottie?

Part of what got me to check out Lottie was a recent conversation Brad and I had about how we can instill more user delight into our products.

When designing and building a product it’s very easy to focus entirely on functionality and overlook those extra touches that add additional satisfaction. And this is completely understandable as the user has a baseline expectation that a product provides the utility as marketed, so this holds far more importance than some extra gloss.

But it’s important to remember that this “user delight” aspect of the design phase should not be overlooked. It is the key difference between products that serve a purpose and those that actually feel good to use. In some cases, it can also transform a good product into a great product.

Let’s take a look at exactly how Lottie has improved implementing such delights.

Animating in the Past

In the past, integrating animations into a site or app was very tedious to say the least. You essentially had three options.

Option A: Images or Video

Use a GIF, video file or PNG sprites to create the animation. This is the quicker method of the two but results in excessively large file sizes and no ability to edit the animation without going back to the original file itself. I always try to avoid this if possible.

Option B: Flash Animation

Adobe Flash had its heyday and served its purpose well for a good 15 years or so. It allowed content creators to do things never seen on the web before. That being said, I used to absolutely deteste sites that had the “Welcome”, Flash, splash page.

You would create your animation in a tool like Adobe Flash, and then export it as a Flash file such as SWF (ShockWave Flash) to use on the web. And to be honest, it worked pretty well.

But as time passed and the web evolved, Flash died pretty quickly. The rise of HTML5 and the fact that most smartphones did not support Flash at all meant that it became pretty much redundant.

On top of this, Flash content usually took a while to load and if you wanted to modify the content, you would have to go back to the drawing board and edit your original file.

Perhaps the biggest barrier of all was that the user had to have the Adobe Flash Player installed on their machine in order to see the content in question. This would lead to having to update the plugin pretty regularly as sometimes you would encounter content which required a more up to date version of the Flash player.

Option C: Create Using Code

The alternative was for the designer to create the animation and export a video file as a reference. The developer would then be expected to take that reference file and painstakingly recreate it using code.

The benefits of this are low file sizes and the ability to manipulate that animation later in the code.

In fact, in my last post, I wrote about a bit about the benefits of using SVGs (Scalable Vector Graphics), particularly with animation.

Whilst this method is considered much better practice than Option A, the problem is that it’s extremely difficult and time-consuming to replicate an animation using code. The chances that the coded animation matches the reference file is extremely unlikely and expectedly so. Unless you have the time to match the animation frame by frame, the timing, sizing and nuances of the animation are likely to be off by quite a bit.

So effectively you have to create the same animation twice… Which seems like a big waste of time.

This is where Lottie steps in and becomes the remedy of a giant headache.

So let’s have a look at how it works.

How Does Lottie Work?

First, you need to create an animation in Adobe After Effects. If you have no understanding of After Effects, don’t fret! I’ll link to some free Lottie animations later on in this post.

You’ll need to stick to using the vector tools inside of After Effects and obviously steer clear of bitmap images as Lottie will not know what to do with these types of images. Currently, Lottie supports solids, shape layers, masks, alpha mattes, trim paths, and dash patterns.

Once the animation is ready to export, you have to run it through the Bodymovin After Effects plugin and after some beautiful wizardry, it spits out a JSON file that’s typically only a few kilobytes.

And then, with just a few lines of code, you can use the Lottie framework to parse this JSON file into your website or app.

Incredible.

Lottie in Action

Lottie is super quick and easy to use. If you’re using the animation on a website, you just insert the following lines of code and replace the JSON file with your own:

See the Pen Lottie Animation Example by deliciousbrains (@deliciousbrains) on CodePen.

Lottie also has some built-in options that give you further control over the animation. You can choose to autoplay the animation on page load, set it to loop, set it to play on hover, change its speed, or even add play controls. You can specify the width, height and background color too.

Here’s One I Made Earlier

I was going to showcase some of the animations I have been working on for our products however why spoil everything now.

Instead, here is one of my creations when experimenting with Lottie. It’s an animated version of our branding for WP Migrate DB Pro.

See the Pen MDB Bird Animation by deliciousbrains (@deliciousbrains) on CodePen.

In less than half an hour, I had made the animation and was testing it on a webpage.

The file size? A tiny 12 kilobytes.

Lottie Freebies

As I mentioned earlier, Lottie requires at the very least, some basic knowledge and a copy of Adobe After Effects.

If you do not possess either of these, not to worry!

The Lottie community is pretty great and they have a ton of free animations ready to download, as long as you credit the author of course.

A Lottie Alternative

If Lottie isn’t for you and if you still want to create vector animations, you can check out SVGator. It’s a very user-friendly, online SVG animation tool and I’ve used it a few times to create some simple animations involving basic properties like easing, rotation and opacity.

The tools available in SVGator are a little primitive at the moment and are better suited for less complex animations.

However, I recently reached out to their team and supposedly a big update is coming soon to address this along with some new functionality.

The Verdict

Lottie is absolutely awesome and it’s a real game-changer. It’s honestly the most impressive tool I have discovered in a very long time.

It saves a ton of time and more importantly saves the developer the monumental task of having to recreate the animation from scratch.

I’ll be honest, when I launched After Effects for the first time to use Lottie, I was skeptical of whether it could deliver on its promises.

I have been burned by gimmicky tools in the past that have claimed to bridge the gap between design and development by some form of conversion. A classic example of this are tools that export PSDs or Sketch files to HTML & CSS.

Usually these tools do their job and export HTML & CSS with miraculous accuracy. But when you open up one of these files the syntax and structure is usually awful and it is pretty much impossible to maintain the codebase (who remembers Dreamweaver?). In my eyes, this makes the tool pretty redundant.

Because of my history with such tools, I had reservations about using Lottie, but the fact of the matter is I ran into zero issues when exporting and using my animations.

Yes, each animation exported perfectly! I was so surprised that I found myself trying to break Lottie, creating animations in unorthodox ways to see if it would affect the exported JSON. Nope… Damn robots.

So yeah, Lottie is pretty great and it is rapidly becoming an important tool in my design toolbox.

I would estimate that the time involved for me to create an animation will now be 80-90% faster as a result. This means that I can dedicate some real time injecting some TLC into our products, improving the “user delight” that I discussed earlier.

You can expect to see a focus on user delight in future updates to our products. Particularly an exciting update to WP Migrate DB Pro coming soon… 👀

And as a side note, it still amazes me that nowadays we have the ability to create a piece of rich media content with an absolutely minuscule file size.

If you’ve got any questions about Lottie, After Effects or animations in general, please let me know in the comments below.