Animate UI/UX in Haiku: A Chat with Zack Brown

We sat down to chat with Zack Brown, CEO and visionary behind Haiku Animator.

We'd like to start this article off with a poem:

UX and UINot So Fun to AnimateBut, Now There's Haiku- School of Motion

Are these 3rd grade English jokes doing anything for ya?

There's a lot of buzz around motion design and how it fits into the world of UI/UX design. At the forefront of UI/UX research is Zack Brown, CEO of Haiku and the visionary behind Haiku Animator.

The world is thirsty to add expressive animations to their user experiences, but the present workflow for animation in UI and UX has much to be desired. Now, with the help of Haiku Animator you can design, animate, publish, and embed in a single well-tuned program.

This isn't just a random startup either, Haiku went through the legendary Y Combinator program. Y Combinator is notorious for helping kick-off some of the most innovative brands we know today, like Dropbox and Airbnb. So, it's safe to say, Haiku looks like they're on to something.

In the podcast we sat down with Zack to chat about the world of UI/UX Animation. Along the way you'll hear about Zack's background in the advertising world, how he started Haiku, and what it's like to run a rapidly-expanding startup.

Haiku also is offering our podcast listeners a discount on Animator. These discounts are going to be available until August 1st, 2019! Just click the links below to claim the discount. Here are two different options:

• 50% Off for Three Months of a Monthly Plan (Save $27)
• 25% Off the First Year of an Annual plan  (Save $45)

Now that your curiosity has been peaked, let's say hello to Zack...

ZACK BROWN SHOW NOTES

We take references from our podcast and add links here, helping you stay focused on the podcast experience.

• Zack Brown
• Haiku Animator

PEOPLE/STUDIOS

• Thomas Street
• Paul Graham

RESOURCES

• Sketch
• Y Combinator
• Inspector Spacetime
• Lottie Podcast Episode
• Unity
• Issara Willenskomer Podcast Episode
• Lottie

MISCELLANEOUS

• Dreamweaver
• Fireworks
• Shake

ZACK BROWN TRANSCRIPT

Joey Korenman:

I have to confess something. I am really interested in what's going on in the UI and UX space in regards to motion design. It's an area that seems to be exploding with cool projects, job opportunities, and new technology that's making it easier to translate animation into code. However, as of this recording in 2019, it's still kind of a pain in the butt to create animation that is easily usable in an interactive way within apps.

Joey Korenman:

Our guest today aims to change that. Zack Brown, and yes that's his real name, is the CEO and founder of a startup called Haiku. After going through the legendary Y Combinator program, Zack and his team have launched "Animator," an app that has the modest goal of unifying design and code. Pretty lofty stuff, but I believe that Haiku is really onto something.

Joey Korenman:

The Haiku team has come up with a way of deploying animation that may just solve one of the trickiest problems motion designers face when working on apps. Animator, which I have played around with and love, let's you animate and code in one interface that can then deploy that animation in a very slick and flexible way for developers. In this interview, we go deep into how animator works and what makes it different and more efficient in the UI space than say, After Effects.

Joey Korenman:

We also talk about how Zack started the company and built a brand-new animation app totally from scratch. It's a very cool conversation and I think it'll give you a sneak peak at the kinds of tools that we motion designers will be using in the very near future.

Joey Korenman:

Zack, it is awesome to have you on the School of Motion podcast. Thank you so much for taking time and I can't wait to pick your brain.

Zack Brown:

Yeah, my pleasure to be here, Joey. Thanks for having me on.

Joey Korenman:

Yeah, no problem, man. Well, first thing I have to ask you about the name. I asked our School of Motion crew, I said, "Hey, Zack Brown from Haiku is coming on," and all they wanted to know was what it's like to be a country music star, so do you get that a lot? Do you know who the Zac Brown Band is?

Zack Brown:

Yeah, it's a lot of work moonlighting as a famous musician while running a startup, but somehow I pull through and make it all happen.

Joey Korenman:

That old chestnut.

Zack Brown:

But indeed, it was a tow truck driver who first ever clued me into Zac Brown and he's like I need your signature and oh, Zac Brown, I need your autograph. I made it, I think I was 20 at the time, I had made it 20 years of my life being Zack Brown and thereafter, you always have to click the "did you mean Zac Brown Band?"

Joey Korenman:

Exactly, yeah. I don't think he has a K, so you can just say I'm Zack with K. That'll clear things up. Oh, that's really funny. Everyone listening to this, I'm sure they're not super familiar with your company and your app yet, but they will be.

Joey Korenman:

But I wanted to start by just learning a little bit more about you. What's your background and how did you end up eventually starting a software company that's building an animation app?

Zack Brown:

Sure okay, so I started my creative life in print design and photography sort of using Illustrator, Photoshop, like that suite of tools. I've always been into computers since I was really young and while exploring these media, I discovered this tool called Flash, which was a wonderful piece of software and it became my bridge into programming.

Zack Brown:

In Flash, not only could you draw with these still to this day unique vector author tools, but you could decorate your designs with code in a really elegant and self-contained way, so that started to get me really into programming. I made all these little games. The world was my oyster as it were. And so, I went on to study computer science and then, worked as a software engineer for a while all across the board, 3D rendering, distributive systems, a little bit of AI, AR.

Zack Brown:

And a good amount of UI, UX and then, went on to start an agency called Thomas Street. We were around for about seven years, grew to a pretty good size. We had clients like Coca-Cola, DirecTV, then I sold that. I traveled for two years out of my 20's. That was like an intentional career move, believe it or not. Covered some 40 countries, learned some languages, spent a stint sailing, trying to enrich my life as it were.

Zack Brown:

And then, came out of that and founded Haiku and that was 2016. We've been around for a little while.

Joey Korenman:

Wow, well we can all relate to that. Selling a company and traveling for two years. That is a really cool story, man. I want to dig into that a little bit. So, you said you started an agency, you were doing work for brands like Coca-Cola and stuff like that. What kind of work were you doing?

