Icons In Motion

We interviewed Salih Abdul-Karim, Airbnb’s design lead and animator, to learn how he turned Noun Project’s icons into moving animations with a new tool called Lottie.

Lingo Team
Noun Project
7 min readAug 17, 2017

--

Hi Salih! Thanks for taking time to chat with us. Tell us a little bit about yourself?

I’m a design lead here, basically an individual contributor but my primary focus is on motion animation. I do two different types of projects at Airbnb — one is like what I did for Modern Pictograms, where I take assets and animate them which will then go into the product. Other projects I work on revolve around UI animation. This means helping teams prototype how we are going to get from one screen to the next. Those may or may not get used, a lot of times it’s exploratory. I like to think of myself as a concept artist.

“I like to think of myself as a concept artist.”

We’ve seen the buzz around Lottie, can you tell us what it is?

Lottie is an iOS, Android, and React Native Library that takes After Effects animations and renders them simply, allowing native apps to use your animations as easily as any static image file.

In other words, like a Quicktime player that plays MP4s, Lottie is a player that plays JSON files. The data you export from After Effects is held in each JSON file using an extension called Bodymovin. The extension is coupled with a Javascript player that can render the animations on the web very easily.

What lead you and your team to work on this project?

I think before we had Lottie, it was really difficult to get the simplest animation into your product because engineers had to make everything from scratch. You can import an animated GIF into a project but a GIF has issues with transparency, often times files sizes are massive or a developer has to write thousands of lines of code to make it work. There really wasn’t an easy and streamlined approach to creating animations for products, which is why we ultimately came up with this tool.

About a year ago I sat down with our iOS engineer, Brandon Withrow, and started playing around with Bodymovin, the After Effects extension. We started testing it, playing around with it, and he got somethings to go into After Effects from iOS. Once we got simple shapes and animation to start working, we brought in Gabriel Peal from the Android side so we can have a cross platform solution, which is when it really started to take off. With both platforms at play, we were able to make long strides and Lottie became a real usable tool.

We love the branding around the project, how did yall come up with that?

Lottie is named after Charlotte Reiniger. She was a director and animator who made the first feature length animated film in 1926 about ten years before Walt Disney. Brandon Withrow the iOS engineer who wrote Lottie-iOS came up with the name as a homage to her.

Seems like the community around Lottie is growing, how you are organizing that?

The community is really building itself. There are folks creating sites like Lottiefiles.com that offer free Lottie animations to the public along with tools for testing. There are designers like Eddy Gann doing “Challanges” where they post a new animation with source files free to the public everyday for 50 days. We get around 10 emails and github issues a week from people around the world showing us how they are using Lottie, giving us great insights and providing useful feedback on ways we can improve. It’s not so much how we are building a community, its how a community is forming on its own. We just want to constantly improve Lottie and to support the community with resources and information the best we can.

I’d imagine you guys are using Lottie yourself for Airbnb. How does using it yourself affect how you work on the product?

Yeah, absolutely. Airbnb is a very specific product that has its own needs, and a totally different product has a separate set of needs so they actually might use Lottie in a completely different way. It’s really great for us to keep tabs on the way people are using it to get that insight so that we can change Lottie not just for how we will use it but to the way everyone uses it.

On that note, I’m curious how others are using it in unexpected ways.

We’ve seen a bunch of companies use Lottie for walk-through animations. We don’t have that in our product here at Airbnb so we never could have imagined others using Lottie for this purpose. We eventually started making modifications to Lottie to make people’s lives easier when animating those screens using the app.

Walk us through the process of bringing an icon to life

Usually I grab an icon from Noun Project or design one myself in Illustrator. Once I’m finished, I import the final artwork into After Effects and convert to a shape layer so I can then begin to manipulate the icon as if I was in Illustrator. Once I figure out how the icon or artwork animates, I export the animation using Bodymovin (the After Effects extension) to a JSON file that Lottie can use. Once exported, it’s up to the engineer working on the product to use Lottie to integrate that artwork.

What was your favorite Modern Pictogram icon to animate and why?

I don’t know if i have a single favorite because I enjoyed animating all of them but there were a few that I had a little extra fun with. The Printer was fun because its such a physical object that has a natural action associated with it. To make the paper print out was a lot of fun. I also really liked the challenge of the text animation. To figure out how to animate something as simple as four lines. Its such an abstract piece of artwork. But taking cues from the way we type in a staccato rhythm using the cursor as an in-between element worked. Also the Eye was fun to make because it was kind of creepy. I looked a lot of footage of eyes on youtube and people looking around to try and get that one to feel good.

Some of the metaphors have an obvious direction for an animation…like a bomb for example…but what about the ones that aren’t so obvious…what is that process like for coming up with how the icon is animated?

I think this is the fun part, when you are given piece of artwork that doesn’t have any kind of motion intrinsically built into it; it’s the creative side of animating you could say. For me, the house is a good example because nothing moves in a house but what I did start to think about are what kind of parts can I break apart. For the house specifically I looked at the windows, the door, the roof… so I will usually start to break things up into parts, naturally where it looks like I can. Also you can lean on the natural form of the icon itself like if it’s leaning heavy to the right side I may do a left to right movement. For me a house is naturally a vertical shape, that is what led me to do a vertical motion and breaking things into pieces allows for overlap. Technically there isn’t any formula for it but it’s all about how creative you get and also looking at what the shape is lending you.

I’m curious where you draw your inspiration from?

My inspiration comes from everywhere. Like a lot of people, I do try to keep up with what is going on in the animation community with blogs like Motionographer. There is also a site called Mixed.Parts that has a lot of great work that people are always sharing around. For me as an animator, anything that moves is going to be an inspiration for me. If I’m going to animate some character on a skateboard, I’m going to watch a bunch of skateboard videos just to get a feel for how it works, how people learn and where they put their foot down.

In the wildest, farthest iteration of Lottie, how do you see people using it?

I think the first thing I thought about was Lottie becoming this universal animation format. No one questions PNG, it’s a file format that people know how to make and use on websites or apps — it’s just assumed and people just do it. I’d love for Lottie to get to that kind of ubiquity. Where it’s just this universal animation format that people use and it works. Another thing I think about is, since there is actual data in each file, people can use it to control transitions between screens, or all kinds of little interactions. I’d love to see someone make a game using Lottie with animations exported from After Effects. Everyone is talking about augmented reality, and I can’t help but think how awesome it would if someone used it for something like that.

Thanks again Salih for sharing with us. You can find out more about Lottie at Airbnb.Design and more about Salih’s other work on his website.

--

--

Noun Project
Noun Project

Published in Noun Project

Building a global visual language that unites us.

Lingo Team
Lingo Team

Written by Lingo Team

The team behind Lingo - A design library for everyone.

No responses yet