DejaVue

In this episode of DejaVue, Michael and Alex chat with Matt Perry, the creator of Motion (formerly Framer Motion), about animations in web development.
Matt talks about his journey from designing gaming magazines as a kid to becoming a full-time developer, sharing his experiences with ActionScript, jQuery, and how Motion was born. They discuss how simple and powerful Motion's API is, its ability to work with different frameworks, and how it stacks up against other animation libraries like GSAP and AnimeJS.

But the episode also covers a lot of open source aspects, such as the challenges of keeping Motion going! 
Matt explains how Motion+ funds the development of Motion with one-time payments and time-gated (then publicly available) content, to support the project.

Enjoy the episode!

Our Guest

Matt Perry
Chapters

  • (00:00) - Welcome to DejaVue
  • (01:20) - How did you get into programming?
  • (05:18) - Adobe ActionScript
  • (08:33) - What is Motion (fka. Framer Motion)?
  • (12:21) - APIs and Limitations
  • (16:54) - Prerequisites for using Tools
  • (24:26) - The jQuery of web animations
  • (26:37) - The birth of Motion
  • (31:02) - Motion for Vue
  • (32:40) - Other "Motion for ..." adaptations?
  • (34:36) - Funding the project - Motion+
  • (40:00) - One-time Payment and Time-gating
  • (50:39) - Thoughts on other ways of monetizing Motion
  • (52:43) - Can AI replace animation libraries?
  • (57:41) - The difference between Motion and other libraries
  • (01:01:04) - Closing Thoughts

Links and Resources


Your Hosts

Michael Thiessen


Alexander Lichter


---

Links marked with * are affiliate links. We get a small commission when you register for the service through our link. This helps us to keep the podcast running. We only include affiliate links for services mentioned in the episode or that we use ourselves.

Creators and Guests

Host
Alexander Lichter
DevRel @ VoidZero • Consultant • Nuxt team
Host
Michael Thiessen
Full-time Vue educator
Guest
Matt Perry
Creator of Motion
Editor
Niki Brandner
Audio Engineer and Video Editor

What is DejaVue?

Welcome to DejaVue, the Vue podcast you didn't know you needed until now! Join Michael Thiessen and Alexander Lichter on a thrilling journey through the world of Vue and Nuxt.

Get ready for weekly episodes packed with insights, updates, and deep dives into everything Vue-related. From component libraries to best practices, and beyond, they've got you covered.

Michael Thiessen:

Welcome to DejaVue.

Alexander Lichter:

It's your favorite Vue podcast. And today, Michael and I are here once again with a lovely special guest. He is the creator of motion, formerly known as Framer Motion, is Matt Perry. Matt, how are doing?

Matt Perry:

Yeah. I'm doing really well. Thanks. Yeah. How are you both doing?

Alexander Lichter:

Good. Good. Can't complain. And we could have even recorded the episode, like, in the city as, like, we're both based in Amsterdam. So maybe that's something for next time.

Matt Perry:

That might make more sense, yeah, other than my awful Internet connection.

Alexander Lichter:

Just have to, like, bring Michael over here over the Big Pond as he's coming basically close to Toronto in here for the day. So that might be the only hassle, but maybe we'll we'll can get that going close to a conference or so. Who knows?

Matt Perry:

Oh, there you go. Next time. Yeah. Exactly. Pretty soon, isn't it?

Alexander Lichter:

I mean, there there are a couple conferences coming up. Right? But, yeah, it's it's always difficult.

Michael Thiessen:

Yeah. I have VueConf US in a couple weeks.

Alexander Lichter:

True. VueConf US is coming up. JS Nation is coming up. Yeah. A lot of good conferences.

Matt Perry:

Always lots of

Matt Perry:

Bring me a few tickets, and I'll I'll be there.

Alexander Lichter:

We'll we'll figure something out. Well and also ViteConf is coming up in October. That could be also very interesting. I mean, that's in Amsterdam. So

Matt Perry:

Yeah. I saw that.

Alexander Lichter:

Hope hopefully, see you around there. So, yeah, today, we we wanna talk about a library that a lot of people, especially in the React universe, know for ages. But now that it's framework agnostic, well, it can be known to all the JavaScript developers out there about Motion, said before, fully known as Framer Motion. But maybe before diving into that, Matt, can you tell us how did you get into, like, programming after all?

Alexander Lichter:

Like, how how did that unfold in the past?

Matt Perry:

Yeah. I wasn't expecting to go that far back. I guess, like, as a kid, so I used to design my own little, like, gaming magazines on on my desktop. I remember when I talking when I'm eight years old or something, and that progressed into making websites with Microsoft FrontPage. And I didn't really get into, like I mean, really, we're talking, like, Pokemon websites since then.

Matt Perry:

And and then with I made it, like, a Zelda website, a fan site, which was, like, an actual this was, like, more of a a real thing rather than these, like, Word looking, like, documents that just linked to each other. And I I suppose I got more serious about that, like a dip into the HTML. And at that point, I didn't even use CSS. It was all how did we style things in those days? It was like I feel Like

Michael Thiessen:

Images

Matt Perry:

Yeah, I feel like it really was. It was like tables, table attributes. Yes. Like bordered width and color.

Michael Thiessen:

Oh, yeah. Yeah. Yeah.

Matt Perry:

And also hotspots. You could have an image that was basically your whole main nav and then you could draw hotspots over the thing for the different links and stuff. Or iframes, there was a big iframe guy.

Alexander Lichter:

Or image map I think was also the part of the image that's clickable. Yeah, Ancient Yeah. Yeah.

Michael Thiessen:

You know, when you hover over, it swaps out the image so you get the hover effects and

Matt Perry:

Oh, that's right. Yeah. And then you would have to but you'd see it download because you're on a 56 k. I mean, the web post like them were heavier than they are even today. We worry so much about speed and stuff, I mean, we're firing megabytes at these poor dial up connections.

Matt Perry:

But yeah. And so and so I I just sort of left that for a bit when I went to uni. And then I picked up magazine design again, which led me back to website design as a job, which led me back into coding. And then in my first yeah. One of my first jobs, like, I I had to pick up JavaScript for the first time, through jQuery, and that's basically the way I got in.

Matt Perry:

Probably a a way that doesn't exist anymore, I guess. Like, it was very much of its time, like, that path.

Michael Thiessen:

You started more on the designer side and then came over to programming versus learning programming and then getting good at the design UI stuff.

Matt Perry:

Yeah. It happened a couple of times as well. There was when I was a kid and I'd end up doing more, like like, more HTML CSS stuff, but that was because I was, like, coming from the design. And then later on again professionally, like, I think it was my second job where I was, a flash designer and I was designing gambling games essentially. I listen.

Matt Perry:

I just take any job I can. I'm not saying I I agreed with it morally, but I was gonna be leaving London if I didn't get another job. So these games would sort of, like, get shipped out to some, I don't know, like, some some code house and then come back looking completely different. So, like, your your silver buttons are now gold and all this. And so occasionally, you'd sort of have to develop or dive into existing code and tweak them.

Matt Perry:

And so it was, like, really through ActionScripts that I started getting my feet wet again. Then from there, my first real job was JavaScript. And the job after that, I was kind of like, oh, so do I get to do any design still? And they were like, no. You don't.

Matt Perry:

Of course, you don't. Like, well, that's a weird thing to ask you're a developer now. And I'll say, oh, okay. I guess you're a developer now. And so my design skills sort of atrophied over the last decade and now I'm just a full time developer.

Alexander Lichter:

Interesting. So Adobe Flash, for everybody not knowing that anymore because it doesn't exist. It's dead. Right? Like, how was that?

Alexander Lichter:

Especially like ActionScript was like super close to JavaScript. So like how was writing ActionScript compared to JavaScript nowadays?

Matt Perry:

Well, I didn't know any different. So I'd never really written JavaScript at the time. So I'd sort of just dabbled in that and GreenSock, which is and also while I learned ActionScript a bit more, like, to get the like, because with some of the, effects you can make with, GreenSock or way ahead of what you could pull off in the editor and also triggering them programmatically was a lot easier. So, yeah, that was was basically I I didn't feel like it set me up for great success with JavaScript either because, like, all the things that I was doing, like at the time, you couldn't do any of those things in CSS. Like for instance, like I was I'm mostly making like blur animations or something like that.

Matt Perry:

And then you try and perform something cool in CSS and JavaScript and you couldn't do it at the time. Filter didn't exist. I think probably border radius probably didn't exist.

Alexander Lichter:

Most of the things didn't.

Matt Perry:

Yeah. Yeah, exactly. Not even transition. Didn't even have that, I'm sure, during my first job. So a lot of it was more like logic and jQuery.

Matt Perry:

And so the jQuery made things so much more easy compared to even ActionScripts that I didn't feel like at the time that it was super familiar. But now when I look back, I'm like, oh, ActionScript three was basically mean, I think it maybe technically was JavaScript or or had I

Alexander Lichter:

think, like, yeah. It was like a fork it was like a fork of JavaScript or something like the early days, something like that. Yeah. Yeah. Exactly.

Alexander Lichter:

That's why I was also curious how how that, like, with the lens looking back now felt like. Okay. Interesting.

Matt Perry:

Yeah. I think it was is this something called ECMAScript? This is ignorance. I'm I'm I'm well, I don't know why I'm saying this out loud.

Alexander Lichter:

ECMAScript is the standard. Right? So, like, JavaScript is basically the implementation of the ECMAScript standard, and I guess ECMAScript was another one. I I I'm not sure if it was fully spec compliant, but at least back then to some degree, I think it was. But also things changed over time so much.

Alexander Lichter:

Yeah.

Matt Perry:

Yeah. That makes sense. So, yeah, I feel like that was what that was.

Alexander Lichter:

But

Matt Perry:

yeah. And then and then, obviously, Flash died and I and I just drifted more and more into JavaScript. And at some point, I had to did I have to learn React? I think from there was a job I had where I was building a site and I thought, fuck. I've always wanted to learn React.

Matt Perry:

Let's use that. And I did. And then that's Framer Motion sort of spun out of that originally, which is why it's so React heavy. So so so React focused and and now, like, obviously, with motion for Vue, that was more I've done a, like, a small Vue implementation with motion. It was a previous animation like we called motion one, but it's quite limited in scope, whereas people, I think, really wanted the full framer motion experience.

Matt Perry:

So then this port was actually developed by someone else. Don't know why you've got me on the show, to be honest, because the cool thing that I'm talking about today was actually built by someone else. But it's essentially taking the the raw materials of motion for React and reimplementing them in motion for view. And, yeah, I've used it. I mean, you know, luckily, I've used it.

Matt Perry:

So it it works great. I know that much. Yeah.

Michael Thiessen:

For people who aren't familiar with motion, framer motion, can you give a quick description of what it does?

Matt Perry:

Yeah. So I think that the idea is that in the simplest use case, it's super simple and you can basically write animations easier with this than you would be able to, in my opinion, within CSS or something. And then I the real like, it scales all the way to there's nothing you can't make with it. And that's nice because when you learn, like, CSS from scratch, CSS animations or or whatever, you'll get to a point where you're like, oh, I have to do this thing I now have to do. So, like, with CSS transition, you can use that for a bunch of things.

Matt Perry:

And then you're like, oh, but I can't use it to make this repeating animation. That for that, I need to now and then you have to change everything. Now you're using key frames and you're using and the animation comes with its own limitations and weird behavior. Whereas with framer motion, there's no real sorry. Have it.

Matt Perry:

With motion, there's no real, like there shouldn't be any limitation. It should just be, a straight shot from from no nothing. So doing your first animation, which is easy, like motion dot div animate x a hundred. Like, it's, you know, it's a it's a standard scale 1.2. You wanna hover animation while hover equals scale.

Matt Perry:

Well, yeah, 1.2 press equals 0.9. Now you've got a clickable button. So that's kind of the idea behind it. Yeah. Should be made as simple as possible, but there should never be any limitations on on what you can do with it.

Alexander Lichter:

I think that's a good one because like especially if people think, oh, yeah. But CSS has animations. So, yeah, the the the simple API plus, like, that there is no showstopper at some point. So, like, okay. Now you have to switch to this more complex thing.

Alexander Lichter:

But that's that's the superpower here, to say.

Matt Perry:

Yeah, exactly. Because then as well, once you got past the things that CSS animations can do, now you're into the world of JavaScript. And for a lot of people, that's super intimidating, especially if it's more imperative code. So just to have this declarative API that is accessible, if you know how to write a HTML element, can do 90% of what FrameRotion or Motion for React, Motion for View, the cool things that they do, you can already do them like super advanced layout animations. You just have to add the layout prop or layout ID for shared element transitions.

Matt Perry:

These are things that used to be really difficult, but now they're accessible to everyone.

Alexander Lichter:

Without diving deep into complex APIs or then as you said, switching from one strategy to another because the certain thing you try doesn't work anymore.

Matt Perry:

Yeah. Exactly. And I suppose I think there's a depth to the API. Wanna keep things as shallow as possible, if you know what I mean. But Yeah.

Matt Perry:

Because there's so much you can do, then there there is a depth there's a lot there is a lot to learn, but you don't have to learn I think you can I'd like to keep the gradient. Basically, like, the 90% of people just need these couple props. And then as you get, like, more and more specialized, you end up dipping into more and more things. Like, motion values is probably my favorite API, but also one that most people will never use. But it's it's basically to quickly explain it.

Matt Perry:

So it's essentially a little like signals and or observables. It's somewhere in that realm where you have these just values that can be animated alone, then they can be composed into more complex values and then they can be passed to one or more motion divs or motion I keep saying motion motion div is the shorthand. You can have motion dot nh t m l s v g element, but I'll probably just keep saying motion div. But that's not to say it's meant to be like accessible. Yes.

Matt Perry:

Your, use your judgment, obviously.

Alexander Lichter:

Semantic HTML folks, we all

Matt Perry:

Yeah. Yeah. Yeah.

Michael Thiessen:

So I think any, like, good API is sort of designed like that where it, like, the 90% use case, like 90% of the time it's just like easy, straightforward, but it also has like this escape hatch kind of maybe not, but like where like the abstraction and like the library doesn't limit you such a like, oh, now I wanna do this complicated thing. I either have to like hack my way around this library or throw it out and now I have to implement my own thing. But it's like, oh, there's this other part that you can just like dig into. You can pull back the curtain kind of, and like dive into it. And you didn't need to know this before, but like for this really advanced edge case that you need to implement, you can just keep going with the same tool and you don't have to throw it out and start over.

Michael Thiessen:

Can just take that next step.

Matt Perry:

Yeah, exactly. How do you feel like is Vue like that? Because I've only used Vue three and I don't know that there's competing APIs and there's the composable API versus the is this a big discussion in the Vue community? Or you can start using this and then you end up using this? How's it where's that at the moment?

Alexander Lichter:

I think it depends who you ask, of course, but a lot of people, they adapt it. They use the composition API. They know it's the way forward. There are also a lot of people who really don't wanna bother with a more, let's say, flexible API and prefer that the Options API has these groups where like, Okay, my data comes my state gets into data and my computer properties go into computed and methods there and so on. So especially if you're not, let's say, a full time front end dev and don't wanna dig into, like, all the complex things, but, hey.

Alexander Lichter:

I wanna have a very simple way of doing things. They don't wanna think where to put the stuff. I just wanna have a lot of guidance there. I feel like the view options API can be quite a benefit because it gives exactly that. But I would say, like, nowadays with v three, a lot of people use composition API and also see the benefits.

Alexander Lichter:

Though sometimes it takes a while, but there are also enough people, as I said, like they're like, okay. I'm I'm good with the options API. Both will be supported. Nothing will be removed. So that's a benefit in the end there.

Alexander Lichter:

But, of course, like modules, like NPM packages can decide if they say, okay. We only have composables, then, well, you're that's up to you then.

Matt Perry:

Right. See. Yeah.

Michael Thiessen:

I see Nuxt as more that of, like, the the really simple, if you just need it to be simple, but then as you need more features, it gets more complex and you can like dig deeper and deeper and deeper.

Alexander Lichter:

That's true.

Michael Thiessen:

Like you can start out with just a single page app inside of a single component and it will ship only that code. And then if you want to do server side rendering, well then you get that. If you want to do routing, it'll add that in. If you want to, you know, have optimized images, you start to use Nuxt image and it'll like auto install the package for you and do all the optimizations. And you don't have to think about the transforms and resizing happening on the server.

Michael Thiessen:

And like, you can kind of keep going deeper and deeper and it like kind of just like unfolds gracefully. And I really like that approach because it's not like, you know, you have to have like this complex architecture. If you're building a Nuxt app, you can start really basic and it's just scales with you. So I really like that about it.

Alexander Lichter:

I think like for for Vue in a way it also is if you can start with a script tag. Right? If you need a build step, then you can can go for that. Of course, if you build, a whole front end, then you usually wanna build step, but you don't have to. If you just wanna replace Jake Ferry, then maybe that's also a good step forward.

Alexander Lichter:

And then at some point when you see, oh, it's all viewed, then, yeah, you can continue with that and say, let's actually have a build step. Let's get all the benefits in. It's also something I think we rarely see nowadays because everything is JSX based. You either have a build step or you don't use JSX, which is a bit of a pain. So that's definitely interesting to see the views.

Alexander Lichter:

I think that's the only major framework that can just run from a script tag with almost all its power.

Matt Perry:

Yeah. That's the nice thing about, well, making APIs, but also the hard thing is it's like a constant puzzle of how much do you reveal when you're onboarding someone. You don't wanna scare them off with all these new concepts. Exactly. And like, definitely when I first started writing I started writing this like ten ten years ago.

Matt Perry:

Oh, god. I'm so old. As We all are. Emotion. Yeah.

Matt Perry:

Yeah. Yeah. Good enough. We're older by the end of this podcast. That's never stops ticking.

Matt Perry:

That was like a vanilla API and I introduced all these weird concepts that like new words and I don't know, things that made sense in my head but probably didn't make and so as that went on, it was just to go like a thing of like a yeah. Like a puzzle of or journey of simplifying things and concepts and removing things that people don't care about or need to know. You you know, things that I would have made an explicit API for, made a big deal off in the documentation. I ended I now, like, almost ignored. Like, for instance, like, I had, like, a whole way of targeting whether you're gonna be out animating styles or attributes or whatever, and you had the the, you know, special dedicated keywords for this.

Matt Perry:

It was all won't get into it. But, anyway, the point is that that now is like a I don't think I've written about that in in so long because you use an emotion div. Well, we know that you're animating styles, for instance.

Alexander Lichter:

And then if you just infer it then, you you know it already. Exactly. Yes.

Matt Perry:

But that's a good day. That's how it should be. Like, this what was I doing? But you only know that because, like, now that you've done you've got experience and you know this is like so that's the thing. Like, you you just learn in this whole time.

Matt Perry:

And I feel like I'm it's in a good place now where that a lot of the things that, you know, don't need to be shown up on. And then all the other things are presented, but in simple packages. Like, the emotion value stuff, like, these are signals, but I I feel like people shouldn't need to know what a signal is. So I'm not gonna go you know, I I think I mentioned the word once, and I'd probably take that out, but it's like a signal. But I I don't like that I've written that.

Matt Perry:

I think it should just be like, this is a value. You can listen to it, and then you can change the way something looks when it changes. Like, done. Like, that's all that people need to know.

Michael Thiessen:

I've learned this, the hard way with creating content and writing articles and stuff like that. And, like, even like certain topics where it's like super theoretical, almost like really abstract. It's like interesting to me and it's like, no one cares. No one wants to know like about like, you know, how to structure theory behind state management or whatever. And it's like, people just want to know how to make it not suck when they're developing day to day and like tangled state and whatever.

Michael Thiessen:

They just want to know, like, how do I make this easier on myself? And these details of things, there are some people who care about those details and I'll put that at the very bottom of the article of like, oh, by the way, this is how this is implemented. But 80% of people probably just want to figure out how to get the thing done so they can close their ticket and, get to lunch.

Matt Perry:

So. No. Exactly. Yeah. I I went down a whole functional programming rabbit hole, and there was a version of PopMotion that was like

Michael Thiessen:

That happens.

Matt Perry:

Very yeah. Yeah. Exactly. It does feel like my angsty teenager phase of of my of my professional development. Yeah.

Matt Perry:

There'd be this way that you could compose these chains so you have the animation. And the animation doesn't do anything by default because you have the full freedom to output these values any way you like and you can build these you can pipe Yeah. And so you didn't have default values by default. So if you animate like x10, well, Okay, now you can put that through a function that adds the pixels strings. So now you've got 10 pixels and you can pass that to something that outputs it on this element as the width property or something.

Matt Perry:

And looking back, I'm like, the fuck was it? And I think it was one day that I was reading an article and it said something, I don't know what this is, but a monad. Oh, yeah. That was really into programming. Okay.

Matt Perry:

Good. Okay. Well, this must have been the same thing. So it was I think I read the word monad. And I just remember thinking, I don't give a fucking shit what that means.

Matt Perry:

I actually thought that. And that's so you know, that I was actually quite comfortable at being I was like, I would like to remain ignorant. This is the limit of how much I care about the subject. And it maybe and at that moment, I had the realization that that's how people feel when they're reading through my API docs, but, like, way sooner about way more things. Like, everyone has everyone has it

Alexander Lichter:

Absolutely.

Matt Perry:

As for about something. And so I just thought, man, I've gotta get rid of all of this. Like, and I've just gotta make it as easy as possible because it's already you know, the thing that you're trying to do is already the hard thing. Like, if you're if if you're thing is database security or I don't know what it is, but, like, when it's animations, people are already struggling with, like, how to make a nice animation. And so it's like, well, okay.

Matt Perry:

We'll figure that out. What am I doing with all these pipes and I don't know, any other things. Think I yeah.

Alexander Lichter:

It's so interesting because you wanna you wanna basically enable that people can do amazing animations. And they don't have to be functional programming experts to to make that happen. So ideally, want something that that works for them, like, intuitively in a way. For functional programming, it always feels like you have to jump through a couple of hoops. And if you like, right.

Alexander Lichter:

Let's say you have these 1,000 LEGO blocks and you have to put them together and I see then you get something out of it. Well, probably for for something that's also focused more towards people, let's say, animation is more well, let's say the the creative and art part, not the, like, theoretical, maybe more logical mathematically part. Not saying don't eat math for animation because there are a lot of use cases. But and, yeah, you also figured out, look, this is my target audience and I don't wanna bore them with all the functional programming concepts and rather make it convenient for them intuitive to use, which still probably means you have a lot of knowledge of like, okay, how do I design it so it works well and also performance, but you don't have to force your end users to know all that.

Matt Perry:

Exactly. Yeah. Yeah. Sometimes it's like there'll be concepts that are useful. Like or or even especially when it comes to performance, animation is a good example of it.

Matt Perry:

Like, you know, knowing not to I think a naive approach should be making object everything would be immutable. Like, if we were to take the trends of, like, the last five years and I you were to write an animation library in that way, you'd be like there'd be because you wanna make it easy to read, so you'd be nesting for loop for each functions and stuff, and then you'd be pumping out new objects every frame. But that is a disaster for in terms of performance. So you need to so actually things are written with, like, for normal if there's a loop, then it's a it's a four I equal. Do know what mean?

Matt Perry:

And then there's no Yeah. Yeah. Massive like mutability going on in there, which, you know, do I feel grubby? Of course I do. But I know when I see the the memory consumption that that's better than I I've, you know, I've seen it with other implementations.

Matt Perry:

So, yeah, it's not like you need to be ignorant of every programming thing, but I think it's when these like I think it's good for you to know a lot of these things. I just still don't think I need to know what a monad is, but it's good for me to know a lot of

Matt Perry:

these things. But, yeah, I would you know, ideally, I'm actually here to shield the user from those things. Like, I want them to not stuff their brain with all this stuff because I don't know what else they have going on. I don't know what problems they're trying to solve. They're just trying to solve animating this one thing when they come to to me.

Matt Perry:

So I'm just gonna solve like, we're only gonna be talking about animation. We're not gonna be talking about programming. Like, you you and you see it. Like, you know, a a good example, like, if you ever choose using the web animations API, there's a you can do, like, a element dot animate opacity zero to opacity one. Like, naively, like, what would you expect that element to be when the animation finishes?

Alexander Lichter:

Well, from zero to one, so it should be fully visible. Right?

Matt Perry:

Yeah. Exactly. Will be invisible. Yes. Naively.

Matt Perry:

Right? Yeah. Yeah. Exactly. Yeah.

Matt Perry:

Naively. Yeah. No. I I know whether or not you you need like, it is a trick question, but but and then you've got, like, two ways that you can solve it essentially. And one is, like, using this commit styles.

Matt Perry:

So you can cancel the commit styles and then cancel the animation. That'll leave behind the the one style, or you can leave the animation essentially running, but with the fill mode forwards. And I'm, like, reading this. I'm like, this is like, this is nuts. Like, what you know, I'm not naming names.

Matt Perry:

But, like, I'm just saying, like, let's I can let's just solve this and, like, make sure that no one has to think about this every game because, intuitively, that isn't how that should work, basically. Yeah. So that that's a practical example.

Alexander Lichter:

There's a good analogy to jQuery that you mentioned before where baked in, like, jQuery basically unified all the different ways browsers are doing things. Like, here is an easy way, an accessible way to do that, and it will work the same everywhere. Now with standards, of course, it's not that much necessary. But maybe in terms of animations like here, it's pretty obvious you want to have like you want to animate, let's say, opacity and motion is handling all the difficult part, maybe all the caveats, all the weird parts for you so you don't have to think about it or maybe research why your element is not visible. It's it's important.

Matt Perry:

Yeah. Yeah. That's the that's the idea. Like, any let's say cross browser stuff these days. Like, there was a phase where, like, WAAPI was in a state where you'd need to do certain things to make sure it works great cross browser, but that's not really the case anymore.

Matt Perry:

But, yeah, I'd have thought of it sometimes just like the jQuery of, but at least that part of it. The the the browser APIs, that's the sort of jQuery of web animations, APIs, Scrolls timeline, things like that.

Alexander Lichter:

Yeah, think that's fair.

Alexander Lichter:

So you mentioned Popmotion and Framer Motion and Motion to name wise. So maybe it's a good point to go at least a little bit into the history because you also You said before, okay, Pop Motion kinda started as, like, your side project, so to say, and eventually it became Framer Motion, and now it's just motion. So can you briefly explain how did all of that happen?

Matt Perry:

Yeah. So Pop Motion was my my first side project, really, the first one that I took seriously. And I I started doing it because I wanted to write a book about, like, I've got certain, like, feelings and thoughts on animations in UIs and I thought it'd be good to write a book about that. Maybe it's just a small good. But it's maybe a small course or long blog.

Matt Perry:

I don't know. Anyway, was coming to do all these examples and I thought there's nothing. A lot of involved spring physics and there was no good API for that. So I started I still want to write Popmotion after I finished that. But that set me on the path.

Matt Perry:

And that was like a completely like renderless and then I'd add in a library for rendering to the DOM or rendering to Three.js and stuff like that. But then it was only when I so there there was that and then I wrote one called Pose, which was essentially a declarative layer on top of Popmotion for React. And it was So

Alexander Lichter:

Popmotion was fully vanilla, and then Pose was basically the React wrapper, so to say.

Matt Perry:

Yeah. There was also a Vue. It was for Vue as well.

Alexander Lichter:

Okay. Nice. Nice.

Matt Perry:

This is a long time ago. But yeah. And I had to I think I just stopped supporting it. Maybe it's part of going to Framer. So at some point, I I did a I went Framer.

Matt Perry:

There was a version of Framer back in the day. And so for people who don't know, Framer is like a web site building tool, but the interface is a lot more like a Figma, like a sort of traditional design tool. But you can press publish and you've got a website. The motion.dev website is made in Framer. And Back in the day, they were prototyping tool.

Matt Perry:

When they came out with their latest version, which was based on React, you could actually open up the code editor and hack around. So I copy pasted Pose into that and started making animations in the prototypes. And then I got a DM, like, a few days day next day from Coon who runs Framer, and he was like, oh, do you want a job, basically? It wasn't that easy. Like, there was a few a few more checks than that, but that's also how I ended up in Amsterdam originally.

Matt Perry:

So I was there for six years writing Framer Motion, which was, like, in some ways, like, was like a spiritual success, I suppose, but also incorporated Popmotion as a direct dependency. So it was very much a continuation of that. And then, like, a few years into that, I had, like, an idea for something based purely on browser APIs after trying to write another book. And I'd I'd run into so many stumbling blocks using web animations API that I thought there was space for like a jQuery. So that includes things like interrupting animations, animating independent transforms.

Matt Perry:

These things aren't that easy with WAAPI still. So I just saw, like, a tiny wrapper, maybe few three kilobytes, something like that, see how much I can get out of it. Can I get spring animations in there? It was a bit of an exercise and experiment. And so that was motion one.

Matt Perry:

And then all of that ended up over the next couple years sort of making its way into framer motion anyway. So all of the techniques that I'd sort of built. Framer, I should have assumed that in a sense. Then when I left Framer to take this independent, I sort of everything there was a whole vanilla JS API that was already usable and public. Like, it's just that no one used it, and, like, everyone thought that Framework Motion was a React API.

Matt Perry:

So in the announcement, I was like, this is a great time just to say, like and now it incorporates Motion one, and it's a vanilla API. But that was all kind of nonstick because, like, it Yeah. Yeah. It'd been going for years, but no one it was just a way of rebranding it essentially.

Matt Perry:

It's like now it's way of framing as well. Right?

Alexander Lichter:

If you know, but like, hey, look, this is you can use it with React. There won't be any changes. That's not framer motion.

Alexander Lichter:

It's just motion now. And it also works for JavaScript. It's already a different feeling to people. Feel like, hey, this is more framework agnostic now, even though it was before and people just didn't know.

Matt Perry:

Yeah, exactly. I think it just coinciding that announcement with this is now independent, it almost gives it the air of like, oh, because it's independent, now you can use it. Like, there's this whole JavaScript API. It's like it wasn't really it wasn't limited in that way. It's all like so I think it helped drive the point

Alexander Lichter:

For sure.

Matt Perry:

In into people's, like, perceptions basically of what motion is. And then it was about six months later, think that Rick who runs Motion for Vue, I I saw his project. It was like I think it was called Motion V or something.

Alexander Lichter:

Mhmm. Motion V. Yeah. Yeah.

Matt Perry:

And he'd basically just taken the whole thing and made the made a full full implementation of motion free act but for Vue using the same it's all it's the same internals. And I was just like, if I sponsor you, well, you can remake this public, like or or official. Sorry. And and he he was super up for it. And he's just yeah.

Matt Perry:

He's been an amazing maintainer, like, which is the only reason this has happened, really, because I I don't think like, I I you know, I've made Vue implementations before, but, like, I'm very comfortable with React. Whereas I don't I didn't know. If I if I was to do motion review, I was I was talking to everyone about this. I I was like, this is gonna take me a year. I'm only gonna be able to have, like, you know, a few days a month able to do this.

Matt Perry:

I'm gonna have to refactor the whole thing, you know, because I've gotta move. And I have been slowly refactoring more and more out of the framer motion package, which is like the react bit and into its its own package so we can more safely do things like motion Vue. But he'd already done it, and I was like, wow.

Matt Perry:

It takes a certain mind to to this is the guy that you want right in the official motion for Vue. It's the same way there's no, like, motion for solid or motion for Svelte.

Matt Perry:

You know? I'm not not open to it, but it would take someone like this to be able to make it possible.

Alexander Lichter:

So that that basically means if there's someone out there saying, hey. I'm super into Motion. I use it for a lot

Matt Perry:

of things, and I use, yeah,

Alexander Lichter:

Solid, Svelte, Angular, whatsoever, then you'd be open like, hey. Let's work together. Let's make that happen.

Matt Perry:

Yeah. I'd be open to it, but it does like, so this is I don't wanna sound too mercantile, but let it's it's like a business now as well. So I'd have to see because, you know, I could be left held in the bag. There's that dimension to things. And I'd like to not pull support for something.

Matt Perry:

So I wanna make sure it's something that has the numbers for a start. Like, you know, I sponsor Rick and then but, really, I'm getting funded by motion plus sales. So I need to know that I'm getting at least the motion plus income from a Vue implementation that can pay for the sponsorship. And I want that to be as much as possible because, like, he's doing I I, you know, I love what I'm doing, and I want to make sure that if someone's making a motion for something that they at least have a, like, a subsidizing like, a chunk. Do you know what mean?

Matt Perry:

Of course. So and I can say now after a month of this that it is making that money. So I'm I'm comfortable. But it's also given me like a calibration of how many how many motion plus sales do I need to make versus the size of the audience that that framework integration will bring and view is of that size. But like, it's felt.

Matt Perry:

I I don't know. Like, is is solid? Probably not. Like, so that that and Angular, like, again, I don't actually know, but with Angular. But the fact that I don't know is not great.

Matt Perry:

I know it's probably literally all of them, but I, but I don't know. Literally ignorant of this. But anyway, that's the equation that comes into this.

Michael Thiessen:

Yeah. I'd like to know more about how this motion plus thing works and how, like, you're supporting this this whole project and the revenue and all that kind of not necessarily the the specific revenue, but just in general how you're doing this?

Matt Perry:

Yes. I guess when I started this out, I wanted to make the I don't want to turn on the money. I wanted to make as wide a pipe almost so that I didn't have to worry about this again. So for me, that involved getting money from the companies that use Motion and the people that use Motion. And for me, those are like very different things.

Matt Perry:

So the companies some companies will be open. Like, you need to hit people into the like, in like, people will pay for things that they can't have. They're not gonna pay for sponsorship as in the same way.

Matt Perry:

So with Motion One, like, I managed to get like, not like a wage or anything, but it was I was surprised by what you could make because Motion One wasn't publicly available. It was fully behind a paywall to begin with. And at that point, sponsorships were relatively healthy. Like, not a nice side project income. I was really happy with it.

Matt Perry:

And then when I did when I launched Motion, within a week, could tell that company sponsorships were great. But I had to go after most of those companies. Like, that was the other thing. So I put my business hat on and I was I knew I'd already built up a list. I knew he was using it.

Matt Perry:

And I was like, look. I'm getting independent. I need your support. And we've got great traffic on motion. Dev.

Matt Perry:

So if you've got your logo there, this is gonna give you, you know, 200,000. But a lot also, a lot of these companies are so big they don't care about that. So it's more about supporting the project. But so so there was this there were companies that support. And then for people, yeah, I had to the personal sponsorships.

Matt Perry:

And motion Framer motion, like, I'd say fairly big and it the sponsorships is basically nothing. And so I was like, oh, shit. I've gotta find something quickly to, you know, figure this part of the income out. So that's when I started making the examples website, which was primarily like to begin with, it was just a host. Everything that I had on code sandbox, ported to examples, motion examples.

Matt Perry:

So if sorry, examples.motion.dev and that you can go on there and you can look at the source code and some of them have tutorials and stuff. But then I wanted to start making a bunch of new examples like a bit more involved or a bit more specific. The ones that are teaching the fundamentals, they're completely free and you can look at the source. But I wanted to make some that were like more opinionated or more design focused. So I've had people like I've commissioned a few and or made a few, you know, different ones basically.

Matt Perry:

This is over a hundred now and they're split fairly evenly between JavaScript, Vue, and React.

Alexander Lichter:

Are the same available for all three as well or are there like some only for React or Vue or JavaScript?

Matt Perry:

React and Vue have mostly parity because the APIs are the same. The JavaScript's because the API is a bit smaller, I've done my best to bring as many over, but some of them rely on layout animations, which are just they're just a different tool than the Vue animations API. So there's certain things that I've been able to match and some things that I've done my best with. So I think there's overall fewer for vanilla, but ReactiveView are pretty well supported equally. Yeah.

Matt Perry:

So putting just even a few behind a a paywall was enough to start getting some sales. And to begin with, was just diehard people, like big fans of motion. And you also get access to a Discord. And then I started layering in some private APIs and early access as well. So just today I I launched some early access like a reactive API.

Matt Perry:

I was talking about motion values earlier. There are a couple more of like transform value, map value, so more composable, more hardcore. Don't tell the initial users, but like for the advanced users, this sort of thing, and style effects, which is like a Here's the motion values, like link them to this element or these elements. Like a more of a composable API. That's why I don't wanna keep private forever, but that's in early access.

Matt Perry:

So you get it a month ahead of everyone else. And likewise, this one called split text, you can use in any it's vanilla, but you can use it in React and Vue. This example is showing how to do that. That's always gonna be MotionPlus. So this whole mix of It's basically a really mixed offering, but it's a one time fee and you get access to all of the updates going down the line.

Matt Perry:

And at this point, I'd say that the value proposition is enough that I'm happy with the sales basically. It's not explosive like you hear. So Tailwind is kind of famous for Tailwind UI. It's definitely not in that league, but it's Enough

Alexander Lichter:

Tailwind plus nowadays.