Zack Brown:

It was across the board, generally focused on bridging the gap between design and code, like that was our black box. Product consultants, I guess. So, we'd go in, we'd gather requirements with the different stakeholders, we would come up with designs, get those approved, implement the designs as software and that end-to-end process was our bread and butter.

Zack Brown:

That also is kind of the beginning of my personal understanding of the problem of getting from design to code. It's a messy problem and there's still no perfect solution for it today.

Joey Korenman:

Yeah, that's what I was going to ask you about, because even now and this interview is great timing for us, because School of Motion is going through the process of doing a little bit of a design rebrand and we're going to be implementing it across everything, on our website and so, we're kind of grappling with this too.

Joey Korenman:

We have all these ideas and we'd like our website to work a certain way and we're an animation school, so we want things to animate. And even now, in 2019, it's still very difficult to do that, so when you were running this agency, what was this process like? The process of turning design and I'm assuming also animation into code? What was the state of the state back then?

Zack Brown:

It was about the same as the state of the art today, which is where you have designers using digital tools to create mock ups of what should be built in pixels, which they then hand off to developers whose job it is to build those pixels into other pixels, but the right pixels.

Joey Korenman:

Right.

Zack Brown:

Right and that's again the very core of the problem. We're already all using digital tools, but our workflows are disjointed and that workflow is really the crux of the problem. How do we bring those workflows together?

Joey Korenman:

Yeah and there's also a totally different ... I was trying to think of a different word than "paradigm", because it just sounds so lame, but that's the word I think that's appropriate. When motion designers typically are thinking in terms of essentially linear storytelling. It's going to look this way, because I'm animating it this way and it will play back like that every single time.

Joey Korenman:

But when you're talking about an app, well it's going to animate into a different state, but then it might animate backwards. If you go back and the color of the button might change depending on a preference. And there's all these things that are now interactive and have dependencies and things like that.

Joey Korenman:

So, is that essentially the reason that there's this translation problem between the tools that we use on the motion-design side and the coding side?

Zack Brown:

Exactly, yeah. And there's no such tool with a caveat, put a pin in that, there's no such tool today that let's you do that. There used to be one. That's exactly what Flash let you do, again, by mingling design and code, you could go to Frame 20 and set a little flag in code and now, you're whatever your button is red instead of blue. After Effects doesn't do that and After Effects is really all there's left in the motion design tooling world these days.

Zack Brown:

But it's actually just a weird last what, five, 10 years since Flash has been effectively dead that the world has felt this vacuum, because it used to have a monopoly and when a monopoly dies, it's just kind of this weird spot that we're in. Does that all make sense?

Joey Korenman:

Yeah, no, it totally does and I actually before I fully went into motion design, I dabbled in Flash too and I loved that about it as well that you could use action script and create a ton of interactivity while you're designing and it really was kind of a great thing to use.

Joey Korenman:

And to be honest, I never fully understood why it died the ennoble death that it did. Do you have any insight into what killed it? And for everyone listening, Flash is still around. It's called Animate now. Adobe rebranded it and it's used a lot for cell animation, for traditional animation, but it's not used the way it used to be.

Joey Korenman:

I'm curious if you know why that is, Zack.

Zack Brown:

Yeah, I have a thought or two. So, the beginning of the end for Flash was circa 2005 when Adobe acquired Macro Media for $3.4 billion and that money was essentially all for Flash. Macro Media had other products in its lineup like Dream Weaver and Fireworks, but Flash was really, it was the crown jewel. It ran on every device, it at the point served half of the Internet's ads, it was the go-to platform for creating games.

Zack Brown:

If you remember flash games, flash cartoons, it was the backbone, the infrastructure backbone for YouTube and in general, video on the web. It's easy to forget all of this, but Flash was a huge success, and so Adobe paid rightfully a huge sum for it and then, mobile came along. The iPhone was sort of the flagship for the mobile, smart phone revolution and mobile killed Flash along with the help of Steve Jobs and the entire business model of the app store, a gigantic portion of whose revenue comes from games.

Zack Brown:

And games for free on the web are certainly at odds with games for pay through the app store and its gatekeeper. And there are a bunch of technical reasons as well. The code base at this point was 15 years old, it had gone through all sorts of different leaders and through the acquisition, some people didn't stay around. No one really knew the code base.

Zack Brown:

That combined with Adobe's DNA and what I would call effectively malstewardship of Flash, it was this perfect storm that led to its death.

Joey Korenman:

Wow.

Zack Brown:

Yeah.

Joey Korenman:

I mean, it's really kind of sad and I don't know. There's weird parallels that you can draw from that story and other things that are similar, companies being acquired and then slowly, slowly choked to death. There used to be a really, really powerful, amazing compositing app called Shake, it was kind of the precursor to Nuke, which is now the standard visual effects tool.

Joey Korenman:

And Apple bought Shake and then, it just sort of died on the vine and there was a lot of anger around that too, so it's not an uncommon thing. All right, so my next question, which I think now we've kind of danced around it enough is your company, Haiku, builds a tool called Animator and we're going to dive deep into it, but just to give everybody an overview, what is Animator? And what is the problem it's trying to solve?

Zack Brown:

Sure. So, I think After Effects is a good reference point. After Effects was first released 26 years ago back in 1993, so it's old school and it's a motion graphics tool specifically for film and TV and it always has been. Imagine for a second if After Effects were built from the ground up, but with the goal of motion design for software and user interfaces instead of filmmaking.

Zack Brown:

And there are some key differences between those media, things like interactivity, integration with code bases, things like version control. Those concerns don't quite exist in the film and TV world.

Joey Korenman:

Right.

Zack Brown:

So, we've had a lot of users compare us with the analogy Sketch is to Photo Shop as Haiku Animator is to After Effects. Namely, it's newer, it's purpose built for UI animation, it's cleaner and more approachable as well, especially for people getting into motion design for the first time.

Joey Korenman:

Perfect. Yeah, I think it's the perfect description and I've played around with it and it's a lot of fun to use and anyone who uses After Effects will immediately get how it works. There's a whole other side to Animator that doesn't really exist in After Effects and I want to talk about that, but I want to hear about how you actually built this app, because I think you and I met a year ago at least and at that time, the app was in beta and you've added a lot of features to it and developed it.

Joey Korenman:

And I'm always curious about how you go about doing something like that, building such a complicated piece of software. So, maybe you could just kind of talk about how you went about developing the initial versions of the app. Was it you coding it? Did you have a team, how did that work?

Zack Brown:

Again, the whole story arcs back to that agency and bridging that gap between design and code and understanding that problem. That's the beginning of the Haiku story, actually. I guess my personal career has orbited around this problem in a few different spots, different jobs. And along the way, I met my co-founder. We worked together at a past company and he saw the problem as well and so, we set out, we incorporated in June 2016.

Zack Brown:

The first six months were rather experimental, just he was in Philadelphia, I was in SF, so really just video calls, voice chat, Slack, and version control and back and forth and figuring something out. And it was over a year until we had anything that was useful to anybody at all. Because it did sort of start in a science lab setting. Like oh, what if we did this, what if we did that? That's kind of the beginning, just a lot of experimentation, brute force, exploration, and then we brought on our first investment toward the end of 2016.

Zack Brown:

And that's when we started to be like well, I guess we have to monetize this thing, let's build some real utility into it, let's find a use case that people care about and ultimately will pay for and that's how it evolved.

Joey Korenman:

Cool and one of the things that I'm really curious about is the fact that you were accepted into the Y Combinator program. And I don't know if everyone listening is going to be aware of what that is. Everyone in the tech world knows about Y Combinator, but in the motion design world, I'm sure there are people that don't.

Joey Korenman:

So, can you explain what Y Combinator is and then, why you chose to apply for that program?

Zack Brown:

So, YC, Y Combinator, YC, is a startup accelerator. What they do is interview startups and founders that they find promising and then, those whom they accept, they connect with resources and grooming, essentially for raising venture capital and playing the startup game. And they invest a bit of money themselves, but you don't take YC for the cash, because they're kind of expensive. They take a big chunk of equity.

Zack Brown:

There are a lot of different startup accelerators these days, but YC is one of the originals, the OG's if you will.

Joey Korenman:

Right.

Zack Brown:

And I have a list here, some other portfolio companies include Air Bnb, Stripe, Cruise, Dropbox, Coin Base, Instacart, Reddit, Twitch TV and the list goes on. It's like all these IPO's happening right now. YC is not complaining at all.

Joey Korenman:

They've got a good eye for talent.

Zack Brown:

They do. They also have a brand and so, they have a lot of people apply and famously, their acceptance rate is lower than Harvard's, like four times lower. So, going through YC gives you a similar stamp of credentials, like oh YC says they're okay, so obviously they're okay.

Zack Brown:

That's as worthwhile as credentials ever are and at least in Silicon Valley, that's how it works, I guess.

Joey Korenman:

Yeah, that's really, really cool actually. And I want to hear about the experience too, but I want to dig a little more, because this is something that I've thought about and I've talked with other entrepreneurs and School of Motion, as of now, has no investors. It's been totally bootstrapped, but I've thought about it.

Joey Korenman:

I've talked to investors and you sort of weigh the pros and cons of that, so I'm sort of curious what tipped the scales for you to make it worth giving away equity to raise capital instead of bootstrapping it.

Zack Brown:

Part of it harkens back to the science lab experimental early days where we were seeking to invent something revolutionary and at the point when we were accepted to YC, we did not have a path to profitability. We had not monetized yet. We didn't monetize until a year after we got accepted into YC, so there simply wasn't a path to bootstrapping, not with that current trajectory.

Joey Korenman:

Right.

Zack Brown:

We had raised a bit of friends and family and founder capital, so we'd already raised some VC as it were, we were strattling this line, do we want to just change our path and focus on getting something scrappy out there that's making money or raise a bit more and go for something more grandiose or ambitious from the get go? Which is music to VC's ears.

Zack Brown:

Yeah, at the point that we got into YC, we had about five months of runway, which might be enough to raise a seed round in the Valley, but it's a hard sell when you've got science fair technology and no capital yet. So, we chose YC for that among a number of other reasons and personally, I was very happy with the experience.

Joey Korenman:

Yeah, I'd love to hear about the experience, because it's kind of the stuff of legends. YC is the most famous startup accelerator in the world and Paul Graham is a genius and Paul Graham, for anyone listening who doesn't know that name, one of the founders of YC among other things and has an amazing blog with a lot of wisdom on it.

Joey Korenman:

But yeah, so what does that program actually do for a company like yours?

Zack Brown:

I should first say that YC, when we went through, we got in at the end of 2017, went in at the beginning of 2018, it's very different than it was back in 2005 when they got started. When they got started, that's really like the legendary cohorts are when they got started, the Twitch TV's and Reddits and Air Bnb's and nowadays, it's that but scaled up.

Zack Brown:

YC considers themselves a startup as well, and so their goal is to scale. And when we went through, there were somewhere between 100 and 200 companies in the batch versus like 10 or something in the first batch. Very different, very different experience. That said, I went to a big university and one of the things I learned in university, kind of the hard way at first, was that there are a ton of resources available, but if you lean back instead of into them, if you lean back, you don't get those resources.

Zack Brown:

And someone else will get them and you'll just kind of coast through. However, if you reach out and seize the resources ...

Zack Brown:

However, if you reach out and seize the resources proactively at a big university and at your big Y Combinator alike, then you get a lot out of it. And I guess I'm 30 years old now. I want to do something with my life, and I was fortunate to have that knowledge, I guess, that it's better to lean and in seize those resources. And as a result, I feel like we got a lot out of it, things like network, mentorship, just advice across the board. I glossed over network, but that's a really big part of it. Among those 200-ish companies, we were able to forge a lot of connections and people I still keep in touch with today. And the YC network is also, they run this internal community where you can reach out to any other YC founder. It lists the email address and phone number. So if I wanted to, I could hit up the founder Dropbox for Airbnb presumably if I had a good reason to do so. But that network is a big piece of YC.

