Animating the Web With Matt Perry: Exploring Motion

Welcome to Syntax. On this supper club, we're talking to Matt Perry. Matt's one of the brightest minds in modern web animation today.

After making Framer Motion and MotionONE, Matt has created some of the most, I'd say, most painless animation tools to exist in modern UI development. I've used a ton of these things, and let me tell you, man, Motion has always had some of the had some of the coolest quality of life features of any animation library. So welcome to the show, Matt. Oh, my pleasure. Thanks for having me on, Scott and Wes. It's, yeah, it's a pleasure to be here.

Yeah. Absolutely. I've been using your tools for a long time. I've done full tutorial courses on them, and I feel like I've done a lot of animation stuff. And I just wanna say, thank you for thinking about the API and just the slimmess of it all. Because do you remember before Framer Motion came along, what was it? React Motion? Was that the big one? Yeah. Yeah. The big React,

animation API.

Yeah. And they all just felt difficult. I don't know how I don't know if you it felt the same to you, but I'd look at these animation libraries and say, why couldn't it be simple, until, of course, I tried Framer Motion. So do you wanna give us some background on the Framer Motion story, when you started it, how you came about into this stuff in the 1st place?

Yeah. Sure. I mean, at this point, it's about 10 years since I started writing animation libraries. I guess it's, at this point, an addiction slash habit.

Yeah. I started with Node called well, I called it redshift to begin with, which is looking back quite unadvised.

And so I I ditched that pretty quickly and and renamed it PopMotion.

And Yes. It was through PopMotion.

I think I I wrote yeah. I I started writing spring animations and stuff like this.

And then when I came to use it in production with a React website, it was quite, like, using an imperative API in a decorative environment.

It's prone to you know, things are prone to break, and this site was breaking because of my library, essentially, of at least the way that I took it up. And so I wrote, pop motion pose, which was more my attempt to, like, bring that declarative nature of React into animation libraries.

And, actually, I remember you talking about it on the show. I was super stoked to hear. I just remember the other day, I was in the, I was in the gym listening to syntax, and and you started talking about pop up matrix. You you mentioned that it had a lot of plosives in the name, and, I thought, I've never said that out loud. It really does have a lot of plosives.

We talked about that was a shameless plug of mine or a a sick pic of mine in episode number 44, and then we also talked about it again pnpm episode number 46. So that's a really 2018. Man, that was a long time ago.

Yeah. I'm feeling it now. I probably look a lot less fresh faced than I did back then.

And, Wes. So and so I I wrote this library to make things in React essentially super simple. Like, I wanted it to be able for anyone to be able to use it.

And then, at the same time, Framer were making a, like, a prototyping tool that was based on React, and they needed an API that made it super simple to do animations because a lot of designers were using it. So, they acquired Pop Motion. I came to Framer to work, and I Node, Framer Motion here, which Wes, it's been amazing yeah. It's been an amazing 6 years, to be honest.

Yeah. And for the people who don't know, Framer was kind of like a when it first came out, there was a whole class of tools. It was like Figma, Adobe XD, Framer, and they were all kind of fighting for this same space.

But Framer, the big distinction was always that you get to code sooner. Right? That was, like, the big sell on Framer?

Yeah. Exactly. Like, you could go in there, hack the prey. It was a prototype and design, so which JS, like, kind of the unique spin.

At the time, you couldn't make any animations in the GUI. You had to do it all by code, and that's why it needed to be as simple as possible. Because even, you'd be like, some concepts like, React, they're not obvious to to a lot of people coming into coding for the 1st time perhaps. Whereas I think React is quite simple, and that's my bias and perception. But when you actually start user testing these APIs against people who aren't familiar with, TypeScript and certain other environments, like, it was it was quite eye opening. And it was nice as well because I always felt like PopMotion had more of a the original PopMotion had more of a Yeah.

Reputation for because I I was really keen on it to be able to do anything. It had more of a reputation of being, like, harder to use in GreenSock.

So I was dead set on the next API to be so simple that, like, anyone could use it. And now that frame has turned into more of a a site builder. The API usage is actually in Framer. It's like, hopefully, you can do everything you need to do just via the interface. So you can go in, add effects. With the layout animations, you can basically draw 2 different components next to each other and have them animate between each other even though they're completely different dumb hierarchies.

And that's been another fun part about working at Framer. Like, the demands that it places on the capability of the library is, is is so much higher than, than it would have been if I was just writing this on my own. So okay. So what is the status of

Framer Motion, Pop Motion? What is the status of these today? Because I I when we first started chatting, you mentioned that there was, some change happening.

Yeah. I I can announce, I guess. This is already out there, but Framer Motion is now independent, and I'm taking it, to be like a community based open source library.

It's just called MotionNow. But a lot of people ask for, Framer Motion APIs in vanilla JavaScript or other Mhmm. View libraries.

And, with this change, we're bringing a lot of those fun trailer motion APIs, to every JavaScript user. There's still a couple of things left. I know, like, a lot of people want, like, layout animations, which isn't there yet, but, it's a good Scott. And all the hybrid engine,

wacky powered goodness is there for for anyone to use on on any site now. Man, layout animations, I gotta say, would be very stoked if that were ever ever happen. Because I I you know, that was one of the coolest things where, Wes, I don't know how much you used these tools, but the layout animations was basically you warp applying a a wrapper around some stuff. And if the contents of that changed, the the wrapper and everything would just kind of animate and shift and grow automatically.

