I’m conflicted. These animations look sick, but I equally love the straight performance of something like the McMaster site. No animations just feels faster.
You don't need framer motion for something like McMaster site, basic css animations are just fine for that if you want any animation at all. Framer motion is for complex stuffs and mostly just artistic stuffs.
@ Right. I’m saying I love sites that have all the artsy animations, but I also like the ones that have no animation and feel super snappy. Two different approaches.
@@kevharv True tho, sites with animations do feel slow sometimes. Actually I'm working on a webapp that heavily relies on framer-motion rn as I'm writing this and oh man do I have to go to extra lengths for the animation to work, especially since the backend is involved too.
The thing I don't like about motion is that, it treats animations like components. To me, animations should be a part of the components' styles stored seperately.
By components you mean like a Provider? cause that’s been the direction these libraries have been headed for a while like Transition from mantine. I do agree though animation should be more like a prop/ref
Hey @ramsey2155 - that’s fair though the nice thing about having them co-located is they are easier to manage together. You don’t get things lingering around the same way with styles. That said with the animate function you can put your animations elsewhere and use selectors to “reach in” and animate
i can there's an official easy solution for everything in vue like vuex store while react is bare bones and you have to go and look for libs to do basic things. it's a shame that Americans use react bc of brand recognition only thus forcing most of the world to do so as well
I've been a web dev for almost 20 years and I can't believe we still can't get easy enter/exit animations in the current most popular web framework... These should be built-in in pretty much any web framework in my opinion..
With modern CSS exit animations are easier in React. You can transition to `display: none` with `transition-behavior: allow-discrete` and combine this with the @keyframes rule.
9:00 Funny, that I thought this was such a basic feature in Vue, entry/exit animations, customizable in css. I guess other frameworks (libs), have it rough.
Hey Theo, I've been cooking up my own animation library these past two months. Fingers crossed it lands in one of your videos someday-I'd love to hear your hot take on it. 🤞🏻 It’s built for After Effects motion designers who wanna flex REAL keyframe-based animations on the web-none of that basic tweening stuff. Oh, and there's a GUI in the works, so devs and designers can finally stop speaking two different languages. 👀 Bonus: You’ll even be able to export animations straight from After Effects as SVG. Unlike Lottie, though, these animations won’t turn your site into a sluggish potato. 🚀
@@TheSlyProfessor I'm currently working with a few talented people to structure a comprehensive brand identity. Once that's done you'll see it all across social media. 🔥
@@TheOtherMattPerry Matt Perry himself! I love ya and I feel honoured to have caught your attention 🥳 Once public (it is probably going to take a few months) you'll see what I mean 😉
7:53 lol anything dot “engineering” is just not in the same league…sorry 9:27 a few weeks ago at work I had to animate enter and exit animations for form error messages…and the form was using formik, which I couldn’t change…fml. No form of denouncing could stop formik’s validation from interfering with the code I wrote for exit animations to delay unmounting, etc. And I was just doing this with react, no animation library, because they wasn’t much animation elsewhere in the project. It was a nightmare and eventually I just settled for no animation. In the end I think it might be better, though, from a UX perspective, because once users enter valid form data they just want the errors to go away quickly. It feels cleaner.
Just learned that gsap got bought by webflow- so GSAP is out for any consideration (shut down their forum already) any paid subscriptions won't be honored, are they ever? SO can motion replicate some of GSAP, can it do text animations? I have never used it and am pissed, I have a site I am developing and was using some GSAP, but I got to rip that out and use something else.
Usually i tend to avoid those libraries, except for exit animations in react, everything else is very simple to achieve with transitions or keyframes (even the timeline) and about performance, there's nothing more performant than plain css
I hate ecosystem argument. React needs massive ecosystem because its incapable of functioning without it. Solid, Svelte, Vue can all interact with Web APIs properly.
Animejs v4 is so much better it’s not even close and I’ve been building with framer motion & motion for the past year. Problem with framer motion - it’s too slow Problem with motion - api is poorly documented (compared to animejs v4) and unintuitive.
Would love to see which animations were too slow! Where possible it uses WAAPI under the hood for hardware accelerated animations, which other libraries don’t
@@TheOtherMattPerry AnimeJS v4 specifically also uses WAAPI, but the problem with framer motion specifically is rooted in the fact that It’s React. I work on an app where performant animations are important and while the framer motion API is really good, it doesn’t perform well under those constraints and leads to performance drops, and on older hardware, jank.
@@hyprsonic_dev Although Anime 4 will be faster than WAAPI in some specific situations, it doesn't use WAAPI, it runs on requestAnimationFrame. Motion isn't routed in React. Its vanilla library is vanilla - it has no dependency on React, no dependencies at all. It might be the case that with Motion for React if you had too many renders this could interfere with the main thread and therefore animations. But then this would be an argument to stick to hardware accelerated animations, i.e filter transform and opacity, via CSS or WAAPI. Which is what Motion already does.
But wait... I've been using "vanilla" Motion in my Svelte projects for a while now, but wasn't aware that it was part of Framer Motion. Honestly it's been quite a task to organize and reuse, combine, sequence animationse etc., but I guess that's more of a skill issue, and it's all good knowing that your bundle size remains crazy small!
Being a svelte guy I'm so happy that we're getting to use the cool stuff the react guys have. React: trashy framework with great ecosystem Svelte: great framework with no ecosystem Still waiting for a cross-framework shadcn. No, webcomponents don't count because they're just a backend for other frameworks.
Vue has this, Svelte has that... Oh god u know why I hate any frontend library other than React? Cuz it's just an awful, oversimplified abstraction. Writing React code I feel more like I'm writing plain JS. No hidden dark magic. It's just JS. I like to get my hands dirty, I like to have more control. Ask Vue developer how does exit animation works under the hood. Majority won't even know I'm sure.
So.. just a weaker version of react-spring… disappointing Why do „we“ always start again with the same stuff instead of focusing money and work force on what is already great and there?
I’ve always loved Framer Motion and used it in nearly all of my projects. So happy to see that they are bringing it to everyone outside of React!
Glad you finally covered motion one
I used this last year and seeing it here now makes me feel ahead of the curve
7:14 just echoing this coolness. i love the cooperation here.
I’m conflicted. These animations look sick, but I equally love the straight performance of something like the McMaster site. No animations just feels faster.
You don't need framer motion for something like McMaster site, basic css animations are just fine for that if you want any animation at all. Framer motion is for complex stuffs and mostly just artistic stuffs.
@ Right. I’m saying I love sites that have all the artsy animations, but I also like the ones that have no animation and feel super snappy. Two different approaches.
@@kevharv True tho, sites with animations do feel slow sometimes. Actually I'm working on a webapp that heavily relies on framer-motion rn as I'm writing this and oh man do I have to go to extra lengths for the animation to work, especially since the backend is involved too.
I’ll have to check it out. Would be nice to use in Astro
The thing I don't like about motion is that, it treats animations like components. To me, animations should be a part of the components' styles stored seperately.
By components you mean like a Provider? cause that’s been the direction these libraries have been headed for a while like Transition from mantine. I do agree though animation should be more like a prop/ref
What's your js animation library then ?
@@martinlesko1521 i hate people like you. where's yours, buddy? 2.5 GPA government contractor andy
@@martinlesko1521critism doesnt mean he does something better, he just prefers a different approach and that’s okay
Hey @ramsey2155 - that’s fair though the nice thing about having them co-located is they are easier to manage together. You don’t get things lingering around the same way with styles. That said with the animate function you can put your animations elsewhere and use selectors to “reach in” and animate
React 19, Expo 52, now this. Web devs can't stop winning.
Why am I the first to like this comment?
@@LutherDePapier because not anyone is a true web dev
Entry and exit animations ins Vue are built-in and are so easy, I can’t believe that is hard in React…
i can there's an official easy solution for everything in vue like vuex store while react is bare bones and you have to go and look for libs to do basic things. it's a shame that Americans use react bc of brand recognition only thus forcing most of the world to do so as well
Time to learn Vue or Astro I guess
React was the worst framework to become industry standard
@@sK0pe-d9b 100%
I've been a web dev for almost 20 years and I can't believe we still can't get easy enter/exit animations in the current most popular web framework... These should be built-in in pretty much any web framework in my opinion..
Never heard of this library. I love learning that this kind of thing is available! Thanks Theo.
this was motion one!
With modern CSS exit animations are easier in React. You can transition to `display: none` with `transition-behavior: allow-discrete` and combine this with the @keyframes rule.
Is it compatible with most modern browsers?
I just open YT to search motion related content and this video was on top
9:00 Funny, that I thought this was such a basic feature in Vue, entry/exit animations, customizable in css. I guess other frameworks (libs), have it rough.
In svelte as well.. it's one of the little feature i overuse...
So stoked for this
So happy to see that this library getting some new love!
“most talented senior+ developers watching youtube” awwww 😂😂
Hey Theo, I've been cooking up my own animation library these past two months. Fingers crossed it lands in one of your videos someday-I'd love to hear your hot take on it. 🤞🏻
It’s built for After Effects motion designers who wanna flex REAL keyframe-based animations on the web-none of that basic tweening stuff. Oh, and there's a GUI in the works, so devs and designers can finally stop speaking two different languages. 👀
Bonus: You’ll even be able to export animations straight from After Effects as SVG. Unlike Lottie, though, these animations won’t turn your site into a sluggish potato. 🚀
How do I find it?
👀
Tweening *is* keyframe based animations. “Tween” is short for “between” - as in between keyframes.
@@TheSlyProfessor I'm currently working with a few talented people to structure a comprehensive brand identity. Once that's done you'll see it all across social media. 🔥
@@TheOtherMattPerry Matt Perry himself! I love ya and I feel honoured to have caught your attention 🥳
Once public (it is probably going to take a few months) you'll see what I mean 😉
bots watched this video before me. sad.
XD bots are getting excited watching the smooth motion.. like he does 11:44
Matt first had Motion One which was for both Solid and Vue. Now that he no longer has to focus on Framer Motion as much, this is going to be great
Does it solve main problems of js animations though? Terrible performance (on scroll) and 99% cpu and gpu load
There are issues with React Server Components though right? I don't think you can use AnimatePresence with RSCs
Can you use framer motion in app router files? Or does it only work in “use client”? (Next js)
Timeline is like the animation api from angular, a compare would be awesome 😄
how do you get github to display distinct icons for the files and folders ? 11:09
6:10 your GitHub UI looks great! Are you using Arc boost to make it look that way??
nice, gonna have to give this a shot. Been using React spring for a while now
I use astro + tailwind + threejs
But For animation stuffs i doubt what lib should i choose.
Gsap, animejs, motion...
Looking for some guide
What do you think about GSAP and React
that kind of video is why I'm subscribed...not the gossip crap. thanks for that
How does he obtain icons for the folders in GitHub?
Material Icons for Github as browser extension
exists another good library - react-spring
1 step further for SvelteKit
Why not gsap, which has been there for ages, hence battle tested?
Motion is six years old at this point, and was spun off of Popmotion which is 10 years old
7:53 lol anything dot “engineering” is just not in the same league…sorry
9:27 a few weeks ago at work I had to animate enter and exit animations for form error messages…and the form was using formik, which I couldn’t change…fml. No form of denouncing could stop formik’s validation from interfering with the code I wrote for exit animations to delay unmounting, etc. And I was just doing this with react, no animation library, because they wasn’t much animation elsewhere in the project. It was a nightmare and eventually I just settled for no animation. In the end I think it might be better, though, from a UX perspective, because once users enter valid form data they just want the errors to go away quickly. It feels cleaner.
Nice!
I just use gsap/react. Isn't it good?
its good, but way heavier and animations are a bit less smooth
what extension is he using for github to look like that?
If i focus in animation ill just use svelte
Oh boy, if you rely on Svelte animations you gonna have a bad time. The simple example works, but anything more complicated just suck
@@theindieprogrammer I see that's a fair point.
Wait so Motion One became Motion?
And framer-motion became motion.
@@Bu7MaiD075 guess I'm using motion now
Yes both Motion One and Framer Motion are now Motion
@@TheOtherMattPerry thanks Matt 🖤 keep up the good work
Was just looking yesterday for animation libs 😮
React-spring.. much more powerful… well developed.. open source for years..
@@TheKaosTux motion has been also open source for years under the name framer motion
really kewl
Well with GSAP being bought out by a No-code, I feel like Motion is all we got.
for a site which mainly depends on seo ranking, using anything other than vanilla js + css is bad (this library comes with high size)
It was kind of okay before they merged it with framer-motion (v10.18.0). But now that they've merged it the size increased.
So it's now back to PopMotion?
I left the rights to “Popmotion” at Framer! We didn’t even talk about it, both agreed Motion was a good new name.
Even htmx
First human in the comment (i use arch btw)
Bold of you to assume you are human, nice try robot.
Me sitting at the corner in 2014 using animate.css with some modified css animations and laughing at a JS lib to do the same.
Just learned that gsap got bought by webflow- so GSAP is out for any consideration (shut down their forum already) any paid subscriptions won't be honored, are they ever? SO can motion replicate some of GSAP, can it do text animations? I have never used it and am pissed, I have a site I am developing and was using some GSAP, but I got to rip that out and use something else.
I watched this video get recorded live on streams. if you don't already, you should try watching Theo's streams
Usually i tend to avoid those libraries, except for exit animations in react, everything else is very simple to achieve with transitions or keyframes (even the timeline)
and about performance, there's nothing more performant than plain css
How complex are your animations?
@@null_spacex Classic enter/exit of dialogs, menus, hovers for select items, buttons etc.
I tried it, too slow for my websites.
React spring is 💕
But not framework agnostic (
Svelte ecosystem is js ecosystem so no need to build anything - it just works.
I hate ecosystem argument. React needs massive ecosystem because its incapable of functioning without it. Solid, Svelte, Vue can all interact with Web APIs properly.
Svelte is not React. Svelte has excellent animation support built in.
Animejs v4 is so much better it’s not even close and I’ve been building with framer motion & motion for the past year.
Problem with framer motion - it’s too slow
Problem with motion - api is poorly documented (compared to animejs v4) and unintuitive.
Framer motion uses requestAnimationFrame() alongside WAAPI
Would love to see which animations were too slow! Where possible it uses WAAPI under the hood for hardware accelerated animations, which other libraries don’t
@@TheOtherMattPerry AnimeJS v4 specifically also uses WAAPI, but the problem with framer motion specifically is rooted in the fact that It’s React.
I work on an app where performant animations are important and while the framer motion API is really good, it doesn’t perform well under those constraints and leads to performance drops, and on older hardware, jank.
@@hyprsonic_dev Although Anime 4 will be faster than WAAPI in some specific situations, it doesn't use WAAPI, it runs on requestAnimationFrame.
Motion isn't routed in React. Its vanilla library is vanilla - it has no dependency on React, no dependencies at all.
It might be the case that with Motion for React if you had too many renders this could interfere with the main thread and therefore animations. But then this would be an argument to stick to hardware accelerated animations, i.e filter transform and opacity, via CSS or WAAPI. Which is what Motion already does.
It's not "these guys." It's Matt.
Framer motion but svelte? AAAAAAA
howd he make his github look so nice
found it! its the refined-github extension
But wait... I've been using "vanilla" Motion in my Svelte projects for a while now, but wasn't aware that it was part of Framer Motion.
Honestly it's been quite a task to organize and reuse, combine, sequence animationse etc., but I guess that's more of a skill issue, and it's all good knowing that your bundle size remains crazy small!
Imagine one day React leaves Meta and becomes independent.
Being a svelte guy I'm so happy that we're getting to use the cool stuff the react guys have.
React: trashy framework with great ecosystem
Svelte: great framework with no ecosystem
Still waiting for a cross-framework shadcn. No, webcomponents don't count because they're just a backend for other frameworks.
Not sure if it's exactly what you're looking for, but you should certainly give a look at FrankenUI in that regard.
Vue has this, Svelte has that...
Oh god u know why I hate any frontend library other than React? Cuz it's just an awful, oversimplified abstraction.
Writing React code I feel more like I'm writing plain JS. No hidden dark magic. It's just JS.
I like to get my hands dirty, I like to have more control. Ask Vue developer how does exit animation works under the hood.
Majority won't even know I'm sure.
solid js 😎
im sad that framer motion is still real bad with 3d and performance
So.. just a weaker version of react-spring… disappointing
Why do „we“ always start again with the same stuff instead of focusing money and work force on what is already great and there?
Framer motion came out years before React Spring
Framer motion is so unintuitive. Never bothered with it.