Joey Korenman:

Oh, that's really interesting. And there's some similarities. I don't want to compare School of Motion to YC, but we have an alumni network that's actually become probably the most valuable part of the experience of taking one of our classes. And it was kind of an unexpected thing at first, how valuable it actually turned out to be. So that makes a lot of sense to me. So let's get into the actual app, Animator. And everyone listening, we're going to link to the website, Haiku's website, and you can download. I think currently there's a 14 day free trial of Animator, and there's tutorials up on the site. A lot of great information.

Joey Korenman:

So there are other animation apps out there being developed, and there seems to be a lot of apps in general being developed, web apps and also native apps, to try and help web design and app design be easier. So what's the unique thing about Animator?

Zack Brown:

What's unique about Animator is the fact that it's intended for code bases. It's motion design that ships to production. So code is a first class citizen, both inside the app, like your source file, if you think like a .PSD for Photoshop, like that kind of source file. The source file for Animator is straight up code, hand editable code. So every time you move something around on the stage or set up a Tween, it's actually reading and writing code as it does so. And that's very intentional so that it is super easy to integrate with code bases.

Joey Korenman:

So let me ask you this. Because, and I'm not super sophisticated about this, so forgive me if I butcher this, but in After Effects we have Bodymovin, which takes your After Effects comp, and there's a lot of caveats when you use it, but in general, if you're using shape layers and things like that, it spits out a JSON file. So it spits out code. So how is this different than what Bodymovin is doing?

Zack Brown:

Yeah. So I remember when Lottie came out back in 2017. This was when we had already sort of locked and loaded on the motion design trajectory for Haiku, at the time Haiku for Mac, now Haiku Animator. I've always found it super inspirational. I have some personal qualms about After Effects, as you might imagine, especially as a tool for UIs, for software. Bodymovin and Lottie are designed around, built around reverse engineering the After Effects source file. So that JSON blob that you get out of Bodymovin is the shape of the After Effects file format.

Zack Brown:

Personally, when I imagine motion design for software, as you already mentioned, Joey, interactivity is critical, like the ability to change colors or respond to tap, or to transition from this state to that state in a different way than transitioning from that state to the subsequent state. Although that requires logic. In computer science-y terms, it requires turing completeness. And you simply can't get that from After Effects.

Joey Korenman:

Right.

Zack Brown:

Right. So that's the biggest difference, is having I guess both the privilege and the incredible burden of building the authoring tool from scratch, the After Effects replacement, if you will. That enabled us to design a code format that was meant for code instead of sort of being retrofitted for it.

Joey Korenman:

That's a really good explanation. And having used Animator a little bit, it does remind me a lot of the way Flash works. And it's really interesting. I'm noticing you're using the same terminology that Flash used, Tween and stage and things like that. In After Effects, there's kind of different words we use. But you've got essentially a comp, and you've got layers, and you can place bits of code on those layers that cause them to react to certain things and respond to the layout, and you can set up responsive things. And it's really, really cool. So what are some of the ... maybe you can give us some examples of how you can use a tool like Animator to do things that are difficult to do in other ways.

Zack Brown:

Again, based on the premise that Animator's goal is to bridge that gap between motion design and code, the real power you have at your fingertips is code, like the magic of code. And so Animator has a few ways you can code inside the app. This is also a fundamental difference versus After Effects. And there are three ways you can code. We have these constructs called expressions, which are very much like After Effects' expressions with a twist. They are essentially Excel spreadsheet functions. So the same way you can take a sum of cells A3 to A14 in Excel just by writing equal to sum [inaudible 00:27:15], that nice little expression, you can do the same thing in Animator, but responding to, for example, mouse position or a touch, a tap. Does that make sense?

Joey Korenman:

Yeah, that makes a lot of sense.

Zack Brown:

Okay. And then the other way, so that's intended to be simple, but also very powerful. It channels functional, reactive programming. And you can apply those expressions into any property. So I can make position X of one of my elements map to user mouse X, and I can make position Y map to user mouse Y, and I can make scale be like a sine function of say, my timeline position and user mouse Y, if that makes sense. So you can start creating these, really easy to write, but really powerful sorts of interactions. And for sure, that sort of creative empowerment is what Flash really, really excelled at, and what the world's missing, right?

Joey Korenman:

Yeah. And what language are you using when you're coding inside of Animator?

Zack Brown:

JavaScript.

Joey Korenman:

Oh, perfect. Okay, so if you're used to After Effects expressions, I'm sure parts of it are identical. And I'm assuming that there's some custom things that you guys have extended into JavaScript to add Animator-specific features?

Zack Brown:

Exactly, yeah.

Joey Korenman:

I'm trying to think of a common use case for this. So for example, if you want a behavior on your website of there's a character, and you want the pupils on the eyes to follow you, like follow the mouse around. You can mock that up in After Effects, and then an engineer's going to have to figure out how to do that. But in Animator, can you actually just build that behavior and then hand that off?

Zack Brown:

Yes, exactly. The rendering engine used inside Animator is open sourced, first of all, and second of all, it's the exact same rendering engine that's used when you run it on the web, the exact same thing. So preview mode is literally preview mode. It's the same thing. And that comes down to the source file being code. When you write an expression, whatever you write will be evaluated in exactly the same way inside Haiku Animator as it will be on the website.

Joey Korenman:

I mean, so that's one of the biggest differences between Animator and other apps like that and After Effects, is that in After Effects you have the luxury of, you can animate whatever you want and it's going to have to render, but the person who's going to see it doesn't have to watch it render. When you're doing it live the way it happens on the web or in an app, it is live. So I'm curious, how do you deal with that, just in general I guess, even as an app developer, how do you deal with the fact that your users might want to animate things that can't actually happen in real time? Is that an issue?

Zack Brown:

Yeah. For sure it is. What you're creating when you create something in Haiku Animator is software. Full stop, what you're creating is software. And you're doing it through a combination of visual tools, and if you want, code. But the end result is software. Now, when you're creating software, one of the inherent concerns that you have to be aware of is performance. And if a developer goes and writes a for loop that locks disk AIO such that a computer freezes, that's something a programmer should figure out during testing and should fix so that there's not a big perf bug in their software. Exactly the same with Haiku Animator. You can go animate 5,000 dots just bouncing, and you'll see it slow down. And as a creator of software, it is your responsibility to make sure it works correctly.

Joey Korenman:

Yeah. That's something you really don't ever have to think about. I mean you have to think about it on the front end when you're building stuff in After Effects, is this going to take too long to render, but once it's rendered, it's done. It's a totally different way of having to think. That's really kind of interesting.

Zack Brown:

Now that said, Lottie does, Bodymovin inherits that same concern because it's interpreted at run time. So if you have 1,000 dots bouncing in After Effects, it'll crawl in Bodymovin as well.

Joey Korenman:

Right. Yeah, that's really, really interesting. Okay. So I'm trying to come up with another example. And one of the things that I remember doing in Flash was, you could have these elaborate rollover states. Like let's say, so we're doing this design refresh right now on School of Motion, and I don't know when this episode will be coming out, but if you're listening to it, it may already be up on the site, or you'll be starting to see it trickle out. But let's say that we were redoing the way our thumbnails look on our site that show our blog posts and tutorials and podcasts, things like that.

Joey Korenman:

So let's say that we want some elaborate rollover state, where you rollover it, and the title of the thing grows a little bit, and then the image itself scales up within the bounds of the thumbnail, and then this gradient overlay, the opacity of it transforms on. And then when you mouse over, something slightly ... when you mouse off, excuse me, something slightly different happens. The way that I was planning on doing this was prototyping it in After Effects, and then just handing it off to the developers, maybe using something like Inspector Spacetime so they have my easing curves and things like that, and then they'd have to implement that. So if I decided to do this in Animator, what would the workflow look like? How would I bring in my artwork, and are the tools there to sort of do that and make that work?

Zack Brown:

Yeah, definitely. Now it's going to require some code to pull off what you described. And our belief is that it should. To really get that unlimited expressiveness that you want out of, well when I mouse over here, this should happen. Again, maybe I'm old school, maybe I'm just a curmudgeon, but from all of my computer science-y understanding and whatnot, I believe code is not going away.

Joey Korenman:

I agree with you.

Zack Brown:

And so the way you might do that in Haiku Animator is you use one timeline. It's very much like Flash. You use one timeline, you have different regions that have the different actions. So frames one to 80 might be your mouse over, and frames 81 to 120 will be your mouse out. We follow a component model with Haiku Animator, so what you create is wrapped up as a component, first class support for React and Angular and View. Hopefully you're using one of those on your-

Joey Korenman:

We're using React, yeah.

Zack Brown:

Okay. We also support vanilla JavaScript if you want to just get down to the metal, as it were. And so you'll get a React component out of Haiku Animator which gives you a reference to the Haiku Animator API where you can, from React land, say on mouse over, on a React mouse over, scrub the timeline from zero to 80, or go to and play frame zero, or go to and play frame 81. So the developer's actually the one pulling the strings at the end of the day, but you set the stage, as it were, using Animator.

Joey Korenman:

That is super cool. All right, so this may get really into the weeds here, listener, so I apologize, but I'm really curious about this, and I really want to understand it. So that makes perfect sense to me, and if anyone listening has used Flash, that's exactly what you would do. You would say on mouse over, go to frame 20 and play until frame 40, on mouse leave or whatever it was. And you basically had all your animations on a timeline and you're playing different frame ranges. Now, my question is, and by the way, I'm going to have my developers listen to this, because they're going to understand it way better than me, and they're going to get a lot of cool ideas.

Joey Korenman:

But now here's the question I have, Zack. So if I develop a component of, this is what a thumbnail looks like and how it you know. And I'm assuming that visual development will happen in something like Sketch. And then we'd bring that into Animator, I would animate the way I want that component to act with mouse over, and maybe on the click something else happens. But then the actual artwork that's displayed in that thumbnail needs to be dynamic, right? So doesn't that still create this issue of like, well the developer's still got to dive into that code and spaghetti monster it apart so they can insert the right thumbnail in the right place, or is there also a better way to do that and make that process easier?

Zack Brown:

Yes. Okay. So learning from Flash, again, I feel a bit like a broken record, but one of the things Flash did wrong was, it was a sort of black box, this dead end, where once you have Flash on, say your website, you're never coming back out. That box of pixels belongs to Flash, and God speed if you want to try to change anything in there. You got to open up the Flash IDE and make some changes and add some logic, and wrangle with their API for passing data through, et cetera, and it was a big mess.

Zack Brown:

In Haiku Animator, we have a notion of a placeholder where when authoring, you can say, here's a rectangle inside of this super rectangle that I'm creating in Haiku Animator. This rectangle belongs to the developer. I have no idea what's going to go in here, but I can animate it. They're called affine transforms, scale, position, rotate, skew, all of those transforms. You can animate that placeholder and then at code time, the developer can pass the content in. So in React, that would look like a child component, or in HTML, it's something inside of a div. That's our solution for dynamic content inside of Haiku Animator, and what it looks like to the end developer is straight up React. There's no somersaulting or anything special. You just pass content in as a child of the Haiku React component.

Joey Korenman:

That is super cool. Okay. So one of the things that I was reading in sort of the documentation and stuff, is that ... because we've done a little bit of this on our website. We have animations that are more or less just baked in. But then we have certain little animations when you hover over something that we kind of prototyped, and things like that. And the problem is then if we decide to change that, it's kind of a big deal to go back in and fix it. It's not like copy, paste, now it's updated. So how do you deal, and I don't know if I'm using this term correctly, but version control, when you have a new version of the mouse over state of our thumbnails? Is there a simpler way to implement it now that you guys have come up with?

