Man your channel is definitely gold, one of top ones. Everytime I watch a video of yours, I learn something interesting and save it to my list to give it a try as soon as I have a chance.
This is exaclty what i needed today. I have been creating multiple components with different animations and using the hidden class. I can finally take that hacky code out of my codebase. Thank you!
OMG THIS IS AMAZING, thank you! I've been using CSS variables to throw stuff between js and CSS BUT didn't realize I could do them from tailwind. Time to get rid of all those style props
mad respect for diving deep into integrating framer motion with tailwind css, that's some next-level stuff but here's a hot take: using css variables with framer motion, while creative, might be an overkill for some feels like it's adding another layer of complexity but hey, can't deny the elegance of the final outcome top-notch work!
Hi Sam! Amazing video as always! Could you please make a video on how to use Framer Motion to create loading screens between page transitions with NextJS or React Router? That would be amazing!
hi, Sam. Have you been able to make the Framer Motion exit transition between pages work in a Next.js 13 project with the App folder structure?. Regards.
That's so awesome. Thank you for this. It would be awesome to see how you would do the carousel motions of material design 3 using framer motion. It would be really cool. But anyways, thank you very much for all awesome content you provides.
Great tutorial, but it only works for properties of type string since "var(--..." is a string. How would you make it work for properties of type number, like duration and delay.
this was really good sam, always learn something new from you! I also absolutely love this stack (radix, motion, tailwind), All such a high quality libraries with great DX! P.S. what's the colorscheme you're using? I thought it was dracula but it's not
If you specify `initial` then Framer Motion will use that as the starting value if a motion component is SSR. Nice thing about using CSS Properties is that if the starting value is derived from there, it is robust to media breakpoints (since CSS knows the screen size on first paint).
I assume the CSS variables from Tailwind's arbitrary syntax have to have a unique name, right? As they're part of the global CSS file, using the same name in different places would clash, right?
Nope - the generated utility class is part of the global file, but the utility only defines the variable on the element where it's used. Since CSS Variables are scoped (similar to CSS rules), they don't affect siblings or parents, and can be overwritten by children 👍
+Shift+F in Chrome when it's in Full Screen mode (green button in top-left of window). In Safari it's an option under the View menu (Always Show Toolbar in Full Screen)
Hi, I see that TailwindUI uses HeadlessUI but you are using RadixUI - Is there a difference between the two or are they just both libraries trying to do the same thing? It also looks like HeadlessUI was designed with TailwindCSS in mind, so naturally I'm curious about the decision about using RadixUI over HeadlessUI Edit: Oh I spoke too soon, looks you are using HeadlessUI in this video:) But would still be curious if there was a difference between two (as you use Radix in some of your videos, and HeadlessUI in this video) - Maybe an interesting idea for a video
Yep this vid uses Headless since it's from a Tailwind UI example, but they're both great libs! These days I'm liking Radix, it has more components + exposes some more events than Headless does. Really can't go wrong with Headless, Radix or Aria these days!
Hey sam, I’m watching your tutorial from last 6 months, and i just wanna make a request to you that can you please make a video for frontend developers to create a backend just for showing data using appwrite/supabase/firebase, it’s a request, I’m good at designing good at component creation but no data for backend is bothering me
Any way to use tailwind css colors with framer? For example creating a class like [--color-to:grey-400]. The only way i found so far is to expose all tailwind colors as css variables
I heard framer motion supports entry and exit animations. Sorry if its a dumb question, but why would one grab framer motion for this simple animation instead of using only css? Thanks
With framer motion you get spring animations, which are physics based and intuitive. Instead of playing with weird cubic Bézier curves, you define values such as stiffness, damping, bounce. Also it makes animations cancelable, which means they change course if the state change in the middle of the transition. I would not install it just to animate a modal, but if you're already using it, it's nice to get consistent feeling animations through out the app.
Main reason is for the exit animations. In React, we conditionally render (mount/unmount) components in our JSX: {open && } When open is false, is umounted. It's not in the DOM, none of its effects are running, and its state is reset. If you want to animate that conditional , you can't do it with just CSS, and currently React has no first-class APIs for animating unmounting components either. This is where Framer Motion comes in. It lets you animate components while they're unmounting by wrapping the conditional in : {open && } If the Modal has a with an exit prop, Framer Motion will run that animation whenever it's unmounted. So, you get unmount animations while preserving everything about the React model.
@@RegalWK Framer Motion is animating CSS properties under the hood so whether an animation uses CPU or GPU is the same: it depends on which property is being animated. For example, browsers use GPU to animate the `transform` property (which is why Framer Motion uses it when animating values like `x` and `y` rather than the left and right CSS properties). So, both FM and CSS animations can be GPU or CPU accelerated. But Framer Motion does help nudge you to use the best property for a given situation.
Nope, they are scoped! CSS Variables are similar to rules in that they are scoped to a tree. So, they don't affect siblings or parents, and they can be overridden by children.
Tailwind is such a FOTM cancer. A complete anti-pattern, technical debt from day 1, complete vendor lock-in (it's in every single HTML tag), a utility class bombardment, and going by all the job applications I've reviewed: TW is a predictor for very bad understanding of HTML and CSS. Learn CSS first, folks. When TW goes away (like they all do) you won't have a clue what's going on. Learn about cascading, learn about specificity, learn about paint/composite/layout, use SCSS for some nifty tools. TW is by far the worst tech I've seen in my long career as a web dev and front-end specialist.
Come to think of it, this is another punishing complexity and half bakedness of React. With Svelte it's reusable, much performant because it's a CSS animation not JS, so much easier to write, and SSR safe as a cherry on the top! let innerWidth $: innerWidth < 768 ? mobile= true : mobile= false; function modalAnimation(node, { delay = 0, duration = 400 }) { const o = +getComputedStyle(node).opacity; if(mobile){ return { delay, duration, css: (t) => `opacity: ${t * o}` }; } else{ // do whatever you want for bigger screens} }
Hm that doesn't look easier to me... one of the benefits is being able to use the same screen size breakpoints as you're already using in Tailwind. Here you need to hard-code 768 (it's a magic number). Also I don't think this is SSR-safe, since window is not available on the server
@@N8X4TE Spoken like a man who hasn't actually tried it. React feels stupid once you switch and it's less performant too. Zero benefits other than legacy adoption rates. If you're starting a side project there is zero reason to use React over Sveltekit....zero.
@@xrkuzd1569 Absolutely. I don't know who thought JSX was the answer but that person has no place making technical decisions of any significant importance. What a joke.
Main benefit of Framer Motion here is the exit animations - can't do it with just CSS! FM also has more sophisticated animation curves like a spring, which also can't be replicated in pure CSS.
This is a game changer, thank you! Definitely going to implement this in my future videos!
Truly is!
I've been using tailwind for a while now, and I never knew about that trick for css properties xD
Thank you so much, this is awesome
Also didn't know about the inverted breakpoints, that will be useful
This is a game changer!
Keep up with the Radix / Framer / Tailwind CSS stuff. We all love it!
Love your content, thank you!
Appreciate the kind words brother!
Man your channel is definitely gold, one of top ones. Everytime I watch a video of yours, I learn something interesting and save it to my list to give it a try as soon as I have a chance.
This is great, man. Such a simple (in retrospect) way to accomplish what would otherwise be a really clunky task. Thanks for sharing!
Really really useful. Thank you for making this video
I also love to use CSS for functionality as much as I can. Absolutely loved it!
This is exaclty what i needed today. I have been creating multiple components with different animations and using the hidden class. I can finally take that hacky code out of my codebase. Thank you!
Amazing 🤩. Thx for sharing
Awesome job Sam, love the calm presentation style in your work. This is a fantastic Framer motion tutorial as well, thoroughly enjoyed it :)
You always create extremely valuable content. Glad I found your channel
We’ll done, great demo/explanation!
Very practical and easy to follow. Well done 😊
I love this channel man, even though I have quiet solid experience in react still I learn something new in every video!!
This video is helpful on many levels. Thank you so much! Subscription was totally worth it.
Worked beautifully, thank you!
Love that 🎉 thank you for providing amazing content ...
Thanks for making this.
This is so awesome, I was wondering today how come no one has done this
OMG THIS IS AMAZING, thank you!
I've been using CSS variables to throw stuff between js and CSS BUT didn't realize I could do them from tailwind. Time to get rid of all those style props
mad respect for diving deep into integrating framer motion with tailwind css, that's some next-level stuff
but here's a hot take: using css variables with framer motion, while creative, might be an overkill for some
feels like it's adding another layer of complexity
but hey, can't deny the elegance of the final outcome
top-notch work!
This is amazing!
I missed you Sam! I love your videos
Can you please also bring some content on the 3d model website's using three.js . Like model change its positions while scrolling using framer motion
Hi Sam! Amazing video as always! Could you please make a video on how to use Framer Motion to create loading screens between page transitions with NextJS or React Router? That would be amazing!
Thank you so much
Great video as always, learnt a lot from this video
hi, Sam.
Have you been able to make the Framer Motion exit transition between pages work in a Next.js 13 project with the App folder structure?.
Regards.
It would be great. I have a similar problem. I can do the exit page animations in next 12 because of , but I can't implement the same in next 13.
Not yet but will definitely be sharing when I get it working!
@@samselikoff 👍
That's so awesome. Thank you for this. It would be awesome to see how you would do the carousel motions of material design 3 using framer motion. It would be really cool. But anyways, thank you very much for all awesome content you provides.
I love your videos.
just wow 🔥👍
Sam it would be really helpful if we can see your keystrokes (for vim keybindigs) just put them in some corner in small size
Wow i learnt a lot from this video, You deserve a sub from me😁
nice!!!
Great tutorial, but it only works for properties of type string since "var(--..." is a string. How would you make it work for properties of type number, like duration and delay.
How does this man not have more subs?
Such a goldmine of content
@@gradientO0:40 0:40
Hi Sam, what kind of microphone do you use?
Thanks!
6:30 Get ready to be shocked! Who knew this?!
Can you make a video about react native & tailwind ?
When i use arbitrary property on animate prop on x. It resets to its original position
This doesn't work with the useTransform hook, tho. Right?
At least it doesn't seem to work for me
this was really good sam, always learn something new from you!
I also absolutely love this stack (radix, motion, tailwind), All such a high quality libraries with great DX!
P.S. what's the colorscheme you're using? I thought it was dracula but it's not
It's Dracula with a few tweaks so the base colors match Tailwind's slate-900: gist.github.com/samselikoff/cf0fcde8e6d7d118359096ee53191af0
sweet. Thanks for sharing! @@samselikoff
can this be achieved with the framer motion hooks?
Great. But how SSR works with motion component?
If you specify `initial` then Framer Motion will use that as the starting value if a motion component is SSR.
Nice thing about using CSS Properties is that if the starting value is derived from there, it is robust to media breakpoints (since CSS knows the screen size on first paint).
Can you create a video on framer motion exit animation in nextjs 13 ?
Hey, what extension or setting you use to allow new line in classNames? 😅
Hm no extension, just newline inside of it!
I assume the CSS variables from Tailwind's arbitrary syntax have to have a unique name, right? As they're part of the global CSS file, using the same name in different places would clash, right?
Nope - the generated utility class is part of the global file, but the utility only defines the variable on the element where it's used. Since CSS Variables are scoped (similar to CSS rules), they don't affect siblings or parents, and can be overwritten by children 👍
@@samselikoff That's really cool! Thanks!
nice
great video!
how do you hide the browser toolbar?
+Shift+F in Chrome when it's in Full Screen mode (green button in top-left of window). In Safari it's an option under the View menu (Always Show Toolbar in Full Screen)
Hi, I see that TailwindUI uses HeadlessUI but you are using RadixUI - Is there a difference between the two or are they just both libraries trying to do the same thing? It also looks like HeadlessUI was designed with TailwindCSS in mind, so naturally I'm curious about the decision about using RadixUI over HeadlessUI
Edit: Oh I spoke too soon, looks you are using HeadlessUI in this video:)
But would still be curious if there was a difference between two (as you use Radix in some of your videos, and HeadlessUI in this video) - Maybe an interesting idea for a video
Yep this vid uses Headless since it's from a Tailwind UI example, but they're both great libs! These days I'm liking Radix, it has more components + exposes some more events than Headless does. Really can't go wrong with Headless, Radix or Aria these days!
man i learnt too much about tailwind here
Hey sam, I’m watching your tutorial from last 6 months, and i just wanna make a request to you that can you please make a video for frontend developers to create a backend just for showing data using appwrite/supabase/firebase, it’s a request, I’m good at designing good at component creation but no data for backend is bothering me
Hey! What are you wanting the backend for? A side project, an app for work?
Any way to use tailwind css colors with framer? For example creating a class like [--color-to:grey-400]. The only way i found so far is to expose all tailwind colors as css variables
You can actually, using the theme() helper! Try
[--color-to:theme(colors.gray.400)]
@@samselikoff it works!!! 🥹🥹 thank you!!
@@federicottavio Amazing! You got it!
I heard framer motion supports entry and exit animations. Sorry if its a dumb question, but why would one grab framer motion for this simple animation instead of using only css? Thanks
With framer motion you get spring animations, which are physics based and intuitive. Instead of playing with weird cubic Bézier curves, you define values such as stiffness, damping, bounce. Also it makes animations cancelable, which means they change course if the state change in the middle of the transition. I would not install it just to animate a modal, but if you're already using it, it's nice to get consistent feeling animations through out the app.
I think framer use GPU instead of CPU underneath to make calculation which is much faster than CSS which uses CPU but I might be wrong
Main reason is for the exit animations. In React, we conditionally render (mount/unmount) components in our JSX:
{open && }
When open is false, is umounted. It's not in the DOM, none of its effects are running, and its state is reset.
If you want to animate that conditional , you can't do it with just CSS, and currently React has no first-class APIs for animating unmounting components either. This is where Framer Motion comes in. It lets you animate components while they're unmounting by wrapping the conditional in :
{open && }
If the Modal has a with an exit prop, Framer Motion will run that animation whenever it's unmounted. So, you get unmount animations while preserving everything about the React model.
@@RegalWK Framer Motion is animating CSS properties under the hood so whether an animation uses CPU or GPU is the same: it depends on which property is being animated. For example, browsers use GPU to animate the `transform` property (which is why Framer Motion uses it when animating values like `x` and `y` rather than the left and right CSS properties). So, both FM and CSS animations can be GPU or CPU accelerated.
But Framer Motion does help nudge you to use the best property for a given situation.
Thanks for explanation :) @@samselikoff
tailwind is OP
But these css variables are not scoped to component? And if you define same vars in another component - there will be conflict
Nope, they are scoped! CSS Variables are similar to rules in that they are scoped to a tree. So, they don't affect siblings or parents, and they can be overridden by children.
Tailwind is such a FOTM cancer. A complete anti-pattern, technical debt from day 1, complete vendor lock-in (it's in every single HTML tag), a utility class bombardment, and going by all the job applications I've reviewed: TW is a predictor for very bad understanding of HTML and CSS.
Learn CSS first, folks. When TW goes away (like they all do) you won't have a clue what's going on. Learn about cascading, learn about specificity, learn about paint/composite/layout, use SCSS for some nifty tools.
TW is by far the worst tech I've seen in my long career as a web dev and front-end specialist.
Come to think of it, this is another punishing complexity and half bakedness of React.
With Svelte it's reusable, much performant because it's a CSS animation not JS, so much easier to write, and SSR safe as a cherry on the top!
let innerWidth
$: innerWidth < 768 ? mobile= true : mobile= false;
function modalAnimation(node, { delay = 0, duration = 400 }) {
const o = +getComputedStyle(node).opacity;
if(mobile){
return { delay, duration, css: (t) => `opacity: ${t * o}` };
} else{ // do whatever you want for bigger screens}
}
Hm that doesn't look easier to me... one of the benefits is being able to use the same screen size breakpoints as you're already using in Tailwind. Here you need to hard-code 768 (it's a magic number).
Also I don't think this is SSR-safe, since window is not available on the server
Eww. React. No.
As a newly Sveltekit man myself, I wholeheartedly agree with this sentiment!
@@xrkuzd1569 sveltekit sucks man
@@N8X4TE Spoken like a man who hasn't actually tried it. React feels stupid once you switch and it's less performant too. Zero benefits other than legacy adoption rates. If you're starting a side project there is zero reason to use React over Sveltekit....zero.
@@xrkuzd1569 Absolutely. I don't know who thought JSX was the answer but that person has no place making technical decisions of any significant importance. What a joke.
i never really had an usecase for framer, well, nothing I couldn't do without tailwind itself. am i wrong or this is normal
Main benefit of Framer Motion here is the exit animations - can't do it with just CSS! FM also has more sophisticated animation curves like a spring, which also can't be replicated in pure CSS.