Really one of, like, the, most magical features I think I I had seen in an animation library, when you guys dropped that.

You also, at some point, came up with MotionONE.

My understanding is MotionONE is a Wes animations API library. Is that correct?

Yeah. And so that started really as, like, a side project because I didn't even know what. Like, I I I started wanting to write a book. Then in fact, this is how every single one of these projects has started. PopNotion exists because I wanted to write a book, about Wes animations, and instead I ended up writing a library. And it happened again.

I wanted to write a book, and I looked into Wappy. And there were certain, like, rough edges I was coming up against, and I felt like whenever I see things like that, like a rough edge or something that that I don't enjoy using, that to me, like, I just see library. I'm like, great. Well, how can I make a wrapper around this so I never have to worry about any of these details again? So with MotionONE, the idea was really to like, how much can I get out of the Wes Animations API in the smallest file size possible? How can I get spring animations? How can I get independent trans transform animations? How do we do that in this in, like, a, like, a tiny 3 kilobyte wrapper? But since then because it was my side project, I think if any any MotionONE users will attest, it hasn't really seen a lot of love over the past 2 Yarn, whilst Framer Motion has, like you know, it's it's sometimes the releases are, like, coming thick and fast, like, you know, multiple bug fixes a day. Yeah. Sometimes it's quieter, but there might be, like, a barrage of new features.

Motion 1's not really seen any of that. But in the meantime, Framer Motion has taken a lot of the innovations in Motion 1.

So the WAPI animations and the hybrid engine, that now exists in Framer Motion, and it's gone further as well. It basically took the scroll animations code and made it more performant and then laid in the ability to drop into scroll timeline API where the situation allows, like if the browser supports it and the the animation is able to be hardware accelerated.

And this approach, I it's been taken a few places in frame and motion.

So with this change, MotionONE is essentially deprecated even though all of the APIs are still there. They're just certain props are named differently. It but because it's been consumed into Framer Motion, this is now it's 1 library, Motion, and it's for vanilla and React. That's, so I understand that it's been a confusing, yeah, ride, but now it's just Motion, 1 library,

JavaScript, and React. Okay. So motion Scott dev. Okay. For anyone who has never used Framer Motion and is listening, I wanna peel it back a little bit and understand what it's used for as well as, like, the actual tech that's used under the hood because there's there's Wes animations API. There's there's CSS animations. There's keyframes. There's transitions. There's simply just updating CSS with JavaScript. So framework motion is a set of utilities or or motion is a set of utilities for adding animation to your your web application. Right? Like, some of the most common one being, like, layout animations change from Node to another or if you wanna, pop something out. Is that right? Is that fair to say? Yeah. That's exactly it. And it was,

really there to to shave off a lot of the pain points that you have for CSS. So for instance, animating something on mount, like, when you add it to a page, it's actually, like, kind of it's a kind of a pain. And I know that there's now the at starting style rule. Yes. But, obviously, it's not, like, super well supported even though I think it's a great great step in the right direction. But I just wanted to make it as simple as possible, Sanity, you know, initial equals this, animate equals that. Boom. Like, you Yeah. You load the component. It's done. Exact animations, Paint and React.

So there's APIs for that. And it's just it's just going through and addressing synchronizing you know, you can do a transition. You can do with CSS. You obviously can say, well, with this parent state, animate this child a certain way, but there's no real easy way to stagger those those animations. And so, frankly, that's another area where we to to the point where these are some of the first problems that I solved, and I kinda forget, like, how much it does or how much it swings away.

Yeah. Architecting in CSS is a very hard thing to do Wes oh, yeah. You can add a, like, a nice little hover effect, or when you add a class or something, you can animate it. But when you wanna have a bit more control over the thing, especially when your data is in in JavaScript land.

It becomes a little bit tricky to do that, and sometimes it's much easier. Especially when you're writing, like, a declarative language like React, it's much easier to use a library like this.

Framer Motion has, like, this, gesture recognizer system inside of it. You know, it's nothing yeah. I'm sure there's a lot more, advanced, like, multi touch handles or something, but it's more to get things like hover and press ESLint more like they do on an app. And this is another thing that I sort of forget about where the hover, gesture recognizer, which you think would just be a mouse over mouse leaf, but, it does certain little things where it all filters out certain pointers and, you know, so it won't do the whole polyfilled touch event.

So when you touch, sometimes the hover state triggers if you're using CSS.

Yeah. So it it's trying to, you know, smooth all those things out. And, again, I know you can do that in CSS, but, like, off the top of my head, I couldn't think of the API for it. It's like, you know, something that supports hover or contains that. Yeah. Yeah. And then hover, hover, and you just, like and you wrap certain code with that. And I just don't wanna write hover that many times. Like, I just wanna write, you know, on hover Scott. This is a real hover, while hover animate to this.

And that's kind of how I work. And it's also a bit like fantasy CSS, so there's a prop called while in hover sorry. While in view. And, it's just while in view, opacity 1. And so then it it attaches an intersection observer.