Zack Brown:

Yes, in fact. This was one of the core ... again, going back to my agency days, and seeing how difficult it is not only to implement design to code, but then to iterate. That's probably where 80% of the effort is, is iterating. Now you've implemented this design as code, now there's a new design which actually changes the requirements a little bit, and now whatever was architected in code needs to be redone. Now this other piece is broken. All of the problems that spill out of iteration, that's where solving workflow, I guess that's the holy grail for solving workflow.

Zack Brown:

And our take on it with Haiku Animator is again, based on the component model, your components are versioned. So if you create a project in Haiku Animator and you push the publish button, you get version 0.0.1 of that component, and you can drop that into a code base. We integrate with NPM for the world web world, for any developers in the web world to be familiar with that. So you actually just NPM install that Haiku Animator component at version 0.0.1, and you're good to go.

Zack Brown:

Now, the animator, motion designer, or developer, whoever's using Haiku Animator, can go back and make subsequent changes, update the assets from Sketch, for example, which will flush through to Haiku Animator, and publish again, and now you have version 0.0.2. And all you have to do from code is update that component to version 0.0.2 and you're live. That's it. So that's how we solved that iteration problem, is by relying on a combination of version control and package managers. It's all fairly technical, and a nice way to summarize it is, we integrate with dev tools the same way that we integrate with design tools, like Sketch and Photoshop, Illustrator.

Joey Korenman:

So if I'm understanding this right, I mean it works a lot like Flash did, it's just way easier to actually implement and update and use across an entire app and an entire platform. So I'm actually really excited to go play with it again, because this is really, like I said, perfect timing for us. And I'm really excited, I really hope a lot of you listening to this go download the 14 day demo. If you do this kind of work, give this app a try, because it would be really, really cool to see what some really good motion designers can come up with. And I was going to ask you about this, because I've been having more and more conversations like this.

Joey Korenman:

It's almost like these two worlds are starting to merge. You've got motion design and you've got UX. And they're both moving towards each other, and now there's enough overlap where tools like this are starting to become viable. And you seem kind of unique because you came at this from the intersection. You were prototyping and implementing these things for clients. So are you an animator? How did you know what tools to put into Animator? Because I opened it up the first time knowing nothing about it, and there's key frames and there's a graph editor, like an animation curve editor, which is actually really nice to use, and a layer based compositing system, and it all just kind of made sense. So how did you decide what features to put in?

Zack Brown:

So I would say I am an animator by circumstance.

Joey Korenman:

I love that.

Zack Brown:

Certainly not a great one. I did have some experience when I was younger, that F word again, Flash. And so the idea of key frames and timelines, once [inaudible 00:42:03] by my-

Zack Brown:

The idea of keyframes and timelines. You know, once [inaudible 00:42:04] in my young mind have kind of stuck with me into my adult mind. The short answer is users, our users are the experts and you know, it's common wisdom in the products creation world to figure out what your users want and you build it. So, the Curve editor for example, we recently launched that. The product's been around since 2006 and 2019 was when we finally launched the Curve editor after requesting, requesting, requesting by users. Masking is a feature we don't currently support that people have been clamoring for. So, I expect it will be coming before too long.

Zack Brown:

That's how we discover it. The experts tell us and we take it from there.

Joey Korenman:

Right because I mean there's a lot of things that After Effects users specifically do all the time. You know, using one layer as a mask for another, having paths that have a line sort of animate on along the path. Doing things like that were ... Frankly, even the tools in After Effects to do some of those things are very old and could use a little bit of updating, and it's kind of neat to see there's kind of an opportunity here to talk to users and find out exactly what's going to make their lives easier.

Joey Korenman:

So what kind of users are you finding that are actually working with Animator? Is it motion designers, or is it UX designers that need animation?

Zack Brown:

It's both. So again, like like Sketch is more approachable than Photoshop or Illustrator, we've found that there's a whole segment of users who are learning motion design, maybe using a keyframe timeline paradigm for the first time, and they're off to the races with Haiku Animator. As we've been developing the app, we've also been developing documentation like a help center, all sorts of stuff. So we've got tutorials. So we've got good resources for people who are getting started doing motion design for the first time.

Zack Brown:

We're also seeing seasoned motion designers who appreciate the value prop of ship to production. Or the value prop of, "Add a little bit of code." Something you can't do in After Effects. You know, fundamentally it's a unique spot in the market for this solution, and it all goes back to the vacuum of Flash.

Zack Brown:

So yeah, and then the other part to that question is companies of all shapes and sizes from Fortune 5s down to agencies and freelancers, and also we see developers using it as well. Or like front end kind of unicorny ... Unicorns get the most out of it for sure because they have the full range of design features and the full range of code features, but really kind of all stripes are using it.

Joey Korenman:

I was going to ask you because a lot of our listeners and our students, they're motion designers first, and some of them are just starting to dabble in After Effects Expressions. And so I was just curious if you've gotten any sense of what the learning curve is like for animators to start using Animator, Haiku Animator. I'm going to start saying Haiku Animator to make it easier.

Zack Brown:

That's fine, yeah.

Joey Korenman:

Yeah, what the learning curve's like for animators using it. How much code are they going to need to learn? And what should the learning curve expectation be?

Zack Brown:

Okay so I would recommend getting started with Expressions. If you've ever used Excel or Google Sheets, then you've probably used a spreadsheet formula, and you are prepared for Haiku Animator. Like making something follow the mouse is just as easy as taking a sum in Excel, and it's very satisfying when you do it. Very, I guess, it's a trite word, but it's very empowering to see that happen.

Zack Brown:

I would say if you are a motion designer looking to get started with code, this is the perfect tool for you. This is largely why we built it. Again, to bridge that gap between motion design and code. So between the resources we have available and the code editor built into the app, it should be a good way to get started.

Joey Korenman:

That's excellent. So let's talk about sort of the general state of this thing that we call ... I don't even know what it's called. The intersection of UX and motion design. So you know, Animator is solving some pain points that have lingered for years. I remember a very episode of this podcast actually, we had Salih and Brandon from Airbnb who were two of the guys on the team who built  Lottie.

Zack Brown:

Yeah, I love those guys.

Joey Korenman:

Yeah, they're awesome. And you know, they were really instrumental in getting me to understand what these pain points are, and I thought Lottie comes along and is going to solve them all, but every time I talk to someone they're like, "No, they're not solved yet." It's still very painful to take motion design and turn that into code.

Joey Korenman:

And the way animators tackling that seems really really smart, and I definitely think you're onto something, but what are some other things that will have to be addressed to make this process really streamlined and efficient? You know, I mean because it's just the world of coding and the world of motion design, they're pretty separate right now. And even a took like Animator, you know, you still are going to require a developer to implement this, right? Like, you can build a component, but then is that same person going to be able to implement that component? Is that even something we should aim at? So I'm curious what your take is on what are some other things that over the next several years could change to make this process even better?

Zack Brown:

If we're talking the scale of several years, I think a lot of people get caught up on what will designers be doing in x years, or what will developers be doing in x years. Based on this, I think fallacious notion that it's going to mean the same in a few years. That developer means the same thing today that it does in a few years, right?

Zack Brown:

This is why I like to think of ... I mentioned earlier a few minutes ago what you're doing with Haiku Animator's creating software. We don't care if you're a developer. We don't care if you're a designer. You are creating software. That's it. So my take is that in a few years, it doesn't really matter what your title is, but we will all be building software together. And I like to point to where this has already been happening in a parallel industry, in the game industry.

Zack Brown:

Anyone who's used Unity 3D, anyone who's been involved in that ecosystem, you're building games. You're building software. And if you're using Photoshop to create your textures, which will be mapped onto the 3D models inside Unity, you're creating software actually through Photoshop. You can go back and change that texture and it flushes through to the software, and it ships to production.

Zack Brown:

Unity has cracked the workflow problem between actually motion designers ... There's a timeline and keyframe animation system within Unity, texture editors, riggers, 3D modelers, and developers. They're all building the same thing in Unity. And so that's what I think is the future of creating software as it were, and that's our take. That's our playground, that's our world is the world of creating software. Doesn't really matter what your title is or even what your background is, but if we do our job right by unifying workflows, we'll all be building software together.

Joey Korenman:

That's kind of beautiful. I'm a little teary eyed, man. That was really eloquent.

Joey Korenman:

Okay so I was talking to Issara Willenskomer about this from UX in Motion, and currently it's still the wild west in terms of the tools that people use to execute animation in an app. And there's a million different ways to do it, and the model that Animator's using maybe solves that, but is any sort of standardization happening? And again, this isn't my expertise, but from what I understand, Animator is kicking out code that is ... it's essentially like a react component which is, forgive me if I'm mistaken, but it's based on javascript, right? It's some sort of flavor of that, right?

Zack Brown:

Yes, yep.

Joey Korenman:

Okay cool. So then, will that work with ... and so if you're building a website or an app based on that, that's great, but what if you're not? What if you're using ... I wish I had a rolodex of coding languages. What if you're using Ruby or something like that? Does there need to be more standardization I guess is what I'm getting at? Overall, for this problem to go away, is that still a problem?

Zack Brown:

Absolutely, yeah. When we talk about workflows, standardization is where it's at. That's why Unity had succeeded is because they've become a standard. Half of all games, half. Literally one in two games for any platform is built on Unity. In large part because it has achieved being a standard.

Zack Brown:

There are some standards coalescing. Lottie is a great example in the motion design space. And you know, I mentioned some qualms about the technical core of Lottie, namely that it's very, very steep path to making Lottie interactive. Very difficult. Just because of its very core format.

Zack Brown:

What Lottie has done very well is achieve mindshare and become a standard and that's been a huge step forward for motion design as a community, as a world. So Lottie has become a standard. We jumped on that train pretty quickly. Haiku Animator was the very first tool on the market, outside of After Effects, to support Lottie export. So again, in our mission to bring workflows together, we've been keenly aware of that, of that emerging standard.

Zack Brown:

But I mean, we can think of animations as they relate to software in a couple of different ways. One of them is the atomic little box, like a .gif or a video or a Bodymovin animation good for a loading spinner or an element inside of a button that when you click on the button, starts again, like a loading spinner. It starts spinning.

Joey Korenman:

Right.

Zack Brown:

You know, you open the Airbnb app, the home of Lottie. You open the Airbnb app, and you get this nice little dancing, [inaudible 00:52:57] Airbnb logo. Little bit something like ... So that's one manifestation of motion in software. The other one is larger scale like layout animation.

Joey Korenman:

Right.

Zack Brown:

That standardization has not occurred. That is pure wild west. Like beyond wild west. The only way you do that kind of animation is with code, currently, and a lot of that problem space is the fact that implementing a layout animation in web is very different than doing it for iOS. It's very different than doing it for Android. It's very different than doing it for Samsung smart TV. So it's a big, ugly, challenging problem.

Zack Brown:

Without giving away too much, the Haiku team is working on something in this space. But I think it's worth identifying that distinction between those two kinds of motion in software.

Joey Korenman:

Right. And let me ask you this because this actually just came up this morning, and I think there's still a lot of confusion about what Lottie is. I think on the dev side, it's a lot more understood than on the motion design side. Someone in our Slack channel this morning said, "Oh look, Airbnb makes an animation app." And I was like no, that's not what it is.

Joey Korenman:

So from what I understand, Lottie essentially translates what Bodymovin and also what animator. You know, the code that it spits out, it translates that into iOS or Android. Those languages. So it sounds like what really needs to happen to make it universal and easy is that there needs to be I guess kind of a universal translator, you know, and is that something that you think a company like Haiku should be taking on, or is that going to require a much more universal effort from Apple and Google and Samsung to create a way for there to a universal format?

