Lottie is a tool that lets After Effects animators use their work in apps and on websites. We like it a lottie.
Imagine if every time you sat down in front of the computer to animate you had to write code. Not just a few lines like you do with most expressions; hundreds of lines with variables, if-then statements, pixel dimensions, and crazy math formulas for your eases. This nightmarish way of animating has been, until very recently, the sad reality for app developers.
Lottie, a new open-source tool, is a game changer for App developers and the Motion Designers that work with them. It takes your animation from After Effects (with a little help from Bodymovin') and spits out all the code you need, ready for use on a variety of platforms. In this interview Joey talks to Salih Abdul-Kareem and Brandon Withrow of Airbnb. They dig into all the details of how Lottie works, why it's needed, and the role of Motion Design at a company like Airbnb.
Subscribe to our Podcast on iTunes or Stitcher!
Show Notes
THE LOTTIE TEAM
RESOURCES
GitHub
Stack Overflow
JSON
C# (C Sharp)
Swift
STUDIOS
Gretel
Hush
Shilo
1st Ave Machine
Episode Transcript
Joey Korenman: All right. Imagine this. You open After Effects to animate something - let's say like a ball bounce - but instead of having a nice graphic interface to use with key frames and curve editors and a nice timeline, you actually had to type in code for every single thing that you wanted to happen. First, you'd define how a circle gets drawn. Then you'd type in precise pixel values for position, and then you'd write a function to ease the y-position of the circle over time and then have some if-then statements to check if the ball is rising or falling. Then squash and stretch would be handled by hand coding bezier handle coordinates. It's the stuff of nightmares. Up until recently, it's pretty much how in-app animation has been handled. Thankfully, there are individuals out there trying to make it easier to create animations for interactive uses.
One of the newest tools on the scene is an open source code library called Lottie which helps translate After Effects animations into code that can be used on multiple platforms like IOS, Android, and React which is for web apps. Lottie comes from a team based out of Airbnb. You're probably thinking "Why is Airbnb making tools like this? Why does Airbnb even worry about stuff like this? Do they have motion designers at Airbnb?" The answers to all of these questions are coming in this interview with two really amazing dudes, Salih Abdul Kareem and Brandon Withrow.
Salih is a motion designer who did time in New York freelancing for plenty of top studios before ending up working for Airbnb as a senior designer and animator. Brandon, who studied animation at SCAD, somehow finds himself with the title of Senior IOS Developer. We get into that too. They're part of a team that brought Lottie to life. We dig into all the details of how the tool works and why it's needed. We also talk about the role of motion design at a company like Airbnb. It's an awesome conversation with two awesome dudes, and I hope you get a ton out of it. All right. Let's jump in.
Brandon and Salih, I want to say thank you for taking time. I know you guys are really busy over at Airbnb, but thank you so much for coming on to talk with me. I can't wait to get going.
Brandon Withrow: It's our pleasure. Thanks for having us.
Joey Korenman: Yeah. Not a problem. First thing I want to talk about is something I'm really curious about. There's a lot of really big startups on the scene right now. You've got Airbnb, and you've got Amazon which I'm not sure you can call a startup anymore. You've got Asana. You've got all these tech companies that are building motion design departments essentially. Salih, I know that before working at Airbnb you spent a lot of time in New York bouncing around as a freelancer working for studios like Gretel and [inaudible 00:03:06] and Shiloh, First Avenue Machine among others. I was wondering if you could just talk a little bit about what's different about working for a software company essentially like Airbnb versus working for a motion design studio.
Salih Abdul: I think there's a lot of differences. One of the biggest ones for me was that everything moves so much faster here. When I would go freelance at Gretel, I knew how a project was going to go. It was going to be ... We were going to spend some time doing concepts. Then we were going to design. Then we would talk to the client and we'd revise it. The we would have some rough animation. Then we would continue the process like that, but here at Airbnb things move so fast that we don't always have four weeks to work on something. Sometimes I have three days depending on the size of what I'm working on. Sometimes people contact me at the last minute so I would say the kind of lack of strong structure and also the speed is like the two biggest things.
Brandon Withrow: Also when you finish a project and that sort of ground working at a production company or something, you finish that project and you say goodbye to it forever.
Salih Abdul: Yeah.
Brandon Withrow: The project is something different entirely whereas here every project is Airbnb.
Salih Abdul: They're almost always ... They're almost never done really.
Brandon Withrow: Yeah. It's iterative.
Salih Abdul: It's iterative, and you run an experiment.
Brandon Withrow: Yeah.
Salih Abdul: You learn from that experiment. Then you change it again.
Brandon Withrow: Yeah.
Joey Korenman: That's really interesting. All right. I kind of want to dig into that a little bit. Talking about the schedule and the pace of work at a place like Airbnb, do you think that it's different just because ... When you go to a place like Gretel or Shiloh, you're working with creative directors and producers who are used to the way that motion design projects work, but Airbnb did not start as a motion design studio obviously. Is it just a lack of education and they're still sort of learning how these things work or is there really like a fundamental difference between the type of work you're doing now and the type of work you were doing?
Salih Abdul: I think structurally it's just all different. There's different players here than there are at a shop. At a shop, you're right, you have creative directors, designers, but you always have this buffer between you and the client. Right? The client has different needs. The client actually has to answer to a whole different set of people than you do if you work in a shop. Here at Airbnb, all of those players are together. When we come up with a new project, there's designers, there's engineers, there's data scientists. There's researchers involved. There's tons of people involved all on this same project. I think that's one of the things that separates it: you just have so many more skillsets and different types of people working on something than you would at a smaller shop where you really just have a creative director, some animators, some designers all focused on that one thing.
Brandon Withrow: Absolutely. I also think that in the tech world they're so used to having sort of an instant gratification. With the web, you can make something and then it's on the web that day if you want. On the other end of things and the production end of things, it takes a very long time. A good example is for the IOS app there's a build process which actually takes all of our code and packages it together, turns it into an executable that runs on the phone, and that process takes about 10 minutes. A lot of developers are like "Man, 10 minutes. That's forever to wait for something to build." "Man, you should come over to the animation world where we wait like 12 hours for a frame." I'll wait 10 minutes for the app to build forever. That's wonderful. It gives me a chance to walk and get some coffee.
Joey Korenman: So that's like the developer version of rendering, basically is like building the app?
Brandon Withrow: Absolutely is. Yeah.
Joey Korenman: That's really funny. So let me ask you this because the other thing you mentioned which I find fascinating is this concept of being able to iterate. You're absolutely right. When you're doing motion design in sort of a typical scenario, you can be really afraid to show the client something before it's ready. I don't think that the concept of a MVP exists as much in motion design, but obviously in the high tech world and the startup world it's all about the MVP especially in software companies. Do you think that there's an advantage to that, that maybe some of that could make it's way over to motion design? Is there anything really useful about not being afraid to put something out that you're not 100% sure about?
Salih Abdul: I don't know. I mean the way we run experiments here I think it's easier than it could be at a shop. We know we have a million people using Airbnb right now. We'll say "Okay, let's take 25% of those people and serve them this thing and see how things go."
Brandon Withrow: Yeah.
Salih Abdul: It breaks every ... We just turn it off.
Brandon Withrow: Absolutely.
Salih Abdul: I don't how that could-
Brandon Withrow: Yeah. The thing that makes it really nice is that we can iterate. At the shop, you get the client the work and then they show it to the world. That's kind of your last shot. Anybody that's ever made something like that knows the feeling of seeing your work for the first time. Instead of seeing the good things about it, you see everything that you fell a little short on. You see every little mistake that you made. You're like "I wish I had just eased that one curve a little bit more." It's just that way forever whereas here when you're in an iterative sort of space and you see your work be displayed and you're like "Oh, man. I need to fix that," you can go and fix it in the next version. You're usually a little calmer about it.
Salih Abdul: Yeah.
Brandon Withrow: It's not as stressful.
Salih Abdul: Absolutely. Also I think there's something to it about how what we're doing at a company like Airbnb is that you see the results of your work immediately-
Brandon Withrow: Yeah.
Salih Abdul: From a numbers perspective.
Brandon Withrow: Yeah.
Salih Abdul: When I would do projects at [inaudible 00:09:32] or Gretel, we'd ship it and we'd render everything out. We'd give it to the client. I don't have any idea how those things impacted that company's numbers. I don't know how shop would be able to do that.
Brandon Withrow: Yeah, I don't either.
Joey Korenman: Yeah. It's interesting because I think from an artist's perspective you typically don't even think about stuff like that. It was very rare that I would finish something and say "Oh, I hope that this sells a few more Subway sandwiches." You don't even really think about it, but that is the point. It's interesting because it's almost like what you're doing at Airbnb. It's a little bit more authentic because you have a goal, and you can do motion design and see if it accomplishes the goal. That's really kind of fascinating.
Salih Abdul: Oftentimes, let's say we go run an experiment. One experiment has animation. One doesn't. They both are neutral. We still of course want to go with the animation because it feels better, but I think what we're trying not to do is to break the thing that we have going on now.
Brandon Withrow: Absolutely.
Joey Korenman: Yeah. I wonder ... This is almost a whole other episode, but I wonder if ... I think that there's going to be a lot of usefulness to kind of take that concept into motion design especially now because so much of the content motion designers make, it's not like a Super Bowl commercial that you see once or twice or three times and then it's gone. It's a pre-roll ad or something that's going to run a million times and you could iterate and you could AB test and do things like that.
Brandon Withrow: Absolutely. That's a good point. There are people that ... That is something that's coming like AB testing portions of media and things like that. Places that we watch media are becoming more and more interactive like with Apple TV and all of that that we can AB test those sorts of things.
Salih Abdul: Absolutely.
Joey Korenman: Totally. Totally. So Salih, when you decided to go work for a big tech startup, did you have any trepidation about "Okay, this isn't going to be as creative. I'm not going to be doing as much variety of things." Did you have any of those fears and did they end up being founded if you did?
Salih Abdul: Well, I don't think I had too many of those fears mainly because when I came to Airbnb I got here through someone else I knew already who was a designer, and he worked at the last place that I worked at and he came here. Jason [inaudible 00:12:12] is his name. I knew if he was here that I could come here and be creative. Also I think a lot of what I've done even back 10 years ago is still kind of like creative problem-solving just in a different way now than then. I think as long as I can still use my mind to creatively solve a problem whether it be how to market someone's product or whether it be how to make someone's experience on a product better, that's what's fun for me. I didn't really have too many concerns about it.
Joey Korenman: Cool. Cool. Yeah. I've talked to other people who have worked for places like Apple and Google, and it's almost always a great experience which is really interesting to me. I want to get into a little bit talking about some of the specific projects you're working on, but I want to talk to Brandon for a minute. When I was researching Brandon, I was like "This guy is really interesting." You went to SCAD, and you studied animation. Then before we started doing the interview you mentioned that you actually were doing some motion design for a while too, but now your title is, I believe, Senior IOS Developer. I'd imagine you have to be pretty good at coding to get that title at Airbnb. Can you tell me how you ended up with that title and with that skillset and being known for that as opposed to animation?
Brandon Withrow: Yeah, of course. A good deal of luck. [inaudible 00:13:50] lucky. I started out ... I'd always wanted to be an animator. I was studying animation at SCAD, and I was ... SCAD's a very expensive school. I don't know why art school is more expensive than medical school when artists get paid less than doctors. It doesn't make sense to me, but whatever.
Joey Korenman: Preach.
Brandon Withrow: Working my way through school and I was doing freelance motion graphics to kind of pay tuition along the way. I started getting in to coding as a way to make animation tools actually because a good animator ... You can be a good animator, but great animators especially in the 3D world know a little bit of coding because they can make their workflow a little more efficient if they can jump through some hoops and beat up repetitive tasks. I got in to coding through that.
I actually got in to IOS development just because I'm a liar in a way. I was doing motion graphics for this hospital, and they have a bunch of digital signage, the hospital. Every month I would just crank out a bunch of little PSA messages and stuff for them. My tuition bill came around, and it was like $500 more than what I had. I was like "Oh man, I better hit the pavement." I started calling around, seeing if anybody had work for me. I called this hospital. I was like "Hey, you guys got any extra work for me this month? I need a little extra money." They were like "Well, we don't have any motion graphics work, but do you know anybody that knows how to make an iPhone app?" I was just ... I didn't even own an iPhone at the time. I've never even touched an Apple computer. I was just like "I know how to make an iPhone app."
Joey Korenman: Beautiful.
Brandon Withrow: They were like "Well, we're looking to pay about five grand for an iPhone app." I was like "Oh, yeah. I totally can do that. Give me half in about ten weeks. I'll get you an iPhone app." They were like "Cool." They sent me a check and I paid tuition. I was able to go back to school. Then I was like "Oh, man. What have I gotten myself into? Okay." I started looking online. It was like before you make an iPhone app, you need an Apple computer because Apple is very that way. I had to Hackintosh my PC, got it up and running, installed Xcode, and built an iPhone app. It was basically just a glorified RSS newsreader for this hospital. Built it using only the simulator - I didn't even own an iPhone - and figured the whole thing out. I lived with a guy that was a designer at the time that was also going to SCAD. He was just kind of watching this whole crazy thing unfold with great interest.
I finally got the app out, and it went to the store. I bought an iPhone with the proceeds, and my buddy who was a designer kind of walked into my room one day and was like "Hey, I've been working on this project. I think it'd make a cool app. Do you want to like hammer on it together?" I was like "Yeah." I just kind of started working on iPhone projects and IOS projects on the side and started building a lot of really cool animation tools. I once had this idea of building an iPad app that allowed you to control [inaudible 00:17:15] through touch. I spent forever on that. Then my buddy ended up coming out here and getting a job in tech. He just referred me when I graduated. I kind of ended up out here.
Joey Korenman: Awesome.
Brandon Withrow: I was like "Oh, cool. This is my life now." I graduated college in 2012. Around that time is when digital domain and [inaudible 00:17:36] both kind of crumbled. The animation industry was really hard to get into for a newcomer because there were all these people out there with 20 years experience that were out of a job. My buddy calls. I was just kind of like hands in my pockets in Savannah like "What am I going to do with my life?" We've all been in that place getting out of college.
Joey Korenman: Sure.
Brandon Withrow: My buddy called and was like "Hey, I got a job. Do you still do iPhone stuff?" I was like "Yeah." He was like "Well, I got a company I'm working for, and they need an iPad app. Do you want to maybe come out and check it out?" I flew out on Wednesday and then moved out here on Friday of that week. I've been here five years since.
Salih Abdul: That is great.
Joey Korenman: That is like one of the best stories I've ever heard, man.
Salih Abdul: That is the best story I've ever heard.
Joey Korenman: That is amazing. Here's what I love about it too. I always try to tell people there's kind of this chicken and the egg thing with ... I think it works this way in motion design. It seems like it works that way in code too where people aren't going to hire you to do stuff until you've already done that exact thing. Sometimes you can do spec work on your own, but sometimes you get a situation, an opportunity to say yes to something you have no clue how to do. I think there's a lot of similarities between what your story about coding and learning to code and being asked "Hey, we have this ... Here's some boards. Can you animate them?" You look at it, and you're like "I have no clue how to do that. Yeah, no problem. Of course." You get on Creative Cow or whatever.
I wondering, since you've been in both worlds, are there similarities between the world of coding and the world of motion design in terms of the types of people that make it and the skills you need?
Brandon Withrow: Yeah. I think that in anything that you do there is a similarity that I've noticed between people that are really good and people that aren't necessarily ... I don't want to say that they're bad at it, but they're not successful. Actually I have a buddy that's a writer that has been writing a blog post a day for an entire year. He just finished yesterday. I was reading his post, and it struck me that the similarity no matter it is whether you're a writer, whether you're a coder, whether you're an animator, it's the same thing. You have to do it every day. You just have to show up whether you feel like it or not and try to do something every single day because if you really love it or if you really want to be good at it, it's the classic 10 thousand hours thing. It's just constant maintenance on your craft. Everyday you're a little bit better than the day before even if you don't feel like it. If you get frustrated and stuff that's just because you see that you can be better than you are. That's where frustration comes from.
Salih Abdul: Yeah.
Joey Korenman: Do you think that coding is ... I don't know if this a myth or not, but there's the old saying that your left brain is the analytical side, your right side is your creative side. Do you think that coding is more left brain than motion design like it's less creative or anything like that or would you disagree with that?
Brandon Withrow: I would disagree with that. I think that coding can be as creative as motion design. A lot of the skills that I learned doing animation and motion design have directly helped me with coding problems. It's a lot of creative problem-solving like Salih said earlier. It's just solving ... Trying to look at a problem and turn it inside out and seeing if it works when it's turned inside out.
Salih Abdul: Yeah.
Brandon Withrow: There is a lot of logical left brain stuff that happens in coding, but those things happen in the animation and motion graphics world too when you're setting up your file and setting up your asset directory and all the pipeline-y type stuff. That totally like one-to-one happens in the coding world too. There's definitely a creativeness to it. Some of the people we work with here are just the smartest people I've ever met. Seeing them solve a coding problem is like going and listening to Mozart sometimes.
Salih Abdul: Yeah, absolutely.
Brandon Withrow: It's crazy the things that people can just ... They'll look at it and it's like they're looking at a prism, and then they just take one step left and then they look through the prism and whatever they're looking at looks completely different. You can see them do it when it happens. It's amazing.
Salih Abdul: Yeah, you know Brandon, I don't know if you've ever thought of this, but I think engineers ... If you compared an engineer to a motion designer, I think engineers have one little thing that motion designers don't. There's like a satisfaction-
Brandon Withrow: Yeah.
Salih Abdul: Of getting something to work.
Brandon Withrow: Yeah.
Salih Abdul: I realized this when I was working with ... Gabriel wrote our Android side of Lottie.
Brandon Withrow: Yeah.
Salih Abdul: So I'm sitting with Gabriel last week, and he's trying to figure out how to get something to work. I don't know. [inaudible 00:22:37] or something. He's like sitting there figuring it out. He puts something in, he tried it, and it worked. Literally, we're like high-fiving each other, and it feels so satisfying when it actually worked. I can't remember a time where I ever high-fived someone over a design.
Joey Korenman: Right.
Salih Abdul: [crosstalk 00:22:57] done. You never get that satisfaction.
Brandon Withrow: Yeah.
Salih Abdul: I feel like you guys, engineers, kind of [crosstalk 00:23:03].
Brandon Withrow: Absolutely. That's where ... Software development and engineering is addicting. It's actually like chemically addicting.
Salih Abdul: Yeah, you get this adrenaline rush from it.
Brandon Withrow: Yeah, you get a dopamine and adrenaline rush when you solve a really hard problem which is why there's so many people that are coding all hours of the night because they solve that problem. It's a rush when you solve it. You're like "Well, let's solve the next one and solve the next one." You have to learn to step away from the computer and come back to the real world every now and then because you can get lost in thought for sure.
Joey Korenman: That's really fascinating. It reminds me of something. I've talked about this with a lot of animators. It's really interesting that you said great animators typically know a little bit of code because in motion design it's for sure the case. Guys like Saunder van Dijk and Jorge, they are really good with expressions. Saunder writes his own tools and stuff like that. I've talked with them about it, and I'm a big After Effects expressions geek. It's like a form of procrastination for me. I could just hand animate something and it'd take an hour or I could spend four hours writing an expression to do it. I think that's why it never occurred to me that is because it is like crack when you get the right answer. You know?
Brandon Withrow: Yeah. It's a brain teaser. You feel so good about yourself when you solve ... You feel like you've done something when you solve a brain teaser.
Salih Abdul: Totally.
Joey Korenman: Exactly. All right. Salih, let's get back to the animation side of things a little bit. Before we get into Lottie, what does a motion designer do at a place like Airbnb? Are you creating little animations for web ads or are you actually prototyping like a button is going to animate this way and then when we go from this screen to this screen, this is going to happen? What are you doing over there?
Salih Abdul: Yeah. It's actually a combination of both. I think it's pretty 50/50. 50% of the work I do here are just straight up animations like a splash screen or something that has an illustration that we'll decide to animate. Or I'll help out with the marketing team that's doing some ads for something. I'll come in and do a little animation. That's like 50%. The other 50% is what you said. We've got some interaction that a team is working through, and they need to figure out some way to make that interaction happen in a smooth way. It's kind of both of those things. At Airbnb, I'm the only kind of person here focused on motion. I could imagine some months down the line having multiple people, and maybe some people are more focused on one and other people more focused on the other. At the moment, I just kind of do 50/50.
Joey Korenman: Cool. I'm sure everyone listening can kind of imagine how it works when there's a splash screen and you need to animate something. Can you walk us through the process of you being asked to animate - I don't know - the way when you push this button these five things happen and all of this information appears on screen? How does that brief, I guess, come to you? Where does it come from? How are you animating that stuff knowing that it's actually going to have to be coded in? How are you presenting things? I kind of want to know what a day in the life of Salih looks like when you're animating something like that.
Salih Abdul: Yeah. It's a little bit different every time, but there's a general thing. Usually there is a problem. You've got a designer who's got this whole flow of screens, and you've got two screens and it's like "Well, we need people to go to this profile page, but the way we get to the profile page needs to be something specific because of how things are laid out." Or "We've got this search bar at the top, and we want to actually show an auto complete." Well where does everything else go if we want to show this auto complete and how to make sure that it's not jarring. Usually what I do is I'll get a Sketch file from a designer that's got the flows in it, and me and the designer will kind of pinpoint some other problem areas or kind of interactions that they're thinking about.
From there, I'll go in the After Effects. I export everything from Sketch. Right now there's not really a good way to get from Sketch to After Effects. It's kind of complicated. I have to export PDFs from Sketch and then open those PDFs in an illustrator. Then usually I do some organization, save them out as illustrative files, and then I come into After Effects and just iterate from there and see how many different ways I can make this thing happen from one way to the next. Along the way, if I see that there's any specific problems with the way they have things laid out then I will kind of help them either just one side of the design or not. I just do as many iterations in After Effects as I can to try to kind of visualize what they want to accomplish.
Joey Korenman: Gotcha. Now you mentioned Sketch. I bet a lot of people aren't familiar with Sketch because it's not typically used in motion design studios. Can you just kind of explain what Sketch is and why Airbnb designers are using that instead of Illustrator?
Salih Abdul: That's a good question. I think Sketch is cool. It's not my favorite program, but I think that it does offer a lot of things that a product designer would need like ... I think a lot of times product designers need to know exact dimensions between things. You have a button, and then five pixels to the left you have a ruler. Then five pixels to the left of that ... There's this process called redlighting where you kind of determine all of the spaces and dimensions. Sketch does that really easy. I actually don't know how you would do that in Illustrator really easy. I think there's been some small things like that that make it easier for a product designer to use Sketch, but then also I think another part is there's a lot of these Sketch plugins that people have made that have made some of that stuff easier that you can't really make an Illustrator plugin that I know of. I think that those two things in combination have made it kind of like a product designer's took of choice.
Joey Korenman: Yeah. We actually have been, for the past five or six months, working with software developers on a new School of Motion platform so I've been learning kind of like a crash course in app development. The UX designer we've been working with uses Sketch. I'm really impressed with it. I mean to me it looks like Illustrator for web and app design, and it's designed for development so you can make CSS rules and things like that that translate over directly when you're doing redlining you called it. They call it slicing when you have to slice things up to actually like make the HTML to generate the page and stuff like that. When I started looking at Sketch, I had never heard of it. All of a sudden I was like "Wow, there's this universe out there of apps that everybody in the development world knows about that I've never heard of. Maybe I should be learning these things." I'm curious. Are there other tools that you see being used at Airbnb? There's probably things like Envision, Body Moving. Are there things like that that you think motion designers should put on their radar?
Salih Abdul: I don't know. I think Sketch is the one that I've used. I'm trying to think if there's any others. Honestly, I think Sketch is the main one aside from actually learning some coding. I don't know if you've heard of Xcode. I had never heard of it before I started here, but learning Swift or Objective C or some language and actually learning that side of it.
Brandon Withrow: There's a whole movement kind of in the design world like we're talking about animators knowing how to code. Well there's this whole movement happening especially the last couple years I've noticed in the design world where designers are learning Swift and Xcode and all of that to do app development. We actually have designers here that will actually present mocks that are actually coded mock-ups that can test the interactions and things like that. The thing that it's usually missing on those is actually working with live data so a lot of the data-
Salih Abdul: Yeah.
Brandon Withrow: Like the host and stuff is just like subbed in. They're actually developing little apps and things like that. It's pretty crazy. It kind of started though ... It used to be this thing called Flinto which was used for it.
Salih Abdul: Oh, yeah.
Brandon Withrow: I think it's still out there and still being used.
Salih Abdul: You know what? That's a great point. There's Flinto. There's actually Framer-
Brandon Withrow: Framer.
Salih Abdul: Which is another prototyping thing. There's a couple of those prototyping-
Brandon Withrow: Yeah, there's a lot of tools for prototyping.
Salih Abdul: I think there's some guys on our team that use Principle is another one.
Brandon Withrow: I've never heard of that one.
Salih Abdul: There's a guy on our team who uses Principle as his prototyping framework. I've never used it personally, but I've seen what he's done. It's an amazing framer for [inaudible 00:32:44].
Brandon Withrow: Yeah.
Joey Korenman: Interesting. It feels kind of like I think the industry is on the brink of having interactive become a really huge proportion of motion design work that's out there. I don't think it's happened yet. When you look at sites like Motionographer and when you look at the awards shows and the type of work that gets celebrated, it's still very much traditional motion design. You guys are kind of at the cutting edge here of motion design and code and app development. That's only going to grow. Do you think that motion designers in the next 10 years are going to be doing a lot of the type of stuff that you guys are doing?
Brandon Withrow: Absolutely.
Salih Abdul: Yeah, I think so.
Brandon Withrow: I think so. I think that in the next few years motion will become more and more ubiquitous, as ubiquitous as images. The only reason that it's not right now is because it's so hard to prototype and visualize animation and those sorts of things. Animation on it's own is such an amazing tool for interactive apps because with a simple animation you can show somebody that speaks any language what to do next without having to translate, without having to do all of these things that ... We have whole teams dedicated to making sure our app can be read in dozens of languages anywhere around the world. A lot of these problems can be solved with just a simple animation. A lot of people in the development community, when they think of animations and apps, they think of splash screens and those sorts of things which you can use too much off. You can also use animation in very subtle simple way to let a user know "Hey, you can touch this button." Because of the way it moves, you kind of have an idea that when you touch it it's going to open something up. The more we grasp on to that, the more delightful apps are going to be, and also the easier they are going to be to use for people that can't read-
Salih Abdul: Yeah.
Brandon Withrow: Or have accessibility issues. It opens apps up beyond just A) making apps up to the whole world basically.
Salih Abdul: Absolutely.
Joey Korenman: Awesome. All right. So you mentioned that the process of getting animation into an app is very tedious. I know that's why Lottie was created. Walk me through the old way, pre-Lottie. In all of the agony, how would you deal with some sort of complex animation? This button gets pushed and it expands and turns into a window and these things slide in. How did that work before there was a tool to help make it easy?
Brandon Withrow: It didn't work well.
Salih Abdul: Just a lot of time. Right?
Brandon Withrow: Yeah.
Salih Abdul: You could do it. It just took a long time.
Brandon Withrow: It took a long time to do. There's a handoff that happens. Basically design goes from a designer to a motion designer and then from there into sort of a programmer's lap.
Salih Abdul: Basically all I could give you would be in QuickTime.
Brandon Withrow: Yeah. Usually it's like a QuickTime. If the developer knows how to use something like After Effects which is kind of hit and miss, you could get them an After Effects file. Then they could have a better idea of what the actual values are because what the coder is going to be doing is turning it into actual numbers and all those things. Just giving a QuickTime is going to open up this whole realm of dialogue between the engineer and the motion designer of like "Okay, right here it moves over, slides to the left. Does it slide over 10 points or is that 15 points? How many points does that move?" Basically like downloading the knowledge of all the key frames from one mind to the other. It happens basically verbally.
Then the developer has to go in and write just hundreds of lines of code to craft this animation. That code's often very brittle because it touches a lot of different objects at the same time. We're all working on a team all kind of around the same object. If I'm doing animation, it goes between two screens. There's going to be an engineer that's working on the first screen and an engineer working on the second screen. I'm the person tying those two things together. If anything on the first screen changes something, now that animation breaks and doesn't work anymore, and I have to go debug these dozens of lines of code.
What often happens is that we're all so ... Since we're in an iterative environment, we're kind of racing towards this really fast deadline to get it out in front of public eyes. What happens is generally a beautiful animation is made. It's given to an engineer who has ambitions of making it, but it turns out to be really buggy and takes a lot of time to develop. Then our project manager looks at it and says "Not this time. Just pull the animation from this release. We'll get it in next release." Then you're left with just a static button that just pushes the next page. When next release comes around, that animation is forgotten about. We've left dozens of beautiful animations on the floor because it couldn't be built in the fast iterative environment that we're working in.
Salih Abdul: Also I've watched where you guys are tackling bigger problems.
Brandon Withrow: Yeah.
Salih Abdul: There's ... It keeps crashing. It crashes.
Brandon Withrow: Yeah, absolutely. The crash cart thing [inaudible 00:38:53] is not working.
Salih Abdul: Yeah. If you're going to dedicate your two weeks of hard work on animation but your app keeps crashing and people can't-
Brandon Withrow: It doesn't matter.
Salih Abdul: It doesn't matter. It's a priority thing.
Brandon Withrow: Yeah. Then once you start to get into other screen sizes, that animation needs to be changed because all of the numbers that are given to you for positions and stuff really need to be percentages on where it is related to screen. You're on an iPad, and they change from landscape to portrait. You're like "Oh, what does the animation do here?" It's like "Well, we didn't think about that."
Joey Korenman: Wow. That sounds horrible.
Brandon Withrow: That's how the whole industry has been working for some years now.
Joey Korenman: That blows my mind. So I suspected that maybe that was how it was done. I could see that maybe worst case scenario there's this brute force method of literally typing in circle and then in parentheses the coordinates and the size and animating that every time. That just sounds insane to me. I figured there had to be a better way, but it sounds like there really wasn't. I'm also assuming, Brandon, that you make that animation on IOS and now you want to port it to your Android app. That's not easy either, right?
Brandon Withrow: Exactly. We have an IOS team and an Android team that kind of work simultaneously on both apps. While I'm pulling my hair out trying to get this easing curve to match the easing curve of the button from the After Effects file, there's also an Android engineer doing exactly the same thing. It's like double the work. If you're releasing on web as well, you have a web engineer that's also doing the same thing. So you have three engineers for two weeks pulling their hair out to basically make an animation that's going to be compromised in some way. There's always-
Joey Korenman: To make [inaudible 00:40:49] basically.
Brandon Withrow: Yeah. Exactly. There's a lot of things that the animation slows. It goes through an iterative process of being dumbed down which in some ways is good because you kind of have to boil an animation down to its essence of what it's trying to do which if you're a minimalist is really cool.
Salih Abdul: Yeah.
Brandon Withrow: That's not the way you should go about minimalism.
Salih Abdul: Yeah.
Joey Korenman: Wow.
Salih Abdul: [inaudible 00:41:13].
Brandon Withrow: Yeah, absolutely.
Joey Korenman: Wow. Okay. It's obvious my next question was going to be where did the idea for Lottie come from. I think it's pretty obvious that everyone was just praying for someone to develop a tool to make this easier on everybody. But let me ask you this. Who was it more frustrating for? Was it more frustrating for Salih because he's spending time making this beautiful animation that then gets kind of butchered and dumbed down because of the horrible process? Or was it engineers who are like "Why do I have to spend three days typing in specific numbers to make this animation?" Which end of the process did it come from?
Brandon Withrow: I think it's just frustrating for everybody.
Salih Abdul: Yeah, I agree.
Brandon Withrow: We're all on a team together. We all care about the app that we're working on. I think that animators and engineers both get extremely excited about animation. If you have an app that has a really cool animation it, go up to an engineer and be like "Hey, check out this animation." I guarantee you they're going to go "Ohhhhh."
Salih Abdul: Yeah.
Brandon Withrow: We all love it. All of our hearts are broken when it ends up on the cutting room floor.
Salih Abdul: Yeah, it's a mutual disappointment.
Brandon Withrow: It is.
Salih Abdul: I wouldn't say that it has ever been disappointing for me to not get something in-
Brandon Withrow: Yeah.
Salih Abdul: Because I see all the other challenges that you guys-
Brandon Withrow: Absolutely.
Salih Abdul: Sometimes I'm just surprised that we have product out-
Brandon Withrow: Yeah.
Salih Abdul: Because of all the work that goes into it. I spent 10 years making QuickTimes.
Brandon Withrow: Yeah.
Salih Abdul: I still did that.
Brandon Withrow: Yeah.
Salih Abdul: I still have the QuickTimes. I think it's just a mutual disappointment that we together couldn't get this thing done.
Brandon Withrow: Yeah, absolutely.
Joey Korenman: Gotcha. So now talk about and go into as much detail as you can because I'm really curious about this. Talk about how Lottie was developed and what problem it solves. What does it make easier and in what way?
Salih Abdul: I think what Lottie makes easier is it allows you to take an animation from After Effects, wrap that data up into basically a file, and then kind of play, manipulate, [inaudible 00:43:39] on [inaudible 00:43:40] device. I actually kind of liken it to image formats. When you put a PNG on your product, you just put it in there. It's just a file. It's an image format. I think that's what Lottie allows you to do: really to kind of have an animation format that you can use on a data platform.
Brandon Withrow: Yeah. That's basically what ... It doesn't generate the code that makes this animation happen. It actually is a file that has just given ... The actual code for the app doesn't change at all. It just reads that file and plays an animation.
Salih Abdul: Yeah.
Brandon Withrow: It makes it really, really simple to take an animation from the motion designer and then get it on screen with very, very minimal effort. On top of that, the file is ... Kind of the other caveat before was that if you used an image file ... Say you didn't want to code the animation. You wanted to make a GIF and just put the GIF in the app. You had to make a GIF for all screen resolutions like a retina display, a non-retina display, and now the new ultra-retina display. You had to bundle that into the app which would make the app larger. Now the app very quickly balloons, and it gets over the 100 megabyte limit which means that a user can't download the app unless they're on WIFI. With Lottie though, the files are just extremely, extremely tiny. It's just boiling down the bare minimum amount of information you need to create this animation. You don't increase the bundle size. Animations actually in some cases download faster than just single images.
Salih Abdul: Yeah. I think the current version of Lottie is kind of like you don't have to use a GIF anymore to put an animation in your product. You can use this infinitely scalable animation format.
Brandon Withrow: Yeah.
Salih Abdul: I think future version of Lottie is not only can you use this animation format instead of a GIF, you can actually pull parts of the animation out or reference parts of the animation for interactions like transitions and stuff.
Joey Korenman: That is so cool. So Salih, you're in After Effects and you've got this ... You've imported a bunch of Illustrator artwork. What do you have to do to animate it in a way that Lottie can understand?
Salih Abdul: I have to take that Illustrator artwork in After Effects and turn them all into shape layers.
Joey Korenman: Got it.
Salih Abdul: That's one of the things that you have to do if you want to use Lottie. Either use shape layers or solids.
Joey Korenman: Okay.
Salih Abdul: Then also when you're working with those shape layers, there's certain things that Lottie supports and certain things that it doesn't.
Brandon Withrow: Yeah.
Salih Abdul: Just keeping all of ... It's easier for me since I helped kind of work on it that I know already what some of those things are that Lottie supports and what it doesn't like strokes and fills it supports, gradients it doesn't. You just keep those kind of rules in mind as I'm animating something. If I need something to go behind another thing, should I use an [inaudible 00:46:56] format or a mask? I'll just kind of think about what Lottie can support and build it that way.
Joey Korenman: What frame rate do you animate at?
Salih Abdul: I usually actually animate in 30. Before I hand it over, I'll open it up to 60 and preview it to see if there's anything that breaks on the in-between frames. I work in 30, but then I test at 60 at the end just to make sure.
Joey Korenman: Is that just because you're used to 30 so you kind of know how many frames between key frames? Does the app run at 60 frames a second? Is that why you preview at that?
Salih Abdul: Yeah, the app runs at 60. Sometimes if you work at 30 ... I've actually accidentally worked at 25 and then given an animation all those in-between frames. Sometimes things get messed up because-
Brandon Withrow: There's more to interpellate.
Salih Abdul: There's more to interpellate. I actually only work at 30 because performance-wise it's just easier.
Joey Korenman: Yeah.
Salih Abdul: Once computers get faster, I'll probably work at 60.
Joey Korenman: Okay. Let me ask you this real quick too, Salih. If you work at 30 but the app's running at 60, is Lottie basically taking a bunch of baked key frames and then trying to make in-betweens? Or is it literally translating just your key frames in After Effects and getting smooth interpellation and looking at what you did in the curve editor and stuff like that?
Salih Abdul: Yeah. It's just translating the key frames, and it's rebuilding that same information on that platform. It's saying "Oh, here's first key frame, and you're doing ease out to the second key frame." It's taking that information and just rebuilding it again.
Brandon Withrow: It even takes in if you've altered the control points at the timing curve and created an extremely custom timing curve like broke the tangents and all that fun stuff to create a bounce of something. Lottie actually rebuilds that timing curve pretty close to as close as we can get to-
Salih Abdul: Yeah.
Brandon Withrow: Exactly what you intended.
Salih Abdul: It's not really baking the key frames. It's really taking that bezier curve information and the key frame position information and remaking it again.
Brandon Withrow: Yeah.
Joey Korenman: That's brilliant actually because I can imagine that that would make for very small little files. So much of what you're animating, I'm sure, is just simple shapes, and it's a few key frames. It's got to be really small files, right?
Salih Abdul: Absolutely. That's one of the things that I've had to keep in mind when building for Lottie: each key frame is more data. If I want an animation that needs small and compact, I need to use as few key frames as possible. I need to use as few layers as possible.
Brandon Withrow: Yeah.
Salih Abdul: Before I export my json file for bodymovin, I need to make sure that I don't have any really long layer names because that just adds to the file size.
Brandon Withrow: Yeah.
Salih Abdul: For obviously no reason. Those kinds of things I think as people start to use Lottie, as we all start to use it will just become part of standard.
Joey Korenman: Gotcha. Okay, so you do your animation. You preview it at 60. It looks good. Then what? How do you get that animation over to Brandon to implement?
Salih Abdul: Then I use the bodymovin expression, and I export the json file from there. Then I give it to Brandon. That's it.
Joey Korenman: Just in case people don't know, bodymovin, it's free right? It's a free script you can download to add-
Salih Abdul: It's actually open source too. It's an open source ... It's two things. It's an open source After Effects extension, but it also have a Javascript player. This brilliant guy, Hernan Torrisi-
Joey Korenman: Right.
Salih Abdul: I don't know exactly how to pronounce his last name. He's based in Argentina. He built this open source extension.
Joey Korenman: It basically renders out an animation, but instead of a QuickTime movie, it's a json file which is essentially just a data file. Right?
Salih Abdul: Absolutely.
Joey Korenman: Gotcha.
Salih Abdul: To take everything that's in your composition and put it into that json file ... I don't know what they call it. Json file's like a dictionary, right?
Brandon Withrow: Yeah.
Salih Abdul: It just formats the data in a way that's organized [crosstalk 00:51:42].
Brandon Withrow: It just exports every layer, all the attributes of every layer ... If it attributes key frame, all of those key frames. For the shape layer, it just sends out the position of every control vertex, and it just basically patches it all up. It's a text file. I wouldn't exactly call it human readable, but you can open it up and kind of look through it.
Salih Abdul: I can kind of read them now a little bit.
Brandon Withrow: Some of it, yeah.
Salih Abdul: I can kind of read it.
Joey Korenman: It's a new pastime to look at these. That's awesome. Okay. Now bodymovin has been around for a little while. I think it's been around for maybe a year or something like that. I remember hearing about it when it came out. If that already existed, what didn't exist that you had to build Lottie for?
Salih Abdul: The native side. The IOS and Android side.
Brandon Withrow: Yeah. So bodymovin would export the json, but then it was a matter of what do you do with the json. How do you play it? He built this really great Javascript player that would play inside of a web browser, but when you're on a native app there was basically no way to play that animation. There was nothing that could read that json and do anything with it, with the native animation libraries. Lottie answers that by taking a json on Android and on IOS and then basically recreating those animations in a native sense.
Joey Korenman: Got it. Okay. So it's basically like a universal translation for the json file?
Brandon Withrow: It's just a player basically for the json file.
Joey Korenman: Gotcha. Perfect. Okay. It makes sense to me now. I hope everyone listening understands it now because I thought I understood it and now I think I really get it. It seems like an idea that should have been around for a while. My question is why do you think it's taken so long for tools like bodymovin and Lottie to be created. Why isn't everybody doing this now?
Brandon Withrow: The idea of taking an After Effects file and then exporting some data and then recreating an animation from it, that sort of whole workflow is an idea that's been around for a long time. I've talked with so many engineers over the last five years about this idea. It's one of those good ideas that will cook up in different sectors independently of each other at the same time. There's been a lot of times ... I had that idea back in 2012. I was talking to somebody that previously worked here, an IOS engineer, and he had that idea too. It was just sort of like we're all thought about it, but it was one of those like "Well who wants to actually sit down and do it?" You have to cut ... It's pretty time consuming to implement this whole thing. We got lucky with finding bodymovin because half the problem was solved so that's half the work done for us.
Salih Abdul: I also think ... We kind of talked about this a little bit earlier, Brandon. Each platform's different.
Brandon Withrow: Yeah.
Salih Abdul: Right? The way you code on IOS is totally different than the way you code on Android.
Brandon Withrow: Yeah.
Salih Abdul: The way you write in After Effects extension is totally different than the way you do all that stuff. It kind of takes this team of different kinds of developers to come together to make this thing.
Brandon Withrow: Yeah.
Salih Abdul: I think that's maybe why it's been a little bit difficult because you need so many different groups.
Brandon Withrow: Absolutely, yeah. That's always the ... The real problem is getting something that works on all platforms. If it works on one platform, that's great. A lot of people won't use it because if they happen to cut away to two-thirds of their user base of it.
Salih Abdul: That's the really the reason why we pursued it because we knew that if we did it internally we could support all the different platforms. We have people working on those.
Brandon Withrow: Absolutely.
Joey Korenman: Okay. That actually answers the next question I was going to ask which is why is Airbnb making this. I would assume Adobe or Google or one of those companies would be doing this, but Airbnb ... It was kind of surprising. Why is this coming out of Airbnb? Do you have any theories, any conspiracy theories why Airbnb, a company really known for sharing your house and renting it out, why Lottie's coming from there and not from Adobe?
Salih Abdul: I think a lot of people have a conception that Lottie was this big initiative, but really Lottie was just started on a ... We have these things called hackathons here. A hackathon is where you can spend maybe three days working on whatever you want.
Brandon Withrow: It's like a science fair.
Salih Abdul: Yeah, it's like a science fair. Different teams around the company will come up with ideas, and they'll hack one of their ideas for a couple days. Then the third day we all present and people vote, and it's really fun.
Brandon Withrow: Yeah.
Salih Abdul: Lottie was started just as a hackathon project. We saw bodymovin. I said "Brandon, what do you think of this? I got this json file." Then Brandon just started playing around with it. We got to a point where Brandon had a lot of things working. He had shapes, fills. He had animation.
Brandon Withrow: We got a lot farther than we thought we were.
Salih Abdul: We got a lot farther than we thought. Then we brought in Gabe on the Android side, and ti was like a rocket ship after that.
Brandon Withrow: Yeah.
Salih Abdul: It wasn't like "Oh, Airbnb's doing this for some specific reason." I think we just had A) kind of like that same challenge that everybody has like how do you put animation in a project, but B) also the kind of culture that we have here at Airbnb is you can kind of pursue things that you're passionate about. You can collaborate with people on different teams to accomplish things. You're given some sense of flexibility to do those things. No one blocked us-
Brandon Withrow: Yeah.
Salih Abdul: From making it. Also, I'm just lucky enough to be collaborating with Brandon and Gabe and how passionate they were about it. Gabe was working on a plane one time.
Brandon Withrow: Yeah.
Salih Abdul: He's flying to Colorado to go skiing. He's on a plane. He's like "I have three hours on this plane. Help me work through the trim paths."
Brandon Withrow: Yeah.
Salih Abdul: I think it's a combination of this lucky situation that we had-
Brandon Withrow: Yeah, it started as a science project, and then once we got to our initial stopping point, we're like "Woah, this might actually be something. Let's continue to pursue it." The way it started during the hackathon is really great because it was just ... Salih was making very simple ... It was like "All right, let's just try to get a square to move across the screen." So he made an After Effects file with a square, and then I spent all day. I was like "I got it to move. I got the square to move."
Salih Abdul: We were like high-fiving.
Brandon Withrow: Yeah. Let's put a trim path on that square. It's like "Okay, let's do it." We just basically went through every single attribute that you can animate. Our goal was and still is to support as much of the tool set geared towards motion graphics that After Effects has. We're getting there. We're getting there. We have a long roadmap ahead of us of things that we haven't made yet that we're still working on.
Salih Abdul: Yeah.
Joey Korenman: Well I remember the day that Lottie was announced. I follow the motion design industry very closely. There's this enormous outpouring of gratitude towards you guys for putting this together. I hope that some of that made its way to you, and you know that you have a lot of fans now because of what you've made. You mentioned that Lottie ... It's still got some limitations. What are the limitations on it right now? Were they chosen deliberately or is it just stuff you haven't gotten to yet?
Brandon Withrow: Yeah. The limitations were both chosen deliberately and stuff that we haven't gotten to yet. Like I said, we want to support as much as we can, but we had to basically ... It's kind of like a plan in RPD. We're like leveling up. It's like the basic thing is the square. This other feature's inherently more complex so let's work our way to it. We had to find basically how things built towards each other. "Oh, we support shape layers. Then after we get that, that's a prerequisite before we can do merged paths." Which we haven't done yet. We're slowing but basically building the foundation that will build the next level on.
Salih Abdul: Yeah.
Brandon Withrow: It's really backwards engineering how After Effects works, is what a lot of it is. "When we break a tangent and move it this way, what do you think the equation is that After Effects is using to make the curve move that way?" It's like "Oh, it's calculating control point between the vertex and the next control point, 33% between the two." That was just like trial and error: drawing a line, comparing; drawing a line, comparing. What we don't support is gradients.
Salih Abdul: Yeah, it's a lot of little stuff.
Brandon Withrow: A lot of little stuff. Merged paths. There's alpha inverted masks that's a tough one, and I'm still working on-
Salih Abdul: Actually-
Brandon Withrow: How to solve that one in my brain.
Salih Abdul: Some of the things that we don't support ... It's more like we don't support them because I could work around them.
Brandon Withrow: Yeah.
Salih Abdul: In the earlier days maybe six months ago, we were really eager to use Lottie in Airbnb's app. We had this project, these notifications, and I had these three animations - the light bulb-
Brandon Withrow: The light bulb, the clock, and the diamond.
Salih Abdul: Right. The diamond. For me it was like "Okay, how can I build these things so that we can use Lottie in a nice way?" I would say "Well, we don't need to work on alpha inverted masks because I don't need that right now."
Brandon Withrow: Right.
Salih Abdul: "But I do need this thing." Once we got trim path working, we could actually test it in production, see where things break.
Brandon Withrow: Yeah.
Salih Abdul: It was kind of like-
Brandon Withrow: That was our beta launch basically.
Salih Abdul: Yeah, it was. It was kind of like "Well, I could work around this right now so let's leave it for later."
Brandon Withrow: Yeah.
Salih Abdul: I think that's how it's gone up until now. I think now we're just now starting to go back and kind of hit some of those things that I've been just working around so that we could use it.
Brandon Withrow: Yeah, on the GitHub page on the IOS and Android, in the read me there's a list of supported features and unsupported features. I don't think that those lists are entirely inclusive because you just forget about the things sometimes. "Oh, crap. I forgot that that didn't work."
Salih Abdul: After Effects can do so much. That's the hard part. You open up shape layer. You open up that little triangle. You see like fill, shape, twist, gradient fill. It's like a list of all these things.
Brandon Withrow: It goes on and on.
Joey Korenman: Do you think that there are limitations that will just kind of always stick around due to the fact that Lottie is essentially creating real time animations on an app? Do you think you'll ever try to support like fractal noise and effects and raster artwork and stuff like that?
Brandon Withrow: It's possible, but it would take some time. Like I said, a lot of those things, it would be us. It's not necessarily a performance issue but more of like just trying to figure out how they did that. What's the equation that is taking those numbers that you put in and creating that thing on screen?
Salih Abdul: Yeah.
Brandon Withrow: That's a huge gap to kind of cross with you brain. Some of those things ... You also want to match as closely as you can pixel by pixel what is onscreen because the layers of dependencies that build up over top of that. Who knows what an animator might do with fractal noise? If you're slightly off, that could ruin their animation. It's better to just not support it at all then to ruin somebody's animation.
Salih Abdul: There's probably a balance there too.
Brandon Withrow: Yeah.
Salih Abdul: You think of something like fractal noise. That's a great example, by the way. It's very complicated. It's very complex. How often is someone actually going to use that? Unless they have decided to support fractal noise, that's going to add how much to Lottie in size in and of itself? Lottie right now is some 100 KB or whatever.
Brandon Withrow: Yeah.
Salih Abdul: That's going to add to Lottie's size which in turn is going to add to everyone's app size.
Brandon Withrow: Exactly.
Salih Abdul: I could see us ... In my mind, I don't write any codes. I'm like "Let's support everything."
Brandon Withrow: Yeah.
Salih Abdul: But I could see us purposefully not supporting some things because it will blow up Lottie-
Brandon Withrow: It just doesn't make sense.
Salih Abdul: It would blow up Lottie to a point where it's like "No, I don't want to put this 2 MG library in my app."
Brandon Withrow: Yeah. A lot of it is just kind of deciding what makes sense for the use case of animations in an app. There's a ton of video editing features in After Effects. It's After Effects. It started as doing visual effects. It's just kind of slowly moved towards motion graphics as motion graphics has become more popular.
Salih Abdul: Yeah.
Brandon Withrow: There's a lot of those video editing type things in After Effects that we're never going to support because it doesn't make sense. We're not going to add in chroma keying. You have to have a video asset to do that which then undoes the whole purpose of having a json file.
Salih Abdul: Yeah.
Brandon Withrow: There's a lot of things that we're like "No" and other things that's sort of like "Well how often is this used and what's the benefit that comes form supporting it?"
Joey Korenman: Gotcha. Gotcha. It's interesting thinking about how you essentially have to rebuild a little mini After Effects in order to translate the json file. Is Lottie ... This might be a weird question. Is Lottie the ideal tool for this or is it just like a BandAid? Shouldn't Adobe be making app that's animation and code combined and does exactly what you do? Then you don't have to figure out how to recreate the bezier curve from the value graph or something. Do you think that that is coming down the road somewhere or do you think that maybe tools like Lottie are the future?
Salih Abdul: Maybe Adobe's working on it. We don't know.
Brandon Withrow: I really do. I really loved this project. I loved working on it, but what's exciting to me about it is that it's getting people talking about animation. It's getting people thinking about animation. In my mind in an ideal world in a year or two, Lottie is irrelevant. It's not the industry standard. It's irrelevant because somebody has taken this idea and taken the time to move it to the next level.
Salih Abdul: Absolutely.
Brandon Withrow: It's become ... We jokingly said we want to start an animation arms race. We want to start a race between everybody to make animations easier to make and more ubiquitous. I don't care if Lottie is the answer for that or if it's something else. I just want it to happen.
Salih Abdul: Yeah, absolutely. I just want to use it.
Brandon Withrow: Yeah, exactly.
Joey Korenman: I love it. I love it. All right. I have one last thing I wanted to ask you, Salih. We mentioned earlier that doing animation for apps and sort of interactive stuff for the web, there's going to be more and more of that. Motion designers are going to be on the forefront of that. I think in the next 10 years, that might be the biggest field for motion designers to be in frankly. As an animator, what are the sort of animation things that you've really found useful and fallen back on as you're now working on pieces of an app that move around versus here's a logo, here's a type layer? Have you discovered any new things that you think a motion designer should be focusing on or is it still just animation principles and sticking with the basics?
Salih Abdul: I honestly think it's still just animation principles sticking to the basics. I think one of the things since animation is so hard to do on products that people who make apps, they don't often think of time as an asset. They think of layout and color and typography and composition and speed of performance, but they don't think of using time as another piece of that puzzle. I think that's what animators do really well. You can take 10 seconds and weave a narrative using time as an essence. I think that me as an animator just trying to be short at time is part of the equation is the best thing I can do. I feel like any animator can do that.
Joey Korenman: That's awesome. Brandon, one last question for you. I've been wondering lately if there's going to come a time when every motion designer has to learn a little bit of code. Maybe we're already there. I'm not sure that every animator needs to learn Swift and be able to make iPhone apps or something like that. If you were going to give the average motion designer out there some advice saying "Okay, if you're going to learn a little bit of code, here's the language and these are the types of things that you should learn about" even if they're just basic principles so that a motion designer can work with a developer. What advice would you give a motion designer?
Brandon Withrow: My advice ... I've had a lot of people ask me kind of similar questions just because I kind of have my foot in both realms between the art world and then also the developer world. A lot of my friends in the art world ask me "What language do I start with? Where do I start?" Really in terms of language, it doesn't really matter. They are all more or less the same. It's just a matter of translating syntax. It's not all that different. It's not as different as English is from Latin or anything like that. You can kind of look ... If you know one language, you can look at the other and you're like "I get what's going on here. It's weird that that comma is right there. I don't know what that guy's doing, but I get what's going on here."
My advice is ... I can just tell you how I got into it. I was working on something, and I was like "Man, I keep doing this one task a whole lot. There's got to be a way to automate it." Expressions is a really great way. I started in After Effects Expressions too. Then it's like it's a dream. It's basically just while you're working, don't let your brain just kind of go idly by and do these repetitive tasks. Stop and be like "Hey, maybe there's a way that I can automate this." Find those very small problems to solve, and then try to do your research and try to solve those problems with code. It's building blocks. It's like starting with a square with Lottie. You start with the smallest, most simple problem you can and be like "Can I just make something that will do this?"
It's really frustrating. When you're doing it, you think about what other programmers do. You're like "Oh my god. I will never be able to do that." Then before you know it, you will be doing that. Once your brain starts to kind of soak in coding ... I imagine your brain takes a bath in code. Then afterwards it's like "Oh!" Things start to stick. It seems so foreign at first, but just stick with it. Stack Overflow is an amazing source. Also oftentimes it's quite hilarious when you read the comments.
Joey Korenman: This is true. I've spent some time on Stack Overflow. That is awesome advice, man. I would also add to that learn from Brandon's example. Sometimes just say yes, "Yes, I can do that."
Brandon Withrow: Imposter syndrome is something that every human being has. If we all have it then we should all stop worrying about it and just keep on being imposters.
Joey Korenman: I was going to say no, you didn't have imposter syndrome. You actually were an imposter in that situation. I'm glad it worked out, man. Hey, Salih and Brandon, thank you so much. This was awesome. I had a blast getting really, really dorky into all the code and everything. I really want to thank you for your time. We will be putting links to Lottie and everything we talked about in the show notes. Yeah, I hope we stay in touch. I hope to hear from you guys soon.
Brandon Withrow: Yeah, absolutely.
Salih Abdul: Thank you so much for having us. It's a pleasure.
Joey Korenman: I would love to say thanks to Brandon, Salih, and the rest of the team at Airbnb that helped bring Lottie to life. I agree with these two 100%. I think motion designers will find themselves doing more and more prototyping for in-app animation. Having tools like this around will make it so much easier for us to focus on what we're good at which is making things move well. It'll save software engineers from having to worry about the animation stuff. It's the tool we need, people.
I really hope you dug this interview, and if you did, please share it with anyone you think who might be into topics like this. Also head over to schoolofmotion.com and sign up for a free student account so you can get our amazing Motion Monday's email blast which covers industry news, new tools, and even has some exclusive discounts. You'll also get access to tons of free content like project files and downloads from our lessons. That's it. That's all I'm going to say. Thank you for listening, and I will see you on the next one.