Likewise, there's associated events. I want those events in that element. Like, when it pops into view, I want to add, like, you know, listen add event listener in view. Like, I don't wanna write a pulled intersection further every time that I wanna do this sort of thing. So these are the smaller, like, bitty things that it tries to take care for you. That's good. And

Framer Motion uses like, how is it actually applying those those things? Is it just changing the CSS of the elements?

Yeah. It's mostly JavaScript. There's a few places where we change the like, a style tag, for instance, the positioning of the on, Sanity animations, we have, like, a pop layout prop, which will sort of, like, pop it out of the flow of the document.

That's using the style tag. But on the whole, we're amending we're running Wappy animations or we're amending the style attributes themselves directly.

One last 1 is wappy is the Wes animations API. Correct? Oh, yes. Sorry. Yeah. Yeah. The web animations API. I always write this. I'm like, I'll write wacky, and I'll be okay. I'll check. Don't worry. That that's why we're here. We're trying to distill the things down so everybody everybody gets it. That's great. Sorry. Go ahead, Scott. Back onto the Wes Animations API.

So you said the current version of, framer motion or or just motion now uses Wappy under the hood, and it's not just Motion 1 or the future version of it will? No. It said may Framer Motion has also been using Wappy for maybe

a couple years, I guess. Cool. I don't know. So what it will do is, like, detect a few things. Like, can this animation be hardware accelerated? And if it can, then it may it becomes a candidate for for Wappy. So, like, Sanity filter, create pass, transform, which we can accelerate these and definitely use Wappy because then we'll get promoted to a layer, and then the whole animation will run off the main thread, which is which is great. But there's a certain other like, there's certain features that frame emotion supports on motion now, that Wappy doesn't like, I think repeat delay is 1. So, like, if repeat delay is set, then it will Node opt onto the JavaScript, animation engine.

Wes. That's basically how it works today, and it's the same for the scroll animation stuff. Like, we detect, like, does the browser support scroll timeline? Okay. Well, we can use that. Does it is it have we been provided a a function or an animation? Because if we've been provided a function, we can still run out Scott timeline. We just need to do a different way. So it's all these different methods for just seamlessly switching between the most optimal engine at any given time.

Wow. Man, so you have to implement something like scrolling the scroll timeline twice because, like, the browser has the, like, scroll driven animations APIs now,

but they're not supported everywhere. So you have to just, like, reimplement it also in, like, listening for a scroll event. Yeah. So with the, a lot of math. Well, I mean, you can always do a fallback race, like, stuck on screen or something. But a lot of people don't Yeah. Like, if you're working for a that's, I see that advice given a lot, but, like, try explaining that to your client. Like, it's often you know, you just use a scroll function, and it will it will fall back Node deops where it has to. But it will use the most efficient way where it can. And it JS not finished yet, that one. Like, it does scroll timeline, but there's also a view timeline.

And the scroll function supports a lot of the same sort of, like, tracking elements within the viewport.

And it's gonna be great to, release a new version Wes, you know, if if it's possible, we use the view timeline instead.

Man. So why why don't you think, Web Animations API has gotten more traction overall? It's just because everybody's using abstractions of it. I I I tend to teach it sometimes, but it feels like a lot of people don't know about it. I think off the bat, there's a lot of gotchas. So people are used to I think okay. But this is a bias, but it's my mental model there. If I say to something, animate from 0 to 1,

that I'll animate 0 to 1, and I'll and maybe I'll receive, like, a a finished promise.

And and after that promise, the the thing that I animated will be at Sanity 1.

Likewise, if I interrupt that animation and I say, okay. We're halfway through, but, actually, I want you to animate back to the, you know, to to where you're at, then it should take the position that it's at and animate back to 0 or to its new destination. These are just like from my perspective, these are obvious behaviors that should exist, but they don't. So you have to so there's all these little gotchas that make it unpleasant to use out of the Bos, and, you know, it doesn't take much to to fix to quote unquote fix it, like the, you know, the current animate function, the mini Sanity function in motion, is just 2.5 k. But with that, you get fully interruptible animations.

You can Scott. And when you stop, it actually stops, you know, whatever state it's in when you you've stopped it. Likewise, you you animate 0 to 1. The animation finishes, it is now at 1. So there's there's certain things. I think just that is enough to bring it into the realm of, like, a like an easy to explain fun even a fun API. Like, I don't think it it just needed that little bit of salt and pepper, basically.

Man, I I gotta ask real quick. One thing that I've always admired about your work is the demos that you make. You know, a lot of animation libraries, I think they they really you know, the the demos or the examples, that's, like, such a key point on, like, a little bit of a wow factor. But your demos have always been really just beautiful.

Are you the designer of that? Are are is that is that your work? I don't wanna say yes too eagerly because I I don't know. And, first of all, thank you. Because I I actually was thinking the other day that I feel like my demo is a little Spartan, and, like, they can be a little, very nonrepresentative of and I know that there are demos out there like the App Store demo and the Apple Watch demo.

Those ones, like, I'm like, oh, they're nice. But then I've I've done a time where it's just like plain colors and and and very basic shapes that aren't necessarily representative of real UI. So that is something that I'm actively trying to like, I'm hoping now that I I I'm fully dedicated on on motion, that I have the time. So I've made, like, nice templates that, you know, right right off the bat, like, look nice. So I'm looking forward to to starting making my demos of those.