Alexander Lichter:

They also rebranded that for a good reason.

Matt Perry:

Yeah, exactly. Yeah, yeah, yeah. And so I think having that much stuff, I can say that all those different things contribute to at least looking at the stats, they seem to all contribute to this offering. And So I'd say that now I can I can live off this? And so I can carry on doing motion for as long as the sales keep up and the sponsorships stay there, I can carry on doing this for as long as I want, which is, like, probably forever because I really enjoy it really.

Matt Perry:

Yeah. Exactly. Exactly. It really is. It's the dream.

Matt Perry:

Yeah. It's I sort of pinched myself.

Alexander Lichter:

Quick check.

Matt Perry:

Yeah? Yeah. Yeah. Yeah. I just I've also got this hoodie on because you don't wanna see all the pinch marks on, like, completely like

Alexander Lichter:

So I think MotionPlus, like, we talk a lot about open source sustainability. We had, like, a whole episode. So for all listeners who didn't catch that, definitely check it out. Like, with a lot of people because we're also, of course, big open source, well, fans and contributors as well. So monetization in terms of MotionPlus is something that definitely caught my eye because it's very different to the usual way of doing things.

Alexander Lichter:

Because you already mentioned, for example, Tailwind UI or now Tailwind Plus with, hey, here you have a product. You can pay for it. So like access and forever. But in your case, you basically say, okay, there are lot of parts that are basically time gated. So you can look at that in thirty days for free or you can check it out now and have to be part of that MotionPlus program.

Alexander Lichter:

And that's also a one time fee. Right? Yeah. So how was your experience from the community or people in general? Was this something that people were happy about?

Alexander Lichter:

Or was it a system they found weird at the beginning? Maybe where is that right now?

Matt Perry:

I'd say for me, at least from what I've seen directed at me, the response has been overwhelmingly positive. I think people find it quite easy to imagine that there's a core API and it's actually the most of the API. If you go on, there's very few gated things. There's a couple of early access things. But when you look in very few, but enough that it's like, oh, I want to pay for that's a cool extra thing.

Matt Perry:

But it's clearly not part of the core library. The things that I want to be part of the core library, I those are the things that only get early access. And on the whole, I it's been positive. There's sometimes you get a comment. So like, I'll share like an example.

Matt Perry:

And like it the the comment will be like, oh, this guy has even price gated the fucking example. And you're like, I get it because what I've done is shared this example and you go in and you click on the source code and it comes up with the paywall. But with the broader context of here's a hundred examples and all these fundamentals are free, it makes more sense. It's not like so it's funny because I don't want people to feel like there's nothing on there if you don't pay. It's actually quite the opposite.

Matt Perry:

And so if your first exposure is this tie is this gated example, but I also need the gated examples to do promotion. So that's the I don't know. It's like an interesting dynamic. But even even that, like, very few people have have communicated that to me still. So I think people get it on the whole.

Matt Perry:

And the early access is like I did very early on, like almost to shatter the people's like to to really like drive home that this is independent now. I did like a Webflow integration guide. So obviously Webflow, big competitor of Framer, which is like the old, this is where it came from. Now what you can do in Webflow is limited. You can only use the JavaScript API.

Matt Perry:

It's more like an answer to the GSAP Webflow guide. I mean, you can't compare how the two are integrated. I published that because I had nothing else at the time. This is like week three. I published that as early access.

Matt Perry:

There were definitely from the Webflow community people who were this is insane. How could you charge £300 for a Webflow guide? I'm like, well, am and I'm not. I'm not charging for the guide. This is one thing and it's early access.

Matt Perry:

So yeah, you know, you get all these other things. But at the time, there was a lot less other things, so it didn't make as much sense. And also, I think if I did it again, APIs come in with early access, but I probably wouldn't have made the an integration guide early access. Because if you're a Webflow guy, you're probably or, you know, Webflow person. Like, you'll come in into this fresh and you're like, this is your first exposure.

Matt Perry:

Obviously, I'm not gonna pay you £300, but Sure. You want that person to start using it and then you get but in my head, it was like, well, no. I'm charging my existing these are people who like but those people didn't exist. There was no Venn diagram where you're an existing motion person and you were like a web flow. I don't know.

Matt Perry:

It was it was dumb. But it was also a learning. It I was happy to that it happened, and I just felt that the damage here is basically zero because it is early access and everyone else gets in two weeks. So I don't know what you're complaining about.

Michael Thiessen:

Yeah. And you always gotta try things out and and

Alexander Lichter:

Sure does.

Michael Thiessen:

There's never, like, a perfect way of of doing things.

Matt Perry:

So Yeah. Exactly.

Alexander Lichter:

And also, like, iterating. It's not like, okay. That worked or that didn't work.

Alexander Lichter:

Or maybe the messaging has to be clear and so on so on. Yeah. Like, I I can only remember there was like, I heard a lot of good things as well when when, like, motion like, not Framework Motion, but Motion formerly known as Framework Motion was like announced going independent and then the early access stuff coming up. I remembered like there was I can't really pinpoint it. There was like one big Twitter discussion where like at least someone was like, oh yeah, how is that possible?

Alexander Lichter:

As you said, then a lot of people were like, Hey, this is a great way to try out a different way of monetizing open source. And I agree, especially with the part that like, Hey, this is available. If you have no urgent thing or if you don't want to put it on your site right now, but in two weeks, it's all fine. It's great. Or like if you don't wanna have access to all the other things there, that's okay.

Alexander Lichter:

You can you can use it. It's not like gated in a certain way. So glad to hear that that way of monetizing was successful.

Matt Perry:

Oh, thanks. And I'll also just say, like, the whole thing that the the core of this really came out of discussions with Adam from Tailwind. Like so that kind of conversation I had with him, like, in, I don't know, the start of last year, like, it really put me on a path towards all this happening. And the one time fee is directly attributable, you know, even if this implement even if things are different, you know, early access, for instance. That was very much, like, his model that I'm emulating.

Matt Perry:

So and I just say that just to yeah. I think it's something that more projects could do because this is a liveable like, I'm lucky enough that this is actually, like because when I was doing Pop Motion and I was doing our sponsorships before I moved to Framer, I think I got up to, like, £300 a month, which is obviously, like, not gonna pay the bills.

Alexander Lichter:

Not at all.

Matt Perry:

No. It's it's hard one to get off. You know, I've essentially been incubated for six years at Framer, which is not something that's open to a lot of people. But somewhere between that and here is like a whole array of, like, good side incomes or even livable wages. And then beyond that, obviously, you're getting to tell tailwind money.

Matt Perry:

But, like, you know, there's there's at least, partial salaries in this kind of thing for smaller libraries or libraries that are the same size. I'm just saying there's a lot more flexibility here.

Michael Thiessen:

For sure.

Matt Perry:

And think yeah.

Alexander Lichter:

And people should try it out. So that's why it's interesting to see that, especially we're all tired of subscriptions. Right? It's not another subscription. It's also one more thing.

Alexander Lichter:

And and then seeing, hey, these onetime payments work out is such a great news also too, as you said just before, a lot a lot of other people out there, a lot of other open source maintainers who might look into struggle doing that for even partial, like part time. So maybe that's also a good point to everybody listening, having a library and thinking of what could there be a way to make that work out while not gatekeeping everything behind a big paywall, like here is the course that you have to buy to understand everything. All the early access thing works.

Matt Perry:

Yeah. Exactly. Yeah. Early access plus, you know, there are gated APIs. For sure.

Matt Perry:

Definitely like the course of course, I like that idea as well. Like if so if you've got like something, I know AnimeJS is gonna come out of the like, they launched and the homepage is incredible. And so everyone's like, oh, wow. You know, this this homepage is blowing my mind. And it's like, okay. Well, I'm gonna sell a course. I'm gonna build a course now that teaches you how to build this homepage. That's an amazing like, I'm hoping that that's another you know? But things like this are what's needed. And it does take your focus away from doing the open source thing as well.

Alexander Lichter:

Thats the other point. Right? With with actual content for the docs, like, hey, I write that and it will benefit all the people at some point. It's not like lost, let's say, lost time for not working on the open source part.

Matt Perry:

Yeah. And it's also even though these things are gated, like certain things, like a course like that, for instance, I still think its existence makes the ecosystem more vibrant. It brings something to this. Like, before I went independent, I'd say that, you know, free of motion, like, in a sense, like, I was doing it, but I was doing it in service of, like, oh, like, how can we get more performance out of Frame and blah blah blah. But now this is amazing motion example website with all these crazy examples that people can play with.

Matt Perry:

And even if they're not paying for the source code for some of these, that maybe they're getting inspired and they're like, oh, I could build something like that or just the community that exists on Discord now. I don't know. I feel like this paid more stuff, like, it I don't see it now as like, oh, I've spent 2 days making this example, therefore I've wasted my time. It's like, actually, I'll come away for a bunch of ideas or I found this bug and there is a lot to it. I think that's healthy for project.

Michael Thiessen:

There's another there I think there are a lot of examples of people doing, like, similar kinds of things. Like, Caleb Porcio comes to mind with Alpine and and LiveWire, he does like he has the open source projects and then you pay for screencasts and I think he's got a component library now that he's working on too. And so like lots of like different variations of like the same main idea here. So I think that's, yeah, it's really interesting and I'm sure more people will follow with this kind of model.

Matt Perry:

I know. I'm excited to see what sort of things because, like, it really felt it feels, like, quite hopeless a lot of this. Like, not now, but, like, I I feel like I've over the years, I felt like I was ashamed that we need to do something like this in you know, I I have to be a framer or, like, the the React team has to be at Facebook or Vercel.

Matt Perry:

Like, I was ashamed that this is the way it is. But, like, with models like this, it's like there's a possibility for at least a few more like, this more projects can be self sufficient, which is which is nice.

Michael Thiessen:

And it makes the project better too because you're able to focus, you're independent, you're able to focus on all of these extra examples and things like helping people figure out how to use it in the best way.

Matt Perry:

Yeah, exactly. No, I already think because I feel like the motivations of what you're doing is more when it's like for your employer. It's just different. It's just different. And it's not like you know, it's nice to to do it for because you you and then you also get a bit more passion as well because you're like, well, this isn't my business now.

Matt Perry:

If I don't if this isn't good, I'm gonna have to find a job, like, a different job. Or I don't know. You you just you've got a lot more of yourself in it, and so you're excited to be finding things that resonate even if if it's an example or a feature or anything. Yeah. It's it's it's a a different mindset, and it's it's definitely brought the project back to life for sure.

Alexander Lichter:

Have you ever thought about other ways of monetizing motion? For example, like dual licensing, saying, if your company, I don't know, let's say business source license is a very common thing or like Faresource, what also was mentioned a couple of episodes ago. So basically saying, hey. Here, you can use it unless your company earns more than, I don't know, 10,000,000 average yearly or any recurring revenue, then you have to, I don't know, get a license or similar. Have you thought about something like that?

Matt Perry:

So I I really didn't wanna change the license promotion just because it's MIT, and I didn't wanna rug pull on anyone, which is why I said anything new, I'd you know, I'll do what I want. But, like, it's yeah. Anything that exists, like, I'll you know, we'll always remain MIT. So that there was that part of the con of the of the thinking, but then also with MotionPlus APIs, they're actually MIT. So it's really the documentation.

Matt Perry:

I wanted it to be like that because I just don't want people to feel like, oh, but if I buy it, can I use it in this sort of projects or this sort of projects? And a lot of these things, you buy the thing and it's like you can't use it for profession like you can't use it on this agency site. If you wanna use it on more than one site, you gotta buy a license for each of these things. I'm like, is nonsense. I just like, what I'm not like, know I don't know.

Matt Perry:

For me, it was just cooler or or more fun, like, not to have to think about all the licensing and just be like, if you buy it, just use it. See, you know, see you later. I'm I I haven't, like please don't, like don't just take the source code and whack it straight on a GitHub and say this is where. Do know what? The the don't be a dickhead clause, but that's like an implicit I haven't had to tell anyone or ask anyone not to do that.

Matt Perry:

And the other thing is like a lot of these bigger companies who might wanna sponsor motion you know, I I've been I'm talking to one company at the moment that might become a sponsor, and they've got this whole license check system that it doesn't work well with. And it's just like, this is complexity that I don't really need. Easier just to keep it like that and pay what gates all of the examples and the and the GitHub and things like that. Just make it obfuscate this as a product.

Matt Perry:

And then but the one thing that worries me is, like, the AI slash no codes generators.

Matt Perry:

Like, the more that they use motion essentially, they're sort of taking, like, users away from maybe learn a lot of I don't know how it works, but like there's something in that about how these people aren't probably gonna come to motion. Dev because they're getting the AI to do it all for them or likewise the no code. They don't even know that it's motion powering. Like most framer people, they don't know that motion is powering the sites. So while I want the motion core library to be MIT, there's something in like, is there some way that I can say to a no code, like if you wanna offer these APIs via your AI editor or something and it's one of these motion plus APIs that's gated or even do you wanna train your AI tool on all of these gated examples like that and then now you got like a really good like motion builder AI.

Matt Perry:

Mhmm. Yeah. I don't know. Is there something in being able to charge them like a font foundry would would charge the the design tools. Like, they'd be just coming up and and to me and be like, you give me 3 mil a year to offer this to your users?

Matt Perry:

Like, that's the sort of conversation they're having. I'm like, is there a fund I if it's 3 mil, but like like, I'm just saying, like, is there is there some way of licensing it with these sorts of companies? Not the whole thing, but like if they want to offer like yeah. Exactly. If they wanna offer split text, is there a way of like licensing that?

Matt Perry:

Maybe not. But I don't know. But it's just a thought that I've had because I yeah. I worry about these. I worry about AI.

Matt Perry:

Not in I think it's a net positive in terms very specifically speaking about coding, but, like, specifically talking about MotionPlus. I'm like, you know, is there a essentially, like, a deadline that I have to because after that, the AI will just be so good that now I'm

Alexander Lichter:

You don't check the docs. You don't take a look there. Just generate it for me.

Matt Perry:

Yeah. Exactly. But, like, I don't even need split text, I don't even need because, like, split text took me, like, a week to make. Would an AI make it in in much quicker time? Maybe.

Matt Perry:

Not yet. But I future.

Michael Thiessen:

I have thought of, like, smaller libraries that are just there for convenience, like these, like, little utils that you often build that maybe someone puts them into a library and you're like like Lodash, for example, or something like that, where it's like, I don't need Lodash anymore if I'm using AI cause it can just, like, don't need to have a pick method or whatever other thing from Lodash cause the AI will just like rewrite it in line and yeah. Or have it extracted into my own util. And then I have the code. I think that's probably going to happen at some point that like, it'll just like write the animations, but I think that's probably a long way off because it's quite complex and there's like all sorts of like performance optimizations and other things that you're dealing with, and it doesn't know what a good animation looks like.

Alexander Lichter:

Like, Lodash is probably also easier to replace than Motion or also other animation libraries as well. But sure. It could be that you like even say, hey, I'll take a bit of time instead of using something that's that's maybe gated. So like, okay. I try AI generate me something like that similar to that style.

Alexander Lichter:

It could be possible.

Matt Perry:

Yeah. Because that doesn't even need to work. I've got this thing, it's tested and we've got this and it works with these options. But you don't need it to do everything. You just need it to do the one thing you're doing and it only needs to do that without bugs.

Matt Perry:

So maybe that's like the bar is a little lower as well for the AI generation. But as someone I use cursor and so I find it a good litmus test of like am I doing something worthwhile? Like can the AI generate it for me? And if it can't, then I find that it's probably a good one. Not generate it for me, but do know what I mean?

Matt Perry:

Like, how helpful has it been when I'm when I'm making this? Yeah. If it's not been very helpful, then I feel, like, safe. Like, oh, okay. This is a good thing that people are gonna get value from.

Matt Perry:

If it does too good a job, then I'm like, this is like a yeah. This isn't

Alexander Lichter:

It's waste of time. Yeah. I can just, like, oh

Matt Perry:

Yeah it is a waste of time.

Alexander Lichter:

Yeah. No. That's a that's a good point, actually. That's a nice way of seeing that. I also think, like, the whole licensing part, just to come to that quick.

Alexander Lichter:

Like, I really like that approach of saying, hey. I don't wanna bother with, like, all also the the legal consequences and everything. Just say, like, hey. Look. No rug pull.

Alexander Lichter:

Keep it as it is. It was open source. It should be open source before. Sure. Like, gate certain parts, but then focus on the the documentation there and, yeah, avoid all the the hassle of the rest.

Alexander Lichter:

So I think it's really great to see. And

Matt Perry:

Yeah. Thanks.

Alexander Lichter:

Yeah. I'm I'm happy to hear that in a way. Like, not saying that any other approach is is wrong, but especially, as we said before, also with the the early access part that this is basically, you you found your way how to do that. And also, like, follow following along with the topic of, like, no code, low code, or, like, AI other companies in training could be super interesting, nice B2B opportunity that make things easier for you as well.

Matt Perry:

Yeah. That sort of thing. Yeah. So we'll see. We'll see.

Matt Perry:

Yeah. We'll see.

Alexander Lichter:

We'll see how it goes.

Alexander Lichter:

Yeah. Maybe one more thing because you mentioned Animejs, for example, GSAP and so on and so on. Maybe for everybody, maybe people heard that before, not tried out many animation libraries. I've seen a few.

Alexander Lichter:

How would you say Motion is different to AnimeJS or GSAP?

Matt Perry:

Yeah. I would say that the fundamental thing that makes Motion different is that it's built It's like a I'll call it the hybrid engine. And so with most JavaScript animation libraries, you're running everything in in a JavaScript. They've got their own custom animation runner. And the new animate has a WAAPI thing, but it's like a it's an entirely separate function.

Matt Perry:

Whereas Motion will select the best. So the JavaScript runners are actually better, I think, in terms of performance than WAAPI if you have a lot of animations. So we use that for most animations. But if something can be hardware accelerated, then we pass that to WAAPI automatically. Likewise, with the scroll animations, we use the scroll timeline if the options allow, but you'll never know which it's using.

Matt Perry:

It's just like a it's almost like a performance optimization. The same way, like, if you use WAAPI or CSS animations, you don't always know if they're hardware accelerated or not. They'll try to be, but, you know, for instance, in Safari, if you have, like, a certain repeat option, then it will de opt onto the main thread. Motion takes that same approach where if we can support it with hardware acceleration, then we'll do that. But we I've just released a refactor.

Matt Perry:

It's not a feature release as such, but it will allow me to do more things like, oh, this is actually a really complex value. It's got a bunch of CSS functions in it, a bunch of CSS variables or something. We can all animate this as CSS variable, but when you've got a string that contains lots of them, what I'll do is make it that we pass those to WAAPI so you can interpolate way more things than normal JavaScript's animation libraries. And again, like taking in the whole angle of simplicity, like this should be opaque. Like, you shouldn't need to know that we're doing this.

Matt Perry:

I think that's the fundamental. And also just I think the API is simple. And I think anime is pretty simple as well, whereas GSAP's a little bit more I don't know. It's just an aesthetic thing. I think that a lot of people love it, so there's that.

Matt Perry:

But for me, I just prefer the aesthetics motion. But then well, I said I would. But then it could feel horrible if I didn't.

Alexander Lichter:

Yeah it would weird

Matt Perry:

I'm just I failed and don't use it. I wouldn't use it. That could be the catch of the episode. But then obviously, you've also got Live Motion for View, Motion for React, which are like way like, these are both integrated into the libraries and way ahead of anything like there any I don't think there's any other animation library that offers such like deep integration and a native feeling API. You use it the same way that you'd use any declarative API and they're the stars almost, I think.

Alexander Lichter:

Sweet. For everybody who is looking into animation libraries or maybe already know some well, try out Motion. Give it a try, especially with Motion for Vue out there. The links to everything in the description, of course, as usual. And as it's open source, if you have anything, then, well, feature request an issue.

Alexander Lichter:

That's how it goes. It's all up on GitHub. Yeah.

Alexander Lichter:

I think then we can slowly but surely wrap up because we already talked for roughly an hour. And, well, we I think we covered Motion, not in its entirety, but we got a pretty, pretty good big picture here, I would say.

Alexander Lichter:

Matt, is there anything that we we didn't cover yet where you felt like, hey. Let's let's mention that because that that might be good to know.

Matt Perry:

No. Just to say thanks for having me on. I've had a great time, conversation, and yeah. So

Michael Thiessen:

a nice day, I You mentioned earlier in the show that you were planning on writing a book about your thoughts on UI and UX So maybe a future episode you can come back and like give us your hot takes on UX design and stuff and how to use animations.

Matt Perry:

Yeah. No. I'd be I'd be happy to. Yeah. I'd you know, I did because I don't think the book's getting written.

Matt Perry:

The problem is if I try and start a new book, I'll end up with a new API, so I I try not to

Michael Thiessen:

Yeah. Yep.

Alexander Lichter:

Then, yeah, then let's do the hot take episode of, like, here's what people do wrong with with animations with UI UX.

Alexander Lichter:

There there's probably lots to cover anyway.

Matt Perry:

Yeah, exactly. That's a good hour at least. Maybe we'll just publish the transcription as MotionPlus.

Alexander Lichter:

Yeah.

Michael Thiessen:

There you go.

Alexander Lichter:

Easy. There we go. Matt, last question from our side. Where can people follow you along if they're interested in motion and animation or maybe in the book which probably won't come out but probably some good takes?

Matt Perry:

So if you go to motion.dev, in the footer there's all the links, site to Twitter and Blue Sky as well if you're a Blue Sky person. So I'm on both of those. And so that's the best place.

Alexander Lichter:

Sweet. Also, we put them in the shownotes and description, of course, but also the link to motion death and everything we mentioned. Matt, thank you so much for your time, for coming on and sharing all around the animation, motion, and your journey. Thank you so much.

Matt Perry:

Thanks for having me.

Alexander Lichter:

Yeah. Hope to have you on again in the future, of course. And for our listeners, if this is not the most recent episode, you know what to do. Just continue listening and hope the other one is in the queue. Otherwise, well, put them on.

Alexander Lichter:

And if it's the last episode, well, then check out all the links we mentioned, check out the show notes, and, well, maybe also some other episodes because there are quite some good ones. Anyway, until next time. See you.