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
This is exactly what I was looking for, Thanks man. Could you please change the title of the video because I was only able to find solution for this problem because somebody mentioned your video on their blog.
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!
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. 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
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
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!
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 👍
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
+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)
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.
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.
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!
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!
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 great, man. Such a simple (in retrospect) way to accomplish what would otherwise be a really clunky task. Thanks for sharing!
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.
You always create extremely valuable content. Glad I found your channel
Amazing 🤩. Thx for sharing
Very practical and easy to follow. Well done 😊
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
I love this channel man, even though I have quiet solid experience in react still I learn something new in every video!!
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!
I also love to use CSS for functionality as much as I can. Absolutely loved it!
Awesome job Sam, love the calm presentation style in your work. This is a fantastic Framer motion tutorial as well, thoroughly enjoyed it :)
This video is helpful on many levels. Thank you so much! Subscription was totally worth it.
We’ll done, great demo/explanation!
Worked beautifully, thank you!
Thank you so much
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
This is exactly what I was looking for, Thanks man. Could you please change the title of the video because I was only able to find solution for this problem because somebody mentioned your video on their blog.
Yeah! Curious what your google searches were for?
something like , responsive animation with framer motion without any hooks or with tailwind CSS@@samselikoff
This is so awesome, I was wondering today how come no one has done this
How does this man not have more subs?
Such a goldmine of content
@@gradientO0:40 0:40
Thanks for making this.
just wow 🔥👍
Love that 🎉 thank you for providing amazing content ...
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!
Wow i learnt a lot from this video, You deserve a sub from me😁
This is amazing!
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.
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.
Great video as always, learnt a lot from this video
I missed you Sam! I love your videos
nice!!!
Sam it would be really helpful if we can see your keystrokes (for vim keybindigs) just put them in some corner in small size
Can you make a video about react native & tailwind ?
I love your videos.
6:30 Get ready to be shocked! Who knew this?!
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.
nice
When i use arbitrary property on animate prop on x. It resets to its original position
Hi Sam, what kind of microphone do you use?
Thanks!
This doesn't work with the useTransform hook, tho. Right?
At least it doesn't seem to work for me
Can you create a video on framer motion exit animation in nextjs 13 ?
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?
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?
man i learnt too much about tailwind here
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!
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).
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!
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!
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)
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.
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 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.