So, yeah, I think on the whole life designed them, because I the the, you know, emotional dev I designed took me a while, but, I back in the way back in the day, I was like a print designer. That's how I started my career, and then a web designer, and I only moved into coding a little later on. So, hopefully, I haven't forgotten everything that I used to know,

back then. I mean, even the aesthetic of everything, whether or not they're simple demos, I think they illustrate really well the techniques in a way that, like, gives you confidence because they're so smooth and they look good. So it feels like a big part of of what you do is performance.

Can you tell us a little bit about, like, what it takes to to, Node, like, test to get these libraries 60 FPS or whatever? But, also, like,

how much time? How hard is that? So going forward as well, just because I've become independent, all the animation like, motion still powers Framer, and it's gonna and Framer are the project's 1st sponsor, which is amazing support as well.

The nice thing about powering a design tool is that designers are obviously the most demanding people, and you've all you've we we've all, like, work with designers who are like, yeah, I want this. And you say, well, you can't already have that because it's not gonna it's not gonna, perform too Wes. And they go out, well, like, sometimes they'll go, okay. Yeah. That makes sense. I'll try and do it in the way that you suggested or, you know, not. But, anyway, like, that that conversation tends to be had.

But you can't say to framer, do this, and then framer says, well, I can't really do that because that's not gonna perform well because this and this. And sometimes we educate users, like, high blurs, get a little warning, and, like, don't do this because this is gonna be you know, this is gonna perform poorly. But on the whole, there's an infinite number of ways to de up to website.

So in general, what I'm saying, the nice thing about having Framer is that people are gonna do wild things, and you like, that's an amazing test ground, essentially, to write against. So you get these projects now and then that are really high demand, and so you can use that. You can take that away.

Run it in your dev mode, and you can just tinker with it to see. And the the other thing is that the layout animation calculations, like, they have a lot of more easily tested because it's testing, JavaScript sorry. Browse performance is, like, quite difficult. It's quite difficult to get, like, an isolated, consistent, reproducible device, like, yeah, to or environment, but there's certain things where like, certain calculations that just don't need to be done. And so the layout animation tree has, like, debugging, Node, like, debugging, tools where it will report how how many things are calculated, blah blah blah. Yeah. Wes so we can write tests where it's like, if you're given a tree like this, how many calculations did you run every frame? Because if it's more than this and something one of the deoptimizations sorry. One of the, checks has has failed or passed where it shouldn't have.

So just from the first principles, like, do less. Like, that that's a big source of it.

But when it comes to rendering, it does get more complicated. So it's it's more just iteration. I'm curious how how you actually, like,

actually test or how you reproduce a slow environment because I'm working on a new website right now that's using every new CSS property ever, you know, sticky, blending.

This is butter. This little trail that animates throughout the the website, and it's just butter on my computer. But I know that it's not gonna be butter on everyone's computer.

So I was like, I gotta, like, figure out how do I turn some of these things off when I do get to a device? And I could not figure out how to, like there's a Chrome DevTools has, like, a slowdown network request, but that's not, like, performance.

Right? So I I finally ended up figuring out that I can turn off hardware acceleration on Chrome, and that gave me enough of a sluggish website where I could then try to track the frames per second when somebody scrolled. But I'm curious if you have any other tricks. I couldn't find any information out there. Yeah. It's really tough because, like, there's no good way of emulating

the slow devices. And, basically, there's no you need to get, like, a like, a mobile or something just really chunky. Wherever you think that your lower end users are gonna be, that's kind of where you need to the the device that you need to to be holding and using to test these things. Because, like, Chrome, in, the you said next to the network throttling, you can also do CPU throttling, which is amazing. You can Node go up to 20 x now, which is also good. The M4 laptops TypeScript.

And you can you do need to, like, throttle it to to that extent to get a nice reproduction. But things you can't emulate are things like GPU memory, GPU bandwidth, GPU. So a lot of the GPU made it I didn't know that you could, turn off hardware acceleration. So that's nice to Node. But at the same time, a lot of the time, like, I'll manually like, because we have pathways to, you know, put it on Wappy or not. So, a lot of the times, that's where I'll do that. So it's good to know. Mhmm. Oh, okay. The problem's more like, have I made this layer too like, literally too big for the GPU to handle? Yeah. Like, that's a good one there, and it is especially easy to do in the design tool.

Or, like, is is the GPU just slow? So it will get harder accelerated, but that could have been worse. You Node? The situation where that's probably worse than just running it on the CPU. I don't know what situations they are, but I I suspect they exist. And yeah. So the the messy like, the messiness of of the device is kind of what you need.

But having said that, I we are talking about I wanna make, like, a performance API and put that into frame emotion, and we can use that so that people can, check the performance of the because we know how many animations we're running and how many animations we're running on Wappy, the frame rate that we're putting out at the same time. Yeah. So there's lots of metrics that we can collate.

And then finally, I think there is an API proposal that is about memory pressure, GPU pressure, CPU pressure, and using that device classes. And so by using some of those metrics in real time, like, what I wanna do essentially I don't know if I I don't know if I'll get around to this, but one of the things I'd love to be able to do is dynamically switch off certain classes of animation. Like, for instance, like, if if we find that we're in a really, constrained environment with the CPU, then we just disable everything that's not a Sanity transform click path. Like, that would be amazing. Like, yeah. Yeah. You Node? I can I can only imagine the bug reports and someone coming in and saying, hey? On the my NANSS device, this, this animation isn't working exactly the way I designed it, but I bet it was smooth. And if you want to see all of the errors in your application,

