Matt: You couldn't hand off a lot of the animations that people are making to a developer, because it would, it would take like months and months of engineering work to make some of these animations.
Matt: Or you can just use frame of motion with the layout prop and and you can recreate these things
[00:00:17] Introduction
Andrew: Hello, welcome to DevTools. FM. This is a podcast about developer tools and the people who make them. I'm Andrew. And this is my co host, Justin.
Justin: Hey everyone. Uh, we're really excited to have Matt Perry on with us. Uh, Matt, you're the creator of Pop Motion and Framer Motion, uh, very critically important animation libraries, especially in the Rack scene. and you've got some news about, uh, Framer Motion, now Motion and its, its new direction. So we're incredibly excited to talk to you about that.
Justin: But before we dive in, could you tell our listeners a little bit more about yourself?
Matt: Yeah, so that's basically the long and short of it. I've written way too many animation libraries at this point, um, and the latest one, the final one, is just called Motion and it's a direct continuation of both, basically of all my previous work, Frame Motion, Motion 1. It's all bundled into this one animation library now.
[00:01:11] The Evolution of Animation Libraries
Andrew: So let's roll it back way to the beginning. Cause this story starts years and years ago. so let's just start with animation in general. What drew you into wanting to make animation libraries and where were like the tools at the time falling short.
Matt: Yeah, so it was, um, originally I was a designer and I moved more into. Development, like a kind of by accident, I suppose, like really letting go of the design side was it just sort of happened, I guess. Um, and part of that was like, especially in the early days, like as you probably know, some of the, I'm sure there younger listeners, um, who might not even remember these times, but like flash was the big thing.
Matt: the browser plugin. And um, they really, at the time, it was the only way that you could actually achieve animations. And there were certainly certain things. That weren't possible for a long time, like blur effects and things like that. And really playing with the timeline editor and green sock, uh, in the, in the code editor between those two things, like I just really fell in love with.
Matt: With making those things. And, and I also felt like had a lot of. Like, I don't know. I just really always wanted to push things to that next level. Like I always, you know, when you grow up and you're watching films and you see the way your eyes are in films, obviously I don't need them to be like too ridiculous, but they always seemed like they would like here and we were operating a bit down here.
Matt: So even no matter what I was making, I always tried to throw in like a little sprinkle of something. Just to make it that little bit more engaging or polished it necessary. It wasn't always like these days, I'd say like to make your animations educational, like to help the user understand the transition between States, whereas back then, really, I was only interested in making things feel like if you ever play a video game and it's really taking the time like persona or something like that, where the menu, the menus are just so slick that someone's cared a lot about that.
Matt: Um, That's sort of my, that's, that's how I like, you can, and you can tell games where they haven't done that. Um, and so that's sort of my, my, my feeling about it. It doesn't have to just be educational. It can also convey the feeling that someone's given a fuck about this interface. Like someone's really spent the time, uh, to make it pop.
[00:03:28] Challenges and Innovations in Animation
Justin: Transitioning from Make It Pop into how Pop Motion came about. Actually, was Pop Motion your first animation library, or did you have an attempt before that?
Matt: No, it wasn't the first time. Anyway, it had, I started with the name Redshift, um, which for obvious reasons, perhaps to anyone who's, uh, put their head into the world of AWS, um, it wasn't the greatest name and. So, and it wasn't very Google able. And, and yeah, so it was, it was the same library, so I renamed it PopMotion.
Matt: And, that really was my attempt to make a library where anything is possible. Like, I wanted it to be really, Low level and it's a detriment, I think, ultimately, like the people who loved it, loved it because they were the ones that like, almost like the power users were attracted to it. but it didn't really gain any traction.
Matt: And I think a lot of that was to do with its inherent unpleasantness in terms of like, needing to understand sort of functional programming paradigms or, um, the kind of boilerplate that comes with like hooking up your own render function every time. Um, and over the years, some of this got simplified out, but ultimately never really to the degree that then we saw with, um, pose and which led directly into frame of motion, which are the kind of crystallization.
Matt: It's like I've almost been scorched by doing something that was so low level level that I wanted to then create something that was that made things accessible like it's, it's not good enough for things to be possible. Yeah. It has to be cheap in terms of time for people to do it. Otherwise, it's not going to get done.
Andrew: And in terms of animation libraries, it's very easy for the API. Just kind of like. Be too much for a user. Like even like I I've grown accustomed to frame or motion when I first initially tried to start using it, it was like so many new concepts. So if like, you're at a lower level, I can imagine it being even harder.
Matt: Yeah. And that always surprises me. It's like, and it's like, and I'd love to take another run at this. Cause like, it is a lot of concepts and the problem with frame of motion or motion now, um, especially motion for react, I mean motion for it. So now there's a vanilla side and a, and a react side. And the problem with the react side, I would say is that there are these concepts.
Matt: But the, the problem, I guess, with writing a simple API is that then you'd like, you always reach your limit of what it can, if it's possibilities, then you want to introduce something where, okay, well, if you do it like this, then you unlock all these features. If you do it like this and you unlock all these other features.
Matt: So there's a couple of like steps like that, I think, with frame in motion, um, where it's actually get a lot out of it. You only need a few props. So, you know, initial anime. Well, while hover things like that, while in view is, it's probably my favorite cause it's like the superpower that I wish all elements had.
Matt: And, um, that's really all you need, I'd say to make most things. But then, you know, if you want to do get into like complex orchestration, you talk about timelines or variants. If you then get into, you can do all sorts of things with motion values, which is like a power user, um, feature, but like, how do you introduce that in a way that doesn't make people feel like.
Matt: They have to know it or that they're scared of it. Like it doesn't matter. You don't need, no one, you don't, no one needs motion values. Like 5 percent of the people need motion values. And those 5%, the stuff they do with it is, is incredible. so yeah, I, I haven't figured out the messaging and that's something I'd like to take a run at again, now that the docs are mine and it's, it's, it's more in my, uh, taking it motion independent, um, it's now more, um, My interests are aligned with making this as easy to use as possible.
Matt: Well, let's talk about that a little bit.
[00:07:03] The Birth of Framer Motion
Justin: So, you had created Pop Motion, what, it was like over six years ago?
Matt: it's around that, yeah. I think it came out a little less, but I definitely joined Framer six years ago, and I made Pose not long before that, and it kind of carried straight through.
Justin: Gotcha. yeah. So you had, you'd made, uh, PopMotion or at least started it, and then you joined Framer. Uh, and maybe it's worth, like, talking a little bit about, like, what Framer the company is and what they do. Um, yeah, well, let's, let's just start there. So what, what is Framer, uh, for those people who might not have heard it?
Matt: Okay, what is Framer? Framer is easily, and I say this from a completely unbiased perspective, Um, but I can say it, uh, with this sort of conviction, uh, this sort of conviction of the type of person who is, who's leaving in three days time. Um, I say it's not like, uh, I'm not self aggrandizing by saying this.
Matt: Uh, no, it, it, it's for my money, the best no codes website builder, um, that exists because it, it, it acts like a design tool. It acts like Figma. And that's the language that I speak. You know, I grew up using Photoshop. Illustrator in design. So these are all concepts I'm quite familiar with. I understand why Webflow would be familiar, like more of an easy process for certain, maybe a bit more technical minded people.
Matt: But I think the freeform canvas of Framer really gels with people. I think a lot of the confusion that maybe about what Framer is, is that when I joined, It was a prototyping tool, um, still with the same free form canvas, but, um, it was more about making designs that you could play with and you could give to a shareholder and say, this is what it's really going to feel like.
Matt: And then when I came and made Frame a Motion, it really was what it was going to feel like, because it was using the real stuff that, um, you could make the, uh, the website in. But the problem with prototyping, This is probably going too deep, but it's, it's, it's kind of interesting. This is, this is essentially, you know, how we ended up as a site builder, apart from having all the raw ingredients, but you know, the addressable market for prototyping.
Matt: It's kind of like a very specific niche. And I think the people, a bit like the pop motion API that I was telling you about the people who love it, love it. Like they want a prototype. Um, and they say it's a key part of their workflow, but if you imagine the pipeline of, um, design. Uh, all the way to production, the one bit that you can ease it, the first bit that's going to go in like an economic downturn, or, or even people that might just skip this step entirely is prototyping.
Matt: Like it's a, it's a nice to have, but it's, it's not really. Um, the thing that's going to, you're not going to build a big business off it. Um, and, but by making an amazing prototyping tool, inadvertently they'd made a amazing website builder tool. And it, the step, it wasn't even a pivot. I'd say it was only a natural continuation of the tools capabilities, but naturally because it, because it, partly because it was so successful.
Matt: Now, um, that's sort of the, the prototyping stuff has just sort of fallen, uh, away. And I think that's been quite a natural process from my point of view. but I understand why people still have this confusion, like, Oh, it's a prototyping tool, but it is a site stuff or was it a Figma competitor or what was this?
Matt: It's a website building tool and it's very, I use it. I use it for motion. dev. Um, I'm a big fan probably. And I call myself a super fan at this point, whereas, uh, for the first few years. There was almost a meme within the company that, like Matt doesn't know what Framer is, he doesn't know how to use it.
Andrew: 'cause I was so concentrated on frame of motion, whereas now I think I, I know it better than a lot of people at Framer. Like I use it a lot and I, I'm a big, big fan, So when it was a prototyping tool were like the animations built in a way that just like wouldn't work on normal websites. And that's kind of where your libraries came in and made it production ready from the animation point of view.
Matt: yeah. So they had a, the problem, so what they had, uh, before I joined, um, they had like a, it was like a, it was almost like a code sandbox environment where you had a coffee script, API, um, and you worked directly with the dom. So they could consider it quite technical. So as they moved into like a more of a GUI situation, they also ported it to React and with that, they didn't really have like an easy to use API and the animations weren't in the UI at that point.
Matt: So when I joined, like the, the idea was to make, um, an animation library that was simple enough that you can just say, like a designer wouldn't understand, like the animate prop. That was the cornerstone really. Okay. Um of the whole API at the time and like to make it draggable you type drag like these sorts of concepts It was just meant to be like absolutely like no argument simple.
Matt: whether or not we succeeded I don't know but um the the that was the that was the goal and then um the two production story It was just kind of nice. It was just great that it came out of it. Like, especially when we made layout animations and magic motion, like the, you couldn't hand off a lot of the design, uh, the animations that people are making to a developer, because it would, it would take like months and months of engineering work, um, literally to make some of these animations.
Matt: And, um, You, and you sprinkled all that throughout your app, uh, and, or you can just use frame of motion with the layout prop and, uh, and you can recreate these things, um, straight in. And now of course, frame has like the UI around all of the animations and stuff. So even their focus on, on the API itself is, is sort of disappeared, which made it a natural and it made it a natural situation given that frame is getting really successful.
Matt: They're a big user of it. Yeah. But likewise motion is so not bigger in terms of like, use it. Well, I mean, I might be, I don't, I literally don't know numbers, but like, um, it's bigger in terms of like it exists within Framer, but it also serves like a certain, uh, percentage of the web, um, and to really serve everyone.
Matt: Uh, that's why it sort of made mutual sense for, for, um, uh, myself and Framer to part ways. Obviously they're the big sponsor of motion and we, I still work with them, uh, closely. But, uh, but yeah, I think that was, uh, that's how that also, how the exit came about, the enter and the exit. I think I've gone full circle there.
[00:13:21] Ad
Andrew: We'd like to stop and thank our sponsor for the week. Mux.
Andrew: If you've ever tried to integrate video into your product, you know that it's no easy feat. And if you're building something complex that needs uploads, hosting and playback. It gets even harder. So that's where max comes in. Mucks is an all-in-one platform for helping you get video into your product and make it not a hassle at all. This week, I actually used monks. They have that open source project called player.style. It's a very easy to drop in component that will help you render a video player like with a bunch of different themes. They have Halloween themes. They have YouTube themes, Vimeo themes. You can make your video player look however you want, and not really even have to do anything at all.
Andrew: All I had to do was install a react package, wrap it around the. Video element and I'm off to the races. I didn't even use max's platform. That's how good of a tool it is. But if you want to discover how good of a tool mux is for the entire video pipeline. I highly suggest you go over to mucks.com to check them out. And with that, let's get back to the episode.
Andrew: So, uh, let's like kind of dig more into the library itself now.
[00:14:30] Technical Insights into Animation Performance
Andrew: So, uh, I think many people try to add animations to their apps and there's like so many pits of failure in there. The biggest one being that some, uh, properties are GPU accelerated. Some aren't like most developers don't even know that, which is, which is kind of mind boggling for web developers, but how does frame or motion, uh, enable you to do things that those APIs don't, because a lot of those APIs, you can get pretty nice animations out of them, but I feel like you eventually hit a wall.
Matt: Yeah, so the thing, so the first thing I'd say is that Frame of Motion is like the only animation library that I'm aware of that has like a hybrid engine where, um, if an anim, if a property can be animated via the GPU, it will be, like we use WAPI for that one. So it always tries to do the most performant thing possible.
Matt: Same with, uh, scroll timeline. If the, the options you've given it are possible to run on scroll timeline, then it will do. and that will, that's for both, WAPI animations. JavaScript animations, but also if you provide it a function, it will run on scroll timeline and not be polling the scroll position.
Matt: And because the polling scroll position is like a read, a dumb read. Again, something that you're right, like people shouldn't have to care about that, but if you use it, it's got timeline. And so it's not always there, but basically it kicks in anytime it can optimize these things. It will. And anytime that the users requested capabilities beyond.
Matt: What the, it would de optimize down to the JavaScript engine, essentially. Um, and one thing that, uh, I've sort of been toying with, I don't know if I'll do it, but it'd be nice to have like a strict mode of some sort, like we have a strict mode, I've forgotten, um, but it's for a different context, but a strict mode where it's like, if this isn't going to run on the GPU, don't do it.
Matt: Like, you could, you could imagine starting doing things like that, and that would be relatively simple. If that's something people want, like, tell me, because like, that would be relatively simple to set up, um, the way it all is at the moment. Um, so yeah, I, I feel like that might have answered your question.
Andrew: Yeah, I was reading through the docs and like, it does point that out a few times, like when you're animating a box shadow, it's like, Oh, maybe you want to use a filter instead. Uh, what jumped out to me is like, there needs to be an ESLint rule right here. Uh, currently at my company, I wrote one internally that, uh, if you use any of those 28 things that like trigger a reflow, you'll get some yellow squigglies under it.
Andrew: That'd be very cool to see from a framer or from
Andrew: motion.
Matt: yeah, yeah, thanks, No, that's not, I, I really love that idea, because, I mean, it could happen at runtime. It could happen as a ESLint. I, I'm, I really delved into writing my own ESLint rules, but, um, that might be interesting as well. Um, it's funny because like, it's, it's hard to go. So this is, this is my problem with going, um, hard and fast on rules.
Matt: So like layout, obviously never animate layout. Actually layout, it's not always that expensive. So for instance, if you've got like a box that's isolated from the rest of the page with an isolation rule on CSS, isolation rule, so now that many children, you can animate width and height. It's probably fine.
Matt: Like on most of it, you know, the 99 percent of users aren't going to notice this. Um, if you're animating the width and height of a whole page that has like multiple nested, um, flex boxes and grids, obviously it's, it's a bad idea. Um, same with, same with certain properties, like. For instance, the, one of the reasons why animating box shadows not good is because it triggers paint, whereas you can animate filter and it runs completely hardware accelerated, which is amazing.
Matt: Um, but this situation is where like. This is very specific, but, um, I've been trying to figure out how to like do automatic will change in a way that like works, like that works. Um, I, I, I, you know, I haven't, I had to take it out in the end because, um, sometimes, especially when you've got designs for like frame a bit, this happens to developers as well.
Matt: Um, if you like got a huge layer, that's just massive. you don't want to be reading the size of every layer and saying, ah, this one's too big. So, um, If you apply wheel change to that and it becomes a GPU layer and you're on an iPhone, the browser will crash. But say you're animating transform, I put in this heuristic where it actually turned out I did know the size of this element.
Matt: So I put in a heuristic that was basically like, if it's bigger, if the surface area of this is bigger than arbitrary threshold, then use the JavaScript animations instead, and Don't apply will change, don't animate it on WAPI, do it just with via style. And what we're doing is, is changing the translate X of this, of this, um, element, this huge element.
Matt: Um, and I thought, job done. And I, I tested it and the frame rate was, was, well, obviously worse because now we're painting the element as a change, but that wasn't what was causing the slowdown at all, like if you look into it, the style recalculations that this is trick you're in. With the cause of the slowdown, like 95 percent of the time of these starry calculations, but I still haven't really got to the bottom of why changing the style of a style attribute could have this cascading effect.
Matt: Um, especially when there wasn't any rules like star, you know, CSS, like style equals this, which could obviously be very dangerous. Um, so I haven't really figured out what it was, but then I discovered that if you animate a CSS, um, uh, CSS variable, uh, using WAPI. And you register it via, um, CSS register property, which is an upcoming API.
Matt: And you say isolate true, um, then no other style recalculations get triggered. Uh, so what we've done there is purposefully de optimize an animation off of the GPU, and then kind of purposely opted it in. So, so we're opting it into paint now. Um, but the, but by then booting it back up onto WAPI via CSS variable, we're cutting out the style recalculations.
Matt: And there's all these little tricks that, that, that wouldn't be the advisable thing to do most of the time. I actually think most of the time, if you're going to animate it like that, animate, just to translate X by the style attribute. Like I think if you weren't hitting those style recalculations, it would be faster, um, in most situations.
Matt: But in this situation, it was, it was faster to do it the other way. Um, because you can still add in other situations that will change animate by JavaScript. Anyway, that's a really long example of saying it's so hard to like broad paying with such broad, uh, broad. Paint with such broad brushstrokes, um, like these, these rules basically.
Matt: So I worry, I always worry basically about doing linting or so there's always best practices, but I've gotten into so many situations where someone's like, it's, it's, this is the best way to do it. And you're basically wrong for not doing it like this. And I'm like, well, possibly, but the time when it's not wrong, it's the time when it's going to crash the browser or it's like, so you get into these conversations.
Matt: Um, and yeah, so, so, so, yeah, so it may be a blint rule, but it would be an advisory. It'd be a warning, not an error.
Andrew: Yeah, definitely. Errors say a lot more than a warning does. You gotta have really good documentation on those warnings, though.
Matt: Yeah, yeah, yeah.
Justin: I think this speaks to, like, why libraries like this are so important, because, you know, we're talking about, like, a lot of really complex properties that, you know, you just kind of have to know, it's like, oh, this property performs this way, this property performs this way, and you've, you're giving this nice API to sort of, like, basically compile down to, or run, you know, these properties in this way, and, um, You know, before libraries like motion, uh, we, and I guess after flash, we really didn't have anything.
Justin: We were kind of like in this like dead zone of like, it's just really hard to do animations permanently. Um, so
Justin: at least it's nice to see the browsers improve.
Matt: yeah, 100%, yeah, like intersectional observers is like a massive one. Um, in terms of like triggering, scroll triggering animation, how about having to, uh, uh, poll the scroll, um, every frame. or set up an event or something.
Matt: And then you have like CSS properties, like, uh, transform, for example, which would, um, you, and you should never have to know anything about this. So it's, it's funny when you run into these things, in every browser, it used to be that if you animated like a transform X a hundred pixels, that would be accelerated, but if you animated a hundred percent, That wouldn't be accelerated because that relied on knowledge of the size of the, Of the element.
Matt: And that was actually one of the ways I was trying to get with this previous example, I was trying to get it like off the GPU, but still use WAPI. and I was trying to do things like, you know, a calc. It was like a no up calc, wrap a hundred pixels in a no up calc, just to see if the calc like triggered the de optimization or something, couldn't really find anything, but that's Chrome these days.
Matt: Like maybe it's, it's pretty, um, broad support in that sense. But, um, on Safari, they. Uh, WAPI is driven by, or hardware, sorry, hardware animations, um, accelerated animations are driven by, uh, core animation, I believe is, is what it's called. It's like the, the OS level, animation API or, or something. But there's a bunch of things that, the spec supports, like, uh, playback rate, that core animation doesn't let you change the playback rate.
Matt: So if you then take an animation, um, and change its playback rate to like 1. 0000001, so essentially 1, but very slightly different, that will de optimize the animation off of hardware accelerations in Safari. And I used that sort of thing when I was running, when I was developing Motion 1, I ran into all these bugs.
Matt: Um, and that was kind of meant to be like the JQuery of, of WAPI in a sense. Um, so I'd, I'd have an option like you can, you know, allow WebKit acceleration Safari or allow WebKit acceleration default false because there's so many bugs that I was running into. Luckily, most of those gone away now, and they would have this little snippet that was like playback rate equals 1.
Matt: 0, but you do these things you'd never notice or run into them. I think a lot of, I think a lot of performance worries are kind of once I overblown, I just. I think that definitely you need to, you need to profile and you need to test on different devices. I think that always
Matt: comes down to that.
Andrew: Cool.
[00:24:48] Exploring Motion One and Future Directions
Andrew: So you've mentioned it a few times now, uh, but you had this third project that came out, uh, I think a year or two ago when, uh, the web animation API started to gain traction, what you've been calling WAPI. Uh, so when I saw that come out, I was like, Oh, we, we, there is no more frame or motion anymore.
Andrew: We can just use the browser, but that didn't seem to quite be the case. So what, what was the goal with motion one?
Matt: Yeah, Motion1 was like an experiment essentially. So both of the times I've ended up writing these animation libraries, I wanted to write a book. So it started with PopMotion. I was trying to write a book about UI animation and I ended up just writing the library. Likewise with Motion1, I think I wanted to write about browser APIs and stuff.
Matt: And I was kind of poking my head into, I'd kind of written them off because I, I seem to remember feeling like WAPI had all these hard edges and rough sides to it, so I never really poked my head into it much. And then at one point I was like, it would be cool to be able to hit like far off these harder accelerated animations from, um, but then I'd be like, ah, but it doesn't support springs, so what's the point?
Matt: And I'd sort of lead myself into that mental space. So I started checking it out, And I started by calling it like motion concept C. And that was like my third. So I had the imperative JavaScript library, the declarative pose and frame emotion, and this is like my new concept where it was like a hybrid, like not even a hybrid at the time when I first started, it was just like, how much can, how much can we get out of WAPI for the minimum amount of file size?
Matt: So things like just even simple things like default value. So if I say width colon 200. That should animate 200 pixels because everyone knows that the default value of width is 200 pixels, lightest pixels. Um, it's not, there isn't a default unit value. So you have to say to WAPI 200 pixel string, it just feels, I need little things like that really bug me.
Matt: The fact that you can't interrupt an animation and the fact that you, if you can't, you can't really stop on nicely. So you've got to wrap all these things. It doesn't accept easing functions. Um, So now it dynamically generates a linear CSS easing functions on the fly. Same as spring. Uh, if, if it's support, if the browser supports it, we use the linear easing.
Matt: and if it doesn't, it will pre generate key frames. so it does a bunch of stuff on the hood. And now we're at a point where, so, so that was motion one. It was a side project. And at the time I was kind of like working 16 hours a day. I didn't have a kid to that point. So, um, it was the sort of thing that you could do, but I went, I'd go home and I'd work on this side project.
Matt: And at one point I got really blazed and drank a lot of whiskey. And I just realized I'm kind of wasting my time. Like I should be having more fun. Like I was until recently, like in my free time, like work should be work. And, and so from then on, I, I didn't really touch it for a, for a while. Um, but over time, because obviously frame emotion was my day job, a lot of these innovations would creep their way into frame emotion.
Matt: So you ended up with the hybrid engine where you kept the JavaScript engine, but just for a couple of kilobytes, you also had this fast path when you could get it. Um, now it's got like a mini version of, of, um, the animate function, which is just like two and a half kilobytes. Um, the in view and all the scroll animations that all came out of motion one.
Matt: And then they got improved in frame emotion, but never really made it back to motion one. So that's why motion now I'm re sort of launching the JavaScript API, the vanilla API. And it's now got all of those innovations that made it to frame emotion, but never made it to motion one. Um, but yeah, that's, that's basically what it was.
Matt: It was an experiment that, that. went too far and, uh, I, I really enjoyed making it, but I just don't think it was a healthy, like, I'm not getting any younger. I don't, I don't need to do that.
Justin: It'll be interesting to dig into in our next topic. Cause it does sound like you're going to go hard mode here, but before that, um, taking a library like frame of motion, which is like mostly react centric and you talked about doing a lot of more sort of vanilla stuff and motion one, and then. You know, rolling this all up together to release a library that will be not just react centric, have a good first class react experience, but like be more general usable.
Justin: That's a really hard design problem because like how you think about animations and react is very different than how you think about animations and a lot of other, uh, frameworks and stuff. So how are you, like, what, what challenges have you faced? And, um, like how are you making these paradigms work together?
Matt: I, um, luckily, uh, I, I don't want to say, I essentially, um, it almost sounds Machiavellian. I, I didn't plan for this in the sense that I knew this was going to happen, but I wrote everything with the consideration that at some point this might be broken out into internals.
[00:29:50] Abstracting React from Frame of Motion
Matt: Um, so everything in frame of motion was already, everything in frame of motion was kind of already, uh, not, it wasn't tied to, it was abstracted from react as far as possible. So most things, not everything, not enough, but a lot of things have like, are encapsulated away from react. I think it'd be easy because like, and it's happened like naturally a bit because.
Matt: When I, um, launched Frame in Motion 3D for React 3 Fiber, that required certain abstractions. Likewise, the fact that you can, lazy load all of the animation functionality, that required certain abstractions. And likewise, the history, um, of it incorporating PopMotion originally as an external dependency, but then later with Motion1 as an external dependency, and having all of that folded back in at some point, it, the architecture just lended itself.
Matt: Um, so when I wanted to do certain things, like, um, release certain things as a, as a framework agnostic API, It was really about exposing them in a way that, and actually most of the hard bit was just making sure that react wasn't included in the final bundle. Like that was actually like, and it will always be types.
Matt: Like I've imported a type that important to type from, from reacting. Um, I'm, I'm still like in the process of unpicking all that a little bit. And I haven't really got, I've been. independent now for, for six working days. so I should give myself a break, but I still feel a bit bad that I've gone so hard on the business side of things.
Matt: and I haven't really taken, I was excited about was like getting to the library and doing, um, doing all of that. Uh, and so I, there's certain things that I need to tidy up essentially, and I make sure that the dumb stuff lives over here, the react stuff lives in here, and I'll never, you know, and they're, they're all ordered in the right way and encapsulated.
Matt: Like motion one used to be really good at this. Like it was everything had its same package. Um, I don't wanna go too far into that again, but at least separate the dumb stuff off script stuff, um, and react stuff. Like have the renderers split to some sensible level. Um, yeah. And I want to do it in a way that can, you can like just install motion and then everything beyond that.
Matt: So, oh, like if you, if you want uh, frame, frame, uh, motion for react, um, then you just is motion slash react. Uh, and I, when I start mixing, um, frameworks, that's going to be an interesting problem to solve. but I just like the aesthetics of it, which sounds shallow, but I actually think it changes, like, even the motion, like, you don't want a scoped package.
Matt: That I just, I really feel like that's, maybe that's just a bias, but I feel like the aesthetics of importing from a scope package and things like that, they don't sit right with me. So I'm going to put an inordinate amount of work into making sure that you can just import everything from us from a
Matt: sub
Matt: entry point.
Andrew: That's going to be quite the challenge when it comes to types. I was thinking when you were talking like, Oh yeah, you just have two packages, but like optional peer dependencies for all the different frameworks. The move, that's going to be, it's gonna be a rough one.
Matt: Yeah. And it might be even impossible. I don't know yet, but, um, but that's the sort of thing that I'll at least give it a shot because I really, uh, value it and want that in my own
Matt: usage day to day
Matt: you know?
Andrew: Yeah. You've done a good job with the API. I was flipping through the docs today and the vanilla version. And I was like, Oh, this looks just like I would expect it to. A lot of the times when I see a vanilla API for some JavaScript library, I use The vanilla API is like. daunting, but this was like nice and approachable.
Matt: Oh, thanks. Yeah. And, and it's nice that, so I haven't moved the certain things that I want to bring into the vanilla that will probably make it feel a little more daunting, like motion values. There's no reason why they'd live in react land. Um, likewise, a few things like gesture handlers. It's nice that there's only a few exports.
Matt: I think that's also what makes it feel approachable. But, um, like for instance, I want to write this, this would be a quick one, but, um, we've got the hover gesture, which sounds like easy, like mouse, surely it's just a mouse over, but it does certain like, uh, point of filtering and a few other things. And, um, there's a certain pattern I want all of these things to adhere to.
Matt: And it'd be nice to rewrite like just that one and have that as a, like a hover. So the, the, the menu will fill out, um, and it will look a bit more robust, but hopefully, hopefully the functions themselves feel, will always feel simple and intuitive to, to use. Um, that's what I'm going for at least. Yeah. And then I get to dog food it in the react version.
Matt: That's the other nice thing. When I rewrite these things, um, I give it to the JavaScript, Uh, API, but before that gets published, I've, I'm going to rewrite how it's implemented and react using this API. Um, and if I hit any, you know, uh, boundaries or something, then that gives me a chance to make sure they're fixed essentially.
Matt: Nice.
[00:34:40] Transitioning to Independent Development
Justin: Let's, let's transition a little bit and talk about your departure from Framer. So, you were gainfully employed at Framer for six ish years, uh, working mostly on what was Framer Motion, what, what is now, uh, Motion. And I, I always find these, uh, These sort of like independent movements, really interesting. Uh, the indie hacker folks, uh, were purchased by Stripe and then rolled out of Stripe again recently. And I always like find the, like, how the, like, Ergonomics of this work. Uh, so, so what was the, the conversation like of like taking Framer independent and, and now that you're building a business on it, how do you think about like the differences of how you're working while you're at Framer versus like how you're working going forward?
Matt: So I think, yeah, so yeah, I suppose there's a few like, so over the years it had come up, I always wanted motion. I know in it or feeling like it had been successful, but free, I was always pushing for like, How I didn't want to say, I didn't want it seen as like a second rate part of frame or I guess. And so I was always pushing for like, we can monetize it like this.
Matt: We could monetize it like that. And there was never any interest. And, and, and rightfully so like, because the, the, the addressable market for what frame is trying to do. It's so different to what I was suggesting. Like I, what I'm suggesting is this is a nicer, like imagine if you made this on this. And it's like, yeah, imagine like, that's nice for one person, but it's not nice for a whole team of people.
Matt: So, you know, we, and likewise over the years I've been essentially running Frame of Motion. To the best of my abilities as a personal fiefdom, like I wanted this to be like, just me. and, and I kind of always valued the periods where I got to do what I want. Um, there was periods as well where, I'd work closer with the team.
Matt: it's all sorts of, it's, it's worked in loads of different ways over the years and some work better than others. And like the way my brain works, I, it, I kind of need to let it loose in terms of let, I think I've learned over the years. Like if I try and force my brain into concentrating on something that it's not really that interested in, then it's, I'm going to get stuck.
Matt: So at the moment I'm trying to, um, Play on my sense of momentum in terms of like if I'm interested in this right now I just have to do that's what I have to do and that way you kind of keep moving and you don't feel Resentful in a sense of like, ah, but I've got to do this boring thing If you wait long enough the boring thing actually becomes interesting So I always feel like, you know, I can't get to everything right now.
Matt: So I might as well get to the things that I'm interested in and then like later down the line, I'm going to be interested in those other things. Cause I care about them all. Um, so yeah, so essentially like that, having that sort of brain, um, inside a company, which now like, especially once it hits success, like it was harder, I suppose.
Matt: to align the interests of motion with the interests of Framer, which I'm quite concerned about doing as well, because I'm like a big fan of Framer. Um, and I like working, I love working there. Like, I love, yeah, it's a phenomenal company. but I always, but above that, I always wondered what was best for motion.
Matt: And knowing that, yes, like, Framer's a massive consumer of it, but so is the rest of the web. Like, so, How do I service both audiences to the best of my abilities? that's kind of how the, and, and the conversation started by, um, it was actually there. It's not like I'd never thought about it before, but when it was suggested, I knew immediately, like, it was just a passing thought, but I was like, boom, like, let's get a plan.
Matt: Let's present it to the company. And they've been amazing in, in seeing it. I think they understand as well. Cause like it's a mutual, mutually beneficial situation. At the moment, if you type in, like, Framer animations, obviously Framer animations documentation comes up. This is a no code site build at all.
Matt: They don't need that. Like, they just don't need it. So, um, it's now, you know, over time, it's going to be the situation where you type in Framer animations, you get their documentation, as you should. When you type in motion animations, you get my documentation. Um, and so it's a lot cleaner in that sense.
Matt: and I, I think there was brand confusion around what the two different things were. and especially that since it became not a prototype at all, but like to take something into production and frame it now, like you just have to press the publish button, like that's good. It couldn't be simpler. Why haven't I, why have an API?
Matt: And so when you start feeling like if this was built today, we wouldn't have made it an open source animation library that I don't know, it always, it sort of spoke to me, like just that thought. I'm psyched. Yeah, I think we naturally arrived at this conclusion. Um, and like I say, they're the first and biggest sponsor, so they couldn't have been more supportive, really.
Matt: and likewise, you know, it's going to continue powering the animations for all framework websites, uh, for,
Matt: a while.
Andrew: So when you break off and make your own company, though, there's a lot of things you got to think about. One of those being how you're going to fund it, uh, Framer being the first sponsor is great, but do you have plans for other things? Is it just going to be sponsorships? I saw like a big mention of courses on the page.
Andrew: Do you plan on releasing a course?
Matt: I'm not personally going to do a course, because to do it, like, so my problem is I want to do everything, very well. Um, and I know people who make courses very well. So I'm just getting like, I'm just going to forward people to their courses. I'm never going to do it better than these, these educators.
Matt: Like it's just not going to happen. Um, and, or if I did, it's not say it's beyond my, you know, I, I feel like with enough time, maybe I could do something like that, but because it's, they put so much time and care into these things. That's how much time and care I'd have to put into it, if not more. Like, and more time, because they, you know, these are professional guys.
Matt: Like, they're, I think my problem is that that would come at the detriment to the core product. So, so the monetization strategy, if I can call it a strategy, it sounds a bit grandiose, but really it's a motion document with a few bullet points on it. But the, the idea is, um, that, so yes, corporate sponsors, like, A big part of it.
Matt: I feel like, um, there's a lot of companies out there that use motion and like their homepages getting awards cause they're using these, uh, wild animations, um, and they're super fans. Like, so I feel like there's, there's a lot of these companies are, and I've already got similar linear, um, and is it the host of it?
Matt: I can actually tell when it was the second sponsor, um, Tell when the extensive users, and there's a few more in the pipeline as well. already, I would consider it getting towards, because I'm a bit concerned about churn as well, but I'd say we're getting towards very sustainable already, um, which is nice.
Matt: But again, because I'm concerned about churn, I still want to push that a little bit, because there's more, you start to get into the realms of like, oh, there's more I could do here. Like, what if I could, like, get someone to contract to do this or that, like, where it's something that I don't excel in, like, Uh, or what, you know, someone can make it like a CLI for installing like local components or something like they'll do it faster than me and better.
Matt: Like, can I get like little contracts for these things together from the sponsorships? Um, I don't know. But, uh, that's one side of it. Then the other side is like personal sponsorships, I don't think are gonna real really like fly. So it's actually today. Um, as of the record that I launched motion plus.
Matt: Which is, um, it's, it's in lieu of personal sponsorships and that motion plus is going to be a one time fee of, um, say two, two, uh, if a bit before So yeah, it'd be 300 quid basically. Uh, by the time this comes out at the start, I think if you're buying it, you'll basically support emotion. Like there's, there's not many things that I'm able to give you.
Matt: Cause I'm just starting out, you get access to our private discord where you'll get support and you get to meet other like super users. you get free wallpaper pack, uh, which is probably the lower of the value offerings, but I use the wallpaper and I quite like it. And, there's also, so the first thing that I'm doing.
Matt: Is gating content. So every time that I come out with a new guide, I'll time gate it. I don't want to gate it forever because I want to build up a robust, you know, for everyone, but they're going to come out time gated for like roughly a month. This first one is a view integration guide. and that is going to be gated for like 40 days because of Christmas.
Matt: But, um, I'm not going to unlock it until after Christmas because I'll be full. Um, and I don't want to do it. No one care anyway, if I did it. So, I'm just going to keep on rolling these out. so, any given time, there should be like, a certain number of things that are time logged, but then over time, that will just build the content, so it gives me an incentive.
Matt: This is what I'm trying to do, like, align my incentives with the betterment of the product. So, um, I'll build, building up this library of content that eventually everyone can use for free. People who really, like, want to support the project and need this content, they'll get to pay for it. Get to. But you know what I'm saying.
Matt: and then on top of that, I want to build up a library of permanently gate, gated premium components. Um, that are like much higher level APIs, like a custom cursor, these sorts of things like, or a ticker, or, a particle system, you know, these sorts of things that are built on the foundations of motion, and they'll have like, what I would, like, I'll be thinking a lot about the API for these ones.
Matt: And then the last thing is, I want to build up a library of, like, we've got some examples, but they're kind of like, yeah, you know, they're very, like, bare bones, this is how we'd use it. I'd like to spend some time building a catalog of curated, beautiful, um, examples, perhaps like a Zed Private GitHub repo that you can download and use locally, or maybe you go onto a page and it's locked until you are on motion one.
Matt: but yeah, so, and this is all content that basically wouldn't exist if I didn't go into Pendant. Like, there was no reason for me to ever build this framework because it would take away from my content. Other responsibilities, essentially. Um, so again, it's the alignment of the, it's the alignment of mine, you know, my incentives to keep, to be able to keep it sustainable by making it better.
Matt: That's the, that's the trick that I'm trying to
Matt: attempt,
Matt: I
Matt: guess.
Andrew: Yeah, I could imagine like a ShadCN like CLI where you like pop in like really complex animation like templates into a project and give the user a nice jumping off point.
Matt: Yeah, exactly. That's exactly what I'm, I'm thinking. I was looking at their, like the way that you can, um, instill their components and I thought that's. That's actually exactly what I want, but I don't really know where to start, um, the end. I don't really know. No, I tell you what, no, but I do have, um, the custom cursor component almost ready.
Matt: Um, and it's super nice. It's like it, so, you know, the Mac OS, uh, sorry, the, um, iPad cursor where it's like a ball, and then if you'd like, if you go over selectable text, it will like warp to match the size of the text. But likewise, you can just, you don't need to use that bit. You can like have custom content in there, or you can, um, have things follow the cursor.
Matt: And, um, that's almost good to go.
Andrew: I actually have a component almost ready to ship, which is a custom cursor. Um, and that can do things like, it's a bit of an, um, uh, tablet started an iPad style cursor way or like.
Matt: if you've got selectable text, like it will warp to match the font size, um, and, uh, you can put in custom content and, I want all these to work together with each other. So I'm just, it's just, it's a start, but what I'm hoping is that, of course, today it'd probably be only like diehard users that use it, but I want it to be in a position in a year's time where if you, you just want to use, like, there's so much there, so much value represented by that membership that you want, you know, that you want.
Matt: It seems like a no brainer not to. Not to buy it.
Justin: Yeah, I mean, this is a hard domain, uh, and even with a powerful tool, I think like, it's still hard. So there's like a lot of value to be added to the space. So I definitely think, you know, especially if you're able to keep it small, then yeah, I definitely think there's a lot of success in your future.
Justin: There's something really appealing about the sort of like, Kind of lifestyle like business that's like behind a passion project. That's like providing value um, you know, obviously it turns into a whole different thing if you start raising venture capital and like trying to turn it into like uh, you know a really scalable business that's uh, A different beast entirely but I mean, I I imagine there's a lot of Really interesting opportunities for you ahead
Matt: Yeah, I hope so. I think that, yeah, I want to keep it that way. Um, and I want to, I'm quite keen to avoid taking on any venture capital, any venture capital, um, because that's not the sort of life that I want to lead.
Matt: Like. I did always work best like semi, like when I can concentrate on something and really go for it. Um, I think that's how I just tell operate best. And I'm not really looking for becoming like a business creator in the sense that I don't want the stuff that comes with the business. And I'm not really looking for like some ridiculous, like, I'm not looking for my empire.
Matt: I'm just looking for like a, a way to work that. That is compatible with the way I think. That's, that's basically what I'm after here. So, I feel like because that's a reasonable goal, it should be reasonable to achieve. And whether or not it is, I don't know. But, um, that's the, that's what I'm
Matt: after.
Andrew: W
[00:48:14] Future of Animation and Motion Design
Justin: hen we're wrapping up the episode, we always like to ask someone a forward facing question and I, and I think your history specifically where it lands out in the web development cycle is like kind of interesting. So we had, as you talked about in the very beginning, we had flash and we had, you know, these very heavy, but very rich animation experiences.
Justin: And then, you know, flash got killed, essentially Apple, especially being like, all right, we're not supporting this on our devices. And Uh, and that like changed the landscape and we had a lot less animation, a lot harder to do. And so, you know, you saw this opportunity to come in and build some libraries and been working on all these years.
Justin: Browsers have been getting better and giving more features and making more performant, like opening up more possibilities. Um, so, When you're looking ahead to the next like five years, what do you think are going to be the biggest things that are going to change in the space to make animations easier or faster or just like more capable?
Justin: Uh, what is like the, the seismic shift, like flash going away that you think could be on the horizon?
Matt: yeah, I'm, I'm hoping that more visual editors exist. Uh, or like a, you know, It's hard to say really, because I, first of all, I think, I think no code tools like Framer are basically it. I think in terms of UI animations, we've gotten to a stage that's a bit like the visual design where back in the day, like I used to, I started out making a Zelda fan site.
Matt: Um, and it was, I, I spent a lot of time in Photoshop making everything like this bit looks like leather, this bit looks like burnt parchment and everything's like, oh, the text has like a tiny little drop shadow. You can imagine it was like back in the day of like web 2. 0, but I was trying to do like the Zelda version where it's like parchment and tactile.
Matt: So I should, and then obviously now we're in this super minimal, um, world where the visual design is a bit more about clarity and visual, clarity. Like, yeah, but essentially about clarity. And I think motion design is also a bit in that same world. Um, and so I do think that the whole, well, the, the, the time of complicated timeline based animations, we're talking about very niche sort of implementations for them.
Matt: So when you open up Framer and you add a hover effect, really all you're doing is, um, you, you, you're changing a few values. Yeah. And it's a simple A to B animation. and you can change the, you know, the spring and feel of it visually. Um, and I honestly think that that is going to be like 90 percent of, because if I make a similar thing, um, I'd like a few years ago, I made motion dev tools.
Matt: and the timeline felt a little overkill. I don't know what that does. I come out and record. I don't know. Um, I'll stop gesticulating in case any little bubbles. I want one to pop. Um, the, um, what was I even saying? Yeah, I think that the whole, the timeline is, it just, it, it feels overkill, uh, for the majority of what people are doing.
Matt: Although I do think it's like, it's a nice visualization when you're staggering and stuff like that. But I think for the most part, that's not what people are doing. I think it's very simple. Um, so. The accessibility in that sense, I don't, basically what I'm saying is I don't think we're going to end up in this sort of maximalist design trend of like burnt textures.
Matt: And I, I could be wrong because things it's like a pendulum, isn't it? But there's something about this. It's stuck for so long that I sort of feel like this is where we're here for. So, um, physically based animations are like going to be more and more like, especially with the linear using curve and CSS.
Matt: But again, that's an incremental thing. And so I can't honestly tell you like. AI, AR glasses, like with the vision pro, like I was having a conversation earlier today where, um, the other person was talking about, like, I've not used it, but the tactile feeling of like looking at something and like, you know, clicking your fingers and stuff.
Matt: Yes, I think things like that are going to happen, but when, like, I feel like the AR stuff is just not here, like, and it won't be for a while, for a good while. Um, so it's not, I'm not trying to say this, like, I think we're in a rut. I think it's amazing. Like, I think things are just going to get easier. Um, and animations are subtler, which is nice.
Matt: Um, I think there might be more of them, like, and that, because they're easier to perform, and that's, that's a nice, that's nice, and for them to feel like, like, using more spring animations, for instance, like, that's, you know, that's kind of where I want to see it go. I think things like, yeah, I think you see a lot of animations that, where, Apple are always very tasteful with doing things, this is exactly what I'm sort of saying, like, they have animations everywhere, but they're kind of always subtle, and they always feel nice, um, that really, Shit.
Matt: And that I think is where we're heading like, yeah, essentially in terms of animation. I don't see, but maybe that's a lack of imagination.
Andrew: A tasteful future for animations for all. It's definitely a fine line you have to walk. Uh, with designing animations and design in general of doing too much before you pull it back and do just enough. Uh, but that wraps it up for our
Andrew: question.
Andrew: So that's sort of exactly what I'm saying. Like, it's almost like as a society, we like we went too far. Um, flash as much as I love using it, but now it's been pulled back. It's like you do it personally like every artist sort of has that journey of like They go too far.
Matt: They pull it back. I think the mega trend of design is is a bit Is
Matt: similar basically
Andrew: Cool.
[00:53:45] Conclusion and Final Thoughts
Andrew: Well, that wraps it up for our questions this week on this episode. Thanks for coming on. This was a really fun jaunt into all things animation. Uh, it's a pit of failure and motion makes it a pit of success. So thank you for coming on and talking about it.
Matt: Oh, thanks so much for having me like I've really enjoyed it. So yeah, Thanks