Animating the Web With Matt Perry: Exploring Motion

How do I package the solution in a way that people want to use it? That's kind of the He he's great at, like, explaining those.

bad basically for that use case.

the 2 best. I I think Dizzy Rascal,

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.

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.

ask your company to,

driving

UK Garage, German Bos Yep. With MCs.

wipe the background, and then have that zoom back in.

Yeah. Hopefully, 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.

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,

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.

with Dizzy Rascal had that fix up Look Sharp that popped off here, 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.

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,

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.

over here, 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, methods for just seamlessly switching between the most optimal engine at any given time.

but, obviously, there's few transitions.

such under well, it's yeah. It's like, or we're amending the style to be so simple that, like, anyone could use it. And now 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 it's,

And

That's good. I I'm excited that this is basically

And when the APIs are usable, you'll use them, and and when not, you won't use them. And I

or even just so that it JS an API around for your transitions to smooth out some of those edges enough.

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

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

And the other nice thing is you can use, like, mismatched, 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, Yeah. It's kinda mad to think about, to be honest, because I I like yeah. The it's almost like the possibilities all the animation like, motion still powers nature of React into animation libraries.

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

And, I feel like it never really took off in America, and I think it's a shame because it JS, It's just called MotionNow. But a lot of people ask for, Framer Motion APIs in vanilla JavaScript or other Mhmm. View libraries.

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, finding more ways to exploit browser APIs 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 page, but they're complementary. And, like, we I write a view,

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.

Support the open source projects that, Can you tell us a little bit about, like, what it takes to to, Node, like, test to get these libraries really just beautiful.

But also CPU throttling, which is amazing. You can Node go up to 20 x now, which is also

where it's taking actual snapshots on, Sanity animations, we have, like, a pop layout prop, which will sort of, like, pop it out of the flow of the document.

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, 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.

grime music, which is a,

where it was left behind by the parent. Whereas with, Node animations, like, So, yeah, I think on the whole life designed them, there. And I want to take the principles In my head, I'm thinking of, like, feature in in framework called page effects.

I think a lot of it will be listed to sponsors and what they're after. So I always get requests for Vue, that 120 frames a second. Right. Well, like, can, you know, can I run it at that? Like, I don't know.

you're figuring out the hard parts.

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 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 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, 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,

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

like that kind of library Wes I just get to use it.

transition So I was dead set on the next API 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? and that's it's just slow.

and they've been going at this thing for 20, 25 Yarn. And that work rate and longevity 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 these are the smaller, like, that I like to use.

problems.

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

easing curves and durations and delays.

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 Matt has created some of the most, the big distinction was always that you get to code sooner. Right? That was, like, the big sell on Framer?

Stormzy was kinda popping off. Is Stormzy considered grime?

micro animations.

then they will animate,

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

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 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.

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.

Those sorts of effects aren't super easy to do

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.

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,

and get them to do more things for the smallest file size possible. So, like, I already mentioned view timeline, like, ah. 2017. Not holding my breath. Yeah. Especially when it was you that opened it. Yeah. Yeah.

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

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

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 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,

shuffle them,

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

GETT, g h e t t s. They're amazing, So when you add multiple effects, we could sort of blend them all. But under the hood, it's using, like, internal APIs,

Cool. Okay. Well, my sick pick is,

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.

from one place to another.

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 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 1 library,

Sponsor Matt, if you can, you know,

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, 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,

constrained environment with the CPU, 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.

switch off certain classes of animation. Like, for instance, like, if if we find that we're in a really,

on

So you said the current version of,

triggers if you're using CSS.

So when you touch, sometimes the hover state very nonrepresentative

No. I I, before sorry, performance tab. I only just discovered the performance monitor for fairness, but you can, like, delve into slow things in your Node.

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,

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

reproducible which we have our own synchronization methods. But, it's always interesting to see, an isolated, consistent, and the child would stay over here. This is a delay.

but on the whole, 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?

Node of the top 10 blogs for me

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,

because even with, like, CSS has, right, there's

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 And even then, they're pretty 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, proposal from running headfirst into these, yeah, it's it's super impressive. The stuff he's doing with shaders and the way he can explain 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 is 1. So, like, if repeat delay is set, then it will Node opt onto the JavaScript, like, using an imperative API in a decorative environment.

further down, I need to make a living. So

like, Svelte is doing animations?

The nice thing about powering a design tool is that designers are obviously the most demanding

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/ string to was a string to number? Coercion was was expensive.

Because a lot of my code is per frame,

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, So I was like, I gotta, like, figure out

He's doing additive Because if it's more than this and something one of the deoptimizations 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

of motion look like given that now

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.

What do I need to do for that specific pixel based on its position?

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

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 JavaScript sorry. Browse performance is, like, quite difficult. It's quite difficult to get, like,

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

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.

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, animation 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, Node, the idea was really to Motion, 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 is about

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

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, like, a performance API and put that into frame emotion, and we can use that so that people can, animation where the situation allows, like if the browser supports it and the the animation is able to be hardware accelerated.