you'll want to check out Sentry at sentry.ioforward/ syntax.

You don't want a production application out there that, well, you have no visibility into in case something is blowing up, and you might not even know it. So head on over to Sentry.ioforward/ syntax. Again, we've been using this tool for a long time, and it totally rolls. Alright.

Oh, and, yeah, another little tip I have for anyone listening is Microsoft Edge has a new they have this new thing that's, like, the 3 d view where you can, like, look at z index, and it's kinda cool. But if you open that up, there's a tab called composited layers, and it will show you the layers that the browser thinks that it should be painting, like, when it puts something in its own layer. And then it will give you information on how often it's it's repainted, the and the memory that it's using, and it's kinda not not there just yet. It's it crashed on me quite a bit, but I was I was using it to try to debug how frequently something was painting.

Is that new, versus the Chrome DevTools layers tab? Because that'd be interesting because I've they've said that they're deprecating that because it's so buggy. So it might be that you're we're at the other end of that large cycle. It's not buggy because it's new, but buggy because it's old and and loved, which is a shame because I use that a lot as well. Yeah. I use large. Yeah. Let me, let me let me let me figure this out right real quick while we have it. Yeah. Layers panel's always been one of the cooler ones. I used to use it a lot to figure out why the heck my page was getting pushed beyond a 100%

width or something. You know? Or or just, like, just seeing what's off Canvas or if you're placing things off Canvas JS we used to have to do a lot, like, where those things were ending up. It's not the layers tab in Chrome. It's it's its own

Okay.

Thing. And I I found out about it from one of the devs who works on the Microsoft Edge Dev Tools. Aaron always gives me a hard time for using Microsoft Edge.

They're like, oh, whatever. I'm like, listen up. They're working They test their own dev tools. On the dev tools. Yeah. They don't have their own dev tools, but they've extended they've added, selector performance. They've added Tourist. Composite layers. They've added quite a bit for CSS performance, which I think is interesting.

I didn't know that. Thanks for the tip wise. Yeah. Yeah. Maybe they have the edge download to do.

No. This might be the thing that's Oh, yeah. Catch me.

Yeah.

Wes, look at you.

Microsoft, hire this man. No. Don't. Yes. You don't. Yeah.

Have you taken I know yeah. I mean, you obviously do so much work with animations, building so many libraries.

How many, like, other animation libraries are you checking out? Are are you the type that's, like, getting into it, seeing how other people are doing it?

Yeah. Yeah. I'd I'd I take it quite seriously, I guess. Like, I'd I'd dived into, like, greensarc, and I'm always interested to, oh, how are they doing that? Why is this faster there than it is in my thing? And, like, you know, you you uncover certain things that are kind of surprising and a lot of people don't need to care about a lot of the time, like coercing a number to a string, actually kind of expensive. So, you know, the number of times you can cut down on that, you're gonna get a quicker per frame per frame performance.

So this so there's loads of tricks you can learn like this. And and, likewise, ESLint interesting because you can you also know in advance, like, when something's gonna be slower in another library, you'll look at something, you'll go, I bet that's slower in in theirs, and you test it, and it is. And, likewise, you you'll see something they did, and you're like, I bet I bet that's where they got me on on that thing. And Animate JS is another JavaScript animation library, and they're launching in January, I think, the new v four, which is sponsors only at the moment, which I haven't I just haven't got around to checking out, but I really wanna, because they're doing cool things with, I say that is he. There's literally 1 person doing it. Although, I I always used to appreciate the compliment of being referred to as a team. Yeah. Yeah. A fair party's kinda like, it's just me.

He's doing additive animations, which is kind of nice. I do I've never really we do use some reframer.

So when you add multiple effects, we could sort of blend them all. But under the hood, it's using, like, internal APIs, and, it's just never I've never found a nice way to do them. But, anyway Yeah. Maybe this would be that nice way.

Interesting. Did you ever take a look at, like, how, like, Svelte is doing animations?

Have you ever dove into any other frameworks? I know you're you're pretty heavy in React land. Right? Yeah. I'm I'm I'm probably too deep, in React land. Yeah. The only thing that I've know I've I've I follow Rich Harrison. Like, I've seen his like, sometimes he'll tweet about something that's quite interesting and something that he's done. Like, for instance, he synced I think he's seen something around syncing animations that are on the main thread and using the JavaScript animation library, to Wappy by using, like, polling. I think it's maybe they're polling the current time or something, which we have our own synchronization methods. But, it's always interesting to see, his approach because yeah. I mean, so it's felt JS there's something that I haven't delved delved too deeply into it. Yeah. But I can tell there's something there because how much love you can tell because it's the people that love it. They they they express that love without having to be prompted, and you can see that the the same communities have this, like, buzz around them JS felt. So, obviously, one of those. But, you know, now that, motion's independent and I have time you know, if it's something that's, you know, needed or wanted, then I might look into, you know, Svelte integrations. Maybe nothing it might might not be as extensive as as as deep as the motion component, but I think that this I I was, looking at doing a Vue, like a little tutorial about doing, using the Sanity function with Vue. And, I already like Scott, oh, well, there there's a library. Like, there's a and it's not like I'm not a full on motion component, but it is like, oh, this makes it nice to do, like, scoped animations within within Vue. So maybe there's, potential for for those sorts of things. Here's another one. I mean, you had mentioned