Zack Brown:

So first of all, again, we're working on something that is top secret, shrouded in mystery, right now, but we'll be announcing it soon. That is making a play at cross platform standardization.

Joey Korenman:

Right.

Zack Brown:

You know, personally as a scrappy startup dude, I don't think this needs to come out of Google, but certainly it must be adopted by Google at some point to be a standard.

Zack Brown:

Then again, a success scenario, as I see it, is 50% market share. That's fine. That's what Unity did. They're not hurting. You're never going to please everyone. Especially in a technical discipline ... [inaudible 00:55:47] was in the crash product of technical disciplines of coders of various languages and designers using various design tools, and motion designers of various stripes. You multiply all those different combinations, you're never going to please everyone with one standard or one tool, and that's totally fine. But, something that can resonate and solve the problem, like the baseline problems of enough people, to start to become a standard in the way that Unity is, I think that's totally possible.

Zack Brown:

And I don't think that needs to come out of one of those big companies. You know, biased, but personal take on it.

Joey Korenman:

Yeah. Very cool. Yeah, I'm excited for you to unveil and get on stage in a black turtleneck and show everybody what that feature is.

Joey Korenman:

So I've got a couple more questions for you, and you live in San Francisco, you're in the tech bubble. You did the YC thing and all of that.

Zack Brown:

For sure.

Joey Korenman:

And so I'm imagining that you're in contact with a lot of tech companies. I'm sure you know people at the big, what's the acronym people use now? FAANG.

Zack Brown:

FAANG, yeah.

Joey Korenman:

... with two As, yeah, yeah. You know, Facebook, Apple ...

Zack Brown:

Amazon.

Joey Korenman:

Actually no wait, it's Facebook, Apple, yeah Amazon right, then Netflix and Google.

Zack Brown:

I think Microsoft belongs up there too, but it's actually that Silicon Valley is [inaudible 00:57:00].

Joey Korenman:

Right. It's like the cool kids excluding the ... But anyway, so you know, and your users are both motion designers and UX designers and everything in between. So I'm curious just from your perspective, what's the job prospects look like out on the west coast for the animator who knows a little code or the coder who knows a little animation? From where I sit in Florida, it looks like it's booming, but I'm not there, and I'm curious what you're seeing on the ground.

Zack Brown:

For sure, I'm seeing a boom as well. The idea of UX as a differentiator has really ... it's in full mainstream adoption at this point that crossing the chasm curve, if you know the one. Anyways, it's ... everyone and their mother and grandfather is aware that differentiating on UX makes a great difference to a company's prospects of success. And motion has been established as a key part of that.

Zack Brown:

And back to Lottie and the like, making that accessible ... making it really easy to drop a delightful animation into your app, it's a big deal. So yeah, motion designers who ... Motion designers for code, motion designers for code bases, motion designers for software. For sure, we see that booming over here.

Joey Korenman:

That's awesome. Well, why don't we end with this? Animator is already a very very cool app and really really powerful, and again we're going to link to it. I suggest everybody go play with it. Whether or not you do this kind of work now, there's a good chance you will in the future because I think Zack's right, everybody and their mother wants animation on their website now and in their app.

Joey Korenman:

If you compare Animator to After Effects, which I think is 25 or 26 years old, obviously there's a lot of features that Animator doesn't have yet, and there's no 3D camera or anything like that at this point.

Zack Brown:

No camera.

Joey Korenman:

What's your vision for the future of the app and frankly of the company too?

Zack Brown:

Our almost silly ambitious ... You know, we got to shoot for the stars. Part of that is being Silicon Valley and VC backed. Part of that is just blind ambition as it were. Personal, like on an existential level, but I see an opportunity to unify design and code. Right? Everyone on our team does. To unify those workflows to, for example, achieve that market share that Unity has.

Zack Brown:

So our company mission is "To revolutionize software creation by unifying design and code". That's the big shoot for the starts mission, and the way we went to market with our first product was filling that void that Flash left of motion design that ships to production. And that covers that first use case of motion in software that I mentioned. Those atomic kind of animations. And Animator lets you go beyond that with things like placeholders and the code API.

Zack Brown:

But there's more to the problem, and we see interesting trends emerging like design systems whose stated purpose is to systematize design in the same way that code is. Ideas like version control, ideas like components, and that's really starting to capture mindshare. Especially in the enterprise where the needs of grand consistency have led to millions and millions and millions of dollars being poured into creating design systems. So that might be one part of the puzzle. That's something we're keeping an eye on.

Zack Brown:

What design systems are ignoring is that exact same handoff from design to code. Now you can create a design system in your design tool, and you have this wonderful abstract notion of, "Here's my typography," and, "Here are my colors." But you still have to go then implement that by hand in code. It inherited the same ... that space inherited the same problem that the traditional design handoff did. So that's a problem we're keeping a keen eye on.

Zack Brown:

Yeah, does that answer your question?

Joey Korenman:

Yeah, I think unify, design, and code. It's a fairly ambitious task, but I don't know. Just from the few interactions I've had with you, Zack, I think you and the team are up to it. And I really look forward to seeing where this goes.

Zack Brown:

Thank you, Joey. Thanks so much for having me on today.

Joey Korenman:

Check out Animator at Haiku.ai. I really want to thank Zack for coming on and being so well-spoken about the challenges that animators and developers are facing when it comes to implementing animation in app. Animator is still fairly new, but it's already a pretty nice app to use, and I think that it has a real shot at changing the way we animate things that will end up being interactive on a website or a mobile app or anything else.

Joey Korenman:

Make sure you're subscribed to this podcast so you can stay up to date on industry news and new tools like Animator. And if you want even more knowledge, head to SchoolofMotion.com to grab a free account and to receive our Motion Mondays newsletter. It's a short email that you can read over your extra large regular Dunkin' Donuts coffee, and it'll keep you in the know with anything you should be aware of in motion design.

Joey Korenman:

And that is it for this episode. I really hope you dug it, and peace.

‍

‍

‍