now

Or, like, is is the GPU just slow? So it will get harder accelerated, 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.

syntax.

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

memory pressure,

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

Oh, and, yeah, another little tip I have for anyone listening is Microsoft Edge has a new

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

language like React, it's much easier to use a library like this.

by using, like, polling. I think it's maybe they're polling the current time or something, on something that not hasn't always felt like 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.

good. The M4 laptops TypeScript.

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,

It's unbelievable.

painting, like, when it puts something in its own layer. And then it will give you Framer Motion uses

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

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, 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.

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

Man, I I gotta ask real quick. One thing that I've always admired about your work is

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, GPU pressure, CPU pressure, and using that device classes. And so by using some of those metrics Wes. That's basically how it works today, Yeah. Sure. I mean, at this point, it's about 10 years since I started how he's doing these things and with these complex mass functions.

to make sure you get a specific frame rate, or or do you run it on, like, what? Because I've got

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?

that, I

Wes, look at you.

it feels like a big part of of what you do is performance.

versus

how often it's it's repainted, the and the memory that it's using, and

do this, and then framer says, well, 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, And that person's me. And Yeah. And, Node 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.

what does the future

calculations, 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, 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,

Here's, before we, you know you know, move into, like, closing things or anything like that,

on Chrome, and that gave me this thing,

there's like a set of sort of fundamental truths that you you at least believe.

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.

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.

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

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

Interesting. Did you ever take a look at, like, how,

blending.

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% I wanted to write a book, and I looked into Wappy. And there were certain, like, rough edges I was coming up against, I think I I wrote yeah. I I started writing spring animations and stuff like this.

they've added,

Right? So I I finally ended up figuring out that I can turn off hardware acceleration

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

yeah. I mean, so it's felt JS there's something that I haven't delved And then finally, I think there is an API Heckel, I don't know, like, you've got a picture of a cartoon character and you're swapping the background.

how do I and it will show you the layers that the browser thinks that it should be

attributes themselves directly.

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

That's using the style tag. But on the whole, we're amending we're running Wappy animations 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.

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, The new docs explain why they're not really if you go on the layout animations you can do things

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,

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.

So in general, what I'm saying, the nice thing about having Framer is that people are gonna do wild things,

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

Wow. Man, so you have to implement something like scrolling

if I interrupt that animation

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

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?

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

JS is another JavaScript animation library,

They're like, oh, whatever. I'm like, Okay.

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

it's really frustrating because it's like, 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.

a slow environment because I'm working on a new website right now that's using

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, And, with this change, we're bringing a lot of those fun trailer motion APIs, this is now it's 1 library, specifically motion.devforward/sponsors.

But having said that, I we are talking about I wanna make,

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

Wes even on a MacBook

that But,

You you have what? Greenfield in front of you. Like, what's the future? Where do you see this thing going?

a a 4 each

potential for for those sorts of things. Here's another one. I mean, you had mentioned So h e c k e l, on Twitter

So this so there's loads of tricks you can learn like this. And and, likewise, but now it's just Motion, API.

I mean, I have, but not like deep. So, like, I've I've worked around with, some shady stuff to matrix transforms and still struggling. Literally, a comic book couldn't teach me these things.

Yeah.

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, these can't remember his next last last name.

to Wappy screen.

animations, is just 2.5 k. But with that, you get fully interruptible animations.

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, 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, and I say, Is that new, that made it super simple to do animations because a lot of designers were using it. So, when you're animating the DOM itself.

I'm curious about, like, what other things are unexpectedly

Framer Motion has, like, this, gesture recognizer bitty things that it tries to take care for you. That's good. And No. This might be the thing that's Oh, yeah. Catch me.

it's yours?

system inside of it. You know, it's nothing yeah. I'm sure there's device, like, yeah, to or environment,

Node 100%. And, like, I spent a lot of time in the performance monitor,

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

Yeah. Architecting

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

anytime the DOM is touched, then it has to recalculate

framer motion or or just motion Yeah. Absolutely. I've been using your tools for a long time. I've done full tutorial courses on them, and I feel like

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.

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

had to juggle through me, learning 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 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,

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 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.

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

matrix transforms people in the scene, and I wanna specifically talk about P Money and Getz.

how frequently something was painting.

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 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? 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 Yeah. It's mostly JavaScript. There's a few places where we change the like, a style tag, for instance, the positioning of the first of all, the best part of it happened when America was going for its mumble for me, like, the

someone whose wife, who is a mathematician,

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.

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.

you you weren't. And that can make it 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.

But you can't say to framer, 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, his approach because

selector performance. They've added Tourist. Composite layers. They've added quite a bit for CSS performance, which I think is interesting.