that string to was a string to number? Coercion was was expensive.

Yeah. The other one around. So that you'd much be able to do, like, Wes, like, 0 plus pixel.

You're kinda coercing the 0 into the string.

I'm curious about, like, what other things are unexpectedly expensive, but also, like, what tools you're using to identify those, like, micro optimizations.

Yeah. I try I try to stay away from micro optimizations and more build up a first principles like this is just slow because obviously kind of thing. So, like, deconstructing first principles? Yeah. Like, it's Scott not really because I use it. It's one of those smart words that I like to use.

In my head, if you're unsure about something, there's like a set of sort of fundamental truths that you you at least believe.

And from there, you can rebuild, like, using logical steps, like like a correct outcome or decision. Like, it's a decision making tool for me. So that what it actually means in science and math, I can't tell you, but that's what it means to me. And so, for me, like, the the fact that changing data types like, as far as far as I know from from lower level languages, like, it's usually like a big to do. Like, the CPU JS getting very involved. You're you will have to write manual code. Well, if that's true, then it feels like in JavaScript, it should be the case that it's, that it's slow to to stuff a number into a string even though to Wes, it's presented as just like an at or a tag string, like, which makes it super easy to do. And and for most people and most things, it's fine. Like, I do it all the time. But if I'm writing a critical path in the library, that's when I try and stay or at least minimize, like like, here's this is the moment we do the string concatenation. It's one thing, and we do it all at once. So that's all. Mhmm. Yeah. That that kind of stuff bugs me a lot Wes people have, like, rules about that that type of thing over, like, actually testing it,

because even with, like, CSS has, right, there's there's a potential, slowdown on your website if you were to put a CSS has too high. Like, on if you say, like, body has this thing, anytime the DOM is touched, then it has to recalculate and go through all of the elements and make see if it it matches one of those. Right? And and somebody posted that, and and now every time you post, CSS has everybody, that's super slow. Gotta watch out for performance. And, it's really frustrating because it's like, well, here I am using Microsoft Edge DevTools and actually measuring it. And I always I I always like to tell people, like, it's good to know about these things, but it's tools over rules. Right? Measure it measure it yourself and see if it's actually slow before you start fussing over that type of thing.

Node 100%. And, like, I spent a lot of time in the performance monitor, before sorry, performance tab. I only just discovered the performance monitor for fairness, but you can, like, delve into slow things in your Node.

And it's only then, really, that I'll that I'll change things. So especially if it if it affects the readability. Like, I do I feel like readability always first. I'm a little softer when it comes to so here's another one that I'd I I don't do as a rule. Like, this is one that I actually never do because a lot of my code runs every frame. Like, I won't run a a 4 each loop with an inline function. If I ever have to use for each, I'll pre assign or pre bind the function to something else. And that did bite me once because I remember in, the PopMotion days, I had a nested for each, which is easy. You Node, it's easily done in sometimes you need a nested loop. So now I tend to either do the prebound functions or I'll write of just a normal plain for loop. Ah.

But I did have this nested. I was like, why is everything so slow? And they I'd I'd narrowed it down to just this, nested for so you can imagine every iteration of this loop. New functions, new objects, new you you're building a lot of new assignments, and that's it's just slow.

Because a lot of my code is per frame, I do care about them, but on the whole, don't care about them. Like, if it's a render a rerender and you're making a new function every every render, then, as long as that's not triggering, like, some further down, component to rerender, then, yeah, build we should make a function. It's fine. Yeah. It's it's a whole lot different. So literally 1 render versus,

what, a 100 times a second, you're doing it to get a 100 frames a second. That's pretty crazy. Do you have a special monitor to make sure you get a specific frame rate, or or do you run it on, like, what? Because I've got I think my MacBook Pro does a 120, and my main monitor does 60. And then I also have, like, a older one that does, I don't even know this, but it does 30, which I thought, wow, that's lower than I thought it would be.

Yeah. Because it's a consistent frame rate, everything probably looks really smooth. Yeah. And then you're like That's the thing. It's consistent. That's good. And that's another thing that I thought with this, like, adapt just to back a second. With the adaptive performance thing, like, maybe you just start dropping every other frame. Like, that might be interesting because, like, if you need that extra time rather than selectively stopping animations, what if you just did them at 30 frames a second? That would feel a lot smoother than than running these things at 60 and Node dropping a bunch of frames and hitting, like, you know, fluctuating frame rate. But, no. And to answer your actual question, I don't have a special one. I said, I'll just use MacBook, because JS you say, it's like Wes frames a second. But I feel like Safari only very recently or maybe still hasn't run animations at Wes even on a MacBook screen.

So yeah. Or maybe it's it could be Wes animation frame. But, yeah, it's a long standing issue of mine. The I mean, you are getting that 120 frames a second, but Safari, you're at least until very recently, you you weren't. And that can make it difficult to because you want to put it to its test. Like, what's the worst situation this is gonna run-in in Safari? Like, 120 frames a second. Right. Well, like, can, you know, can I run it at that? Like, I don't know.

Yeah. That was a, one of those bugs that you opened, like, 5 years ago, and you get your period. If you poke your head in, it's, like, hard to open. Oh, not so bad. Yeah. I just I hate Totally ignore it. I hate hitting those Wes you Google for something, and you see a bug that's been open for, like Yeah. 8 years. You're like, ah. 2017. Not holding my breath. Yeah. Especially when it was you that opened it. Yeah. Yeah.

Yeah. No kidding. Have you, this is an off the wall question. Have you gotten into graphics programming at all, given your your background?

No. I I, I mean, I have, but not like deep. So, like, I've I've worked around with, some shady stuff that, I can't remember his next last last name.

Matt, there's a guy called Maxime on Twitter who I followed for a long time. What a personal site that guy's got. Holy cow. And what a journey as Wes. Because, Matt, if you if you go, Maxime Heckel, h e c k e l, on Twitter or x, whatever people comment these days, he he really only started learning, as far as I could tell, the shader stuff, like, a year or 2 ago.

Yes. I have so so much respect for people who just pick something up like that, and then in a year or 2, they're like the domain experts. Like, it's, yeah, it's it's super impressive. The stuff he's doing with shaders and the way he can explain how he's doing these things and with these complex mass functions.

That I had someone that's not from a mathematical background, someone whose wife, who is a mathematician, had to juggle through me, learning matrix transforms out of a manga guide to matrix transforms and still struggling. Literally, a comic book couldn't teach me these things.

He he's great at, like, explaining those.

It's unbelievable.

Node of the top 10 blogs for me the blog is incredible. The site is incredible. It definitely made me pick up graphics, programming, not that I've done anything cool with it. But it's a whole different world because what your your code is running on every pixel, every frame, it's so bizarre to, the way you have to think about it. You're thinking about every pixel at once. And it this code is running on every pixel.

What do I need to do for that specific pixel based on its position? Here's, before we, you know you know, move into, like, closing things or anything like that, what does the future of motion look like given that now it's yours? You you have what? Greenfield in front of you. Like, what's the future? Where do you see this thing going?

Yeah. It's kinda mad to think about, to be honest, because I I like yeah. The it's almost like the possibilities are not in a bad way, but, like, too endless. So it's not a question of what I'm doing next. It's what do I do first. And Mhmm. A lot of that's gonna be driven by the Sanity. Like, you know, I'm open for sponsorship. So, now that I need, need an income and, I think a lot of it will be listed to sponsors and what they're after. So I always get requests for Vue, but I've never seen the libraries that I write for it, like, take off that much. But if the sponsors want it do you know what I mean? I'd say it's gonna be a bit of a conversation, there. And I want to take the principles of motion. Like, I wanna take the principles of both frame of motion and motion Node and and bring them together, essentially. So that means writing finding more ways to exploit browser APIs and get them to do more things for the smallest file size possible. So, like, I already mentioned view timeline, but, obviously, there's few transitions.

Can they like, I think some people think that there are a different like, they're an alternative to layout animations.

The new docs explain why they're not really if you go on the layout animations page, but they're complementary. And, like, we I write a view, transition feature in in framework called page effects.

And some of those effects you can only do with view transitions. So the the it's more of an end for me, and I'm thinking, can I make layout animations and view transition

API work together? Like, is there something there? I don't know, but there could be. Can we dive into that a sec? Like, what is the difference? So a the view transition API, I did a little video on it where I had a CSS grid, and I took a video, and I cut the video into 16 grids. And then I I hit a button, and it would randomly shuffle the the order of the elements in the DOM. Right? And and when you click that button, it just immediately snaps too. Mhmm. But if you if you start a view transition, shuffle them, then they will animate, from one place to another.

And you're right. It's it's somewhat limited in in terms of what you have access to, but, like, I'm curious to hear your thoughts on on what the differences are.

Yeah. I mean, for me, what it's really good at is, like, anything like, you Scott play to its strengths, so it's it's really good for full screen transitions. So crossfades, wipes, you can do all sorts of things of, like, masks. And the other nice thing, it it because it's like a unique architecture where it's taking actual snapshots of these elements and popping them out of the page, you can do things on a per matched element basis Wes you can, like, crossfade things in a in a unique way. Or maybe you can you can do something like, say you had a element that is static.

In my head, I'm thinking of, like, I don't know, like, you've got a picture of a cartoon character and you're swapping the background.

They're in a beach. They're in a shopping mall. You could, like, animate the scale of the person or animal or whatever cartoon character you want Mhmm. Up off the page, wipe the background, and then have that zoom back in.

Those sorts of effects aren't super easy to do when you're animating the DOM itself.

JS that in certain zed index issues as Wes? Because everything the nice thing about view transitions, it runs completely on top of the everything on your page, so you don't get these, these zed index issues when you're, like, swapping elements around or whatever. But like you say, they they can't be interrupted.

They're kind of full screen by default. It takes a lot of work to coerce them into being, like, micro interactions.

And even then, they're pretty bad basically for that use case.

Whereas layout animations, like, they do all sorts of things that are completely tailored towards micro animations.