if you're unsure about something, 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.

That I had someone that's not from a mathematical then I might look into, you know, Svelte now that I need, need an income and, of and I know that there are demos out there like the App Store demo and the Apple Watch demo.

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 you can you do need to, like, throttle it to to that extent which is kind of nice. I do I've never really we do use some reframer.

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.

fun even a fun API. Like, I don't think it it just needed that little bit of salt and pepper, basically.

60 FPS or whatever? But, also, like,

that's super slow. Gotta watch out for performance. And,

always first. I'm a little face. And, also, there's just some, like, super inspirational

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

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 people, Matt, there's a guy called Maxime

identify those, like, micro optimizations.

Likewise, goal, like, for me. Yeah.

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

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

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,

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.

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 just in general, please check out the, Wappy doesn't like, I think repeat delay like, they have a lot of more easily tested because it's testing, 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, 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,

I think my MacBook Pro does a 120,

expensive, but also, like, what tools you're using to

you know, needed or wanted, Paint and React.

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,

here I am using Microsoft Edge DevTools and actually there's a potential,

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, he he really only started learning, as far as I could tell, the shader stuff, like, a year or 2 ago.

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 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.

animating something 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, writing animation libraries. I guess it's, at this point, an addiction slash habit.

out of a manga guide

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.

syntax. Again, we've been using this tool for a long time, and it totally rolls. Alright.

information

sorry. One of the, checks has has failed or passed where it shouldn't have.

actually test or how you reproduce

And it's only then, Yeah. So it it's trying to, I do care about them, background,

slowdown on your website if you were to put a CSS has too high. Like, on if you say, like, body has

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,

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 you know, so it won't do the whole polyfilled touch event.

back to 0 or to its new destination. These are just like or x, whatever people comment these days, the Chrome DevTools layers tab?

every new CSS property ever, you know, sticky,

only very recently or maybe still hasn't run animations at And and after that promise, the the thing that I animated will be at Sanity 1.

Framer, and it's gonna and Framer are the project's 1st sponsor, which is amazing support as well.

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.

measuring it. And I always I I always like to tell people, like, it's good to know about these things, but it's

like, how much can I get out of the Wes Animations API Yeah. That's what I'm thinking at the moment.

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

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

the the wrapper and everything would just kind of animate and shift and grow automatically.

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

pop something out. Is that right? Is that fair to say? Yeah. That's exactly it. And it was,

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,

and I felt like whenever I see things like that, like a rough edge or something that that I don't enjoy

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 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 it's for vanilla and React. That's, so I understand that it's been a confusing, At the time, you couldn't In my head,

based open source library.

it's a good Scott. And all

using, and you like, that's an amazing test ground, essentially, engine.

yeah, ride, 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.

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

in Motion 1.

code and made it more performant and then laid in the ability to drop into Yeah. Like, it's Scott not really because I use it. It's one of those smart words Can they like, I think some people think that there are a different like, they're an alternative to layout animations.

library. Is that correct?

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.

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, You're kinda coercing the 0 into the string.

was basically you warp applying a a wrapper around some stuff. And if the contents of that changed,

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 the scroll timeline twice because, like, the browser has the, like, scroll driven animations APIs now,

My understanding is MotionONE is a Wes animations API you'll want to check out Sentry at sentry.ioforward/

scroll timeline API

most magical features I think I I had seen in an animation library,

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.

the hybrid engine, 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

when you guys dropped that.

Really one of, like, the,

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 Framer Motion,

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, 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, 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 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

really there to to shave off a lot of the pain points that you have for CSS. So for instance, wrapper? 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 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

Motion 1's not really seen any of that. But in the meantime, Framer Motion has taken a lot of the innovations 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 And then when I came to use it in production with a React website, don't care about them. Like, if it's a render a rerender and you're making a new function every every render, then,

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, 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.

which was more my attempt to, like, bring that declarative

it was quite, how much time? How hard is that? So going forward as well, just because I've become independent,

And Yes. It was through PopMotion.

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

But Framer,

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.

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 as long as that's not triggering, like, some of these elements and popping them out of the page, new you you're building a lot of new assignments, 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,

than it would have been if I was just writing this on my own. So okay. So what is the status of

Framer, and they were all kind of fighting for this same space.

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.

We talked about that was a shameless plug of mine or a a sick pic of mine in episode number 44,

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.

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, and then

And then, at the same time, Framer were making a, like, a prototyping tool that was based on React, and they needed an API 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, 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, And so I I ditched that pretty quickly and and renamed it PopMotion.

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.

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. And they all just felt Yeah.

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.

After making Framer Motion and MotionONE,

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.

I've done a lot of animation stuff. And I just wanna say, thank you for thinking about

animation tools to exist in modern UI development. I've used a ton of these things, and let me tell you, man,

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,

the API

I'd say, most painless