They work on the DOM itself, which is in in the case of, like, a toggle switch. A good thing that it can be interrupted.

And the other nice thing is you can use, like, mismatched, easing curves and durations and delays.

Whereas if you had, like, a a a nested 2 boxes in a view transition, they they were nested, and they both they both had matching IDs in each transition. And you tried to animate the parent over here, and the child would stay over here. This is a delay.

I'd say I realized this is this is I've I can see myself, and you can see me. But if you're just listening to this, I'm holding up my hands to illustrate that there are boxes here enough for across the screen. But, yeah, essentially, the child will will be left and, like, stuck on screen where it was left behind by the parent. Whereas with, Node animations, like, the parent will move with the child even though the child hasn't started animating yet. And then when its animation starts kicking in, it will move relatively to its parent. So there's a lot of things like that which we handle. But like I say, it's it's because it's an and, not a nor, that I get excited. I'm like, oh, I wonder what you can do. Can you mix these things? Like, or even just so that it JS an API around for your transitions to smooth out some of those edges enough.

Yeah. That's what I'm thinking at the moment.

That's good. I I'm excited that this is basically you're figuring out the hard parts.

And when the APIs are usable, you'll use them, and and when not, you won't use them. And I like that kind of library Wes I just get to use it.

Yes. Right. Somebody much smarter than I, has figured out what parts to use and and where.

Yeah. Hopefully, people, I think, have to run into this stuff once.

And that person's me. And Yeah. And, Node as Wes. The bruises are on my face. Again, if you're listening to the audio, you can't see my face. It's covered in bruises, from running headfirst into these, these problems.

Yeah. I mean, that's kind of what because I don't wanna I don't wanna handle them again. So that's the sort of the driving force. Like, whenever I run into these things, I don't wanna do this again, and it's an interesting problem.

How do I package the solution in a way that people want to use it? That's kind of the driving goal, like, for me. Yeah.

Nat, this has, been really cool, especially because I've been I've been utilizing your work for so so long. It's it's been great to hear all the stuff about it. And, honestly, I'm really stoked for you to go out in your own here, and I I can't wait to see it. Not not just selfishly that I get to use your libraries again because, I didn't use React.

So now, like, the investment in more JavaScript heavy APIs is a good thing for me.

But, let's get into the part of the show where we talk sick picks and shameless plugs. A sick pick is just something that you think JS cool, you enjoy. A shameless plug is, your chance to just share with everybody what you wanna plug.

Cool. Okay. Well, my sick pick is, grime music, which is a, such under well, it's yeah. It's like, how would you describe it? It's like an offshoots. Oh, yeah. Node don't wanna get into this, but it's like an offshoots, like UK Garage, German Bos Yep. With MCs.

And, I feel like it never really took off in America, and I think it's a shame because it JS, first of all, the best part of it happened when America was going for its mumble rap, face. And, also, there's just some, like, super inspirational people in the scene, and I wanna specifically talk about P Money and Getz.

GETT, g h e t t s. They're amazing, and they've been going at this thing for 20, 25 Yarn. And that work rate and longevity on something that not hasn't always felt like super popular that they know is is amazing. And I know it's amazing, and I feel like those are the people. They're making, hopefully, music for people who appreciate that it's amazing and for themselves. And that's kind of like, I wanna do something that people enjoy I enjoy and that other people enjoy, and, I just get just keep just keep going. And so yeah. I did the gets. Yeah. Oh, they're they're incredible. There's plenty that I could I could talk about, but they they are, for me, the,

the 2 best. I I think Dizzy Rascal, with Dizzy Rascal had that fix up Look Sharp that popped off here, and then Stormzy was kinda popping off. Is Stormzy considered grime?

No. I I think that he's he's grime adjacent, like, for sure. I think he's a grime.

Yeah. He's definitely had some and he can be amazing on grime as well. He he really can. But but, yeah, I'd I'd stick with, who's the 1st person of Disney Rascals? Yeah. Yeah. Yeah. I mean, this 1st album is incredible, so that's also a good one to check out. And, sorry. What was the other thing I was asked for? The, shameless plug. Just feel free to plug. Oh, this is an obvious one, isn't it? Like, yeah, I'm gonna go for motion.dev, specifically motion.devforward/sponsors.

But also just in general, please check out the, the library. I've got some cool things coming up. I've got, like, a new courses page coming out, which is collaboration with people that you will recognize and hopefully a merch page soon after that because I need to make a living. So and I I've been digesting certain pieces. I'm like, I basically, I don't wanna sell anything until I'd wear it. So when you see a little motion logo just there, then you know that I found the the thing that I'm gonna sell. Nice.

Yeah.

Everybody go do that because, you know, we've been really high on this lately. Century's been really big on this lately.

Support the open source projects that you use. It's important.

Support the open source projects that, you know, make our lives so much easier, and Motion is certainly one of those. So definitely head to the sponsor's page.

Sponsor Matt, if you can, you know, ask your company to,

the the work has been amazing. So thank you, Matt. Oh, I really appreciate it. Thanks, Scott. And I appreciate, you know, the love over the years as well. Like, I it's it's been noticed, and I really I do really appreciate it. Yeah. Of course.

Wes, do you have anything else? I think that's it. Thanks so much for calling on, and we'll catch you later. Thanks again.