Hey Sam, Radix author here. I have to say, fantastic job showcasing some of the flexibility our APIs provide! In particular, that blink animation when selecting an item. Glad to see our APIs enable things I never even thought about! I also want to note for anybody reading that Radix components support mount/unmount CSS animations out of the box if you don't need as much control as what is shown here. But again, this is fantastic 👏
Thanks for kind words + killer lib! I usually default to Framer Motion since it can do some thing CSS can't but great to know about CSS unmount animations, I'll have to give those a shot! How do those work, similar technique as Framer Motion? Basically clone the element and keep it around until they finish running?
@@samselikoff Yeah essentially, we attach a ref to the element, and listen to animation events, if there's an CSS animation going, we keep it mounted until the animation ends. You can see the underlying component we use here: github.com/radix-ui/primitives/blob/main/packages/react/presence/src/Presence.tsx
Just went through this whole learning process with animating HeadlessUI components last week, I wish this came out earlier! 😄 For anyone wondering - almost the exact same process can be used as Sam did here with Radix. Just a few syntax differences - "static" instead of "forceMount" and "as={'motion.div'}" instead of asChild (although I prefer the latter syntax!). Awesome content either way, love your way of teaching!
Also really interested in the real-world usecase of such animated components, so other devs could use the same components with all the animations and not be restricted compared to the original API, but without needing to think about the animations!
Amazing attention to detail as always. Some might argue this is over engineered but details like this is what makes users enjoy using the software and even pay more for it. It feels "premium" somehow. RadixUI is really great, but I prefer most components from HeadlessUI (from the creators of tailwind)
Just went through this whole learning process with animating HeadlessUI components last week, I wish this came out earlier! 😄 Almost the exact same process can be used as Sam did here with Radix. Just a few syntax differences - "static" instead of "forceMount" and "as={'motion.div'}" instead of asChild (although I prefer the latter syntax!).
This is nice, I have been looking at dropdown animation lately and I stumbled upon the that of Semantic Ui dropdown animation, which in my opinion is that best dropdown animation out there. However, the downside to it is that it was done using jquery and css. You might want to take a look at their dropdown animation and hopefully make a video on how this can be achieved using Framer Motion. Nice videos and explanation. Keep them coming 🚀
Excellent video, really helpful and informative. However I do have one question around the animation of the clicked item background. You have set the background colours directly as hex values within the animate controls start methods, but this may not be ideal when you are supporting a light and dark mode for your theme. What would be a better approach to support dark mode and yet still achieve the same outcome? I guess my main thought is that the background colour is going to be the main issue, setting it white wont be great if in dark mode it needs to be black for example; I think you may be able to just use transparent or inherit instead, however that doesn't allow you to use a slightly different variant of the highlight colour when in dark mode.
That was awesome. Sam could make a tutorial on how to make a the mobile version of Stripe Nav bar with framer motion. how can I achieve the sliding when you select an item on the menu to the next child menu?
Do you have any tips on using tailwind classes with framer motion? I find myself looking up hex values often for colors that I’m using to put in the animations. One thing I do like about the Transition component with Headless is that it lets you animate with classes. I’m curious if we can do that with framer motion as well?
14:56 What keystrokes are you doing to do the multi-line cursor? I've been learning the vim keystrokes while working in VS code and the cmd+D multiple cursor that I used to love doesn't work. Any tips are much appreciated
Hey Sam, Radix author here. I have to say, fantastic job showcasing some of the flexibility our APIs provide! In particular, that blink animation when selecting an item. Glad to see our APIs enable things I never even thought about! I also want to note for anybody reading that Radix components support mount/unmount CSS animations out of the box if you don't need as much control as what is shown here. But again, this is fantastic 👏
Cool guy!
Thanks for kind words + killer lib! I usually default to Framer Motion since it can do some thing CSS can't but great to know about CSS unmount animations, I'll have to give those a shot! How do those work, similar technique as Framer Motion? Basically clone the element and keep it around until they finish running?
@@samselikoff Yeah essentially, we attach a ref to the element, and listen to animation events, if there's an CSS animation going, we keep it mounted until the animation ends. You can see the underlying component we use here: github.com/radix-ui/primitives/blob/main/packages/react/presence/src/Presence.tsx
Radix is such a fantastic library. I'd love to see more content using it.
Radix + Framer Motion: the perfect match
Just went through this whole learning process with animating HeadlessUI components last week, I wish this came out earlier! 😄
For anyone wondering - almost the exact same process can be used as Sam did here with Radix. Just a few syntax differences - "static" instead of "forceMount" and "as={'motion.div'}" instead of asChild (although I prefer the latter syntax!).
Awesome content either way, love your way of teaching!
That flexibility of Radix UI and Framer Motion is nuts. Looking forward to a guide how to move that to a generic drop-down menu component 🙃
Yesss radix!! Can you do more video on animating radix components with framer??
Needed this video! Would definitely love to see how you make this into a simplified, re-usable component.
No wonder, you're working for Vercel. You truly are an expert at this.
That was so helpful, thanks so much❤🫡
Thanks Sam for making this in time, I'm also startig to use Radix and Framer Motion, can't wait to try them!
you did a great job bruh, earlier I had no idea of this library . Thanks so much
keep uploading such framer motion videos
Another amazing video! Love your approach and attention to UI micro-interactions and animations.
Thank You, Sam.
Awesome video! Love the idea of bringen more native components and animations to the web 🙌🏽
Also really interested in the real-world usecase of such animated components, so other devs could use the same components with all the animations and not be restricted compared to the original API, but without needing to think about the animations!
Amazing attention to detail as always. Some might argue this is over engineered but details like this is what makes users enjoy using the software and even pay more for it. It feels "premium" somehow. RadixUI is really great, but I prefer most components from HeadlessUI (from the creators of tailwind)
Just went through this whole learning process with animating HeadlessUI components last week, I wish this came out earlier! 😄
Almost the exact same process can be used as Sam did here with Radix. Just a few syntax differences - "static" instead of "forceMount" and "as={'motion.div'}" instead of asChild (although I prefer the latter syntax!).
This is nice, I have been looking at dropdown animation lately and I stumbled upon the that of Semantic Ui dropdown animation, which in my opinion is that best dropdown animation out there. However, the downside to it is that it was done using jquery and css. You might want to take a look at their dropdown animation and hopefully make a video on how this can be achieved using Framer Motion.
Nice videos and explanation. Keep them coming 🚀
Hey Sam, I've learned a lot from your framer-motion videos. I'd be curious to see how you approach lazy loading and animating images. Thank you!
Amazing video as always!
This is really cool.
new sub here!💚
Awesome video! Could you make a video how to create a ripple effect component to buttons in NextJS / React using framer-motion?
hmm. Never heard of Radix before this. Have just been using Mantine as my latest fix.
Excellent video, really helpful and informative. However I do have one question around the animation of the clicked item background. You have set the background colours directly as hex values within the animate controls start methods, but this may not be ideal when you are supporting a light and dark mode for your theme. What would be a better approach to support dark mode and yet still achieve the same outcome?
I guess my main thought is that the background colour is going to be the main issue, setting it white wont be great if in dark mode it needs to be black for example; I think you may be able to just use transparent or inherit instead, however that doesn't allow you to use a slightly different variant of the highlight colour when in dark mode.
Framer Motion supports CSS variables so you could use a variable for this!
That was awesome. Sam could make a tutorial on how to make a the mobile version of Stripe Nav bar with framer motion. how can I achieve the sliding when you select an item on the menu to the next child menu?
Do you have any tips on using tailwind classes with framer motion? I find myself looking up hex values often for colors that I’m using to put in the animations. One thing I do like about the Transition component with Headless is that it lets you animate with classes. I’m curious if we can do that with framer motion as well?
Great work! Question: instead of the delay promise, why didn’t you just add a delay to the last start animation?
Oh - because I didn't think of that! 🙃 Assuming it also delays the promise returned from `controls.start` that should work perfectly fine!
Thank you. Very cool stuff. Quick question: how did you import AnimatePresence to the project with a shortcut?
Control + Space to bring up autocomplete, then Enter!
14:56 What keystrokes are you doing to do the multi-line cursor? I've been learning the vim keystrokes while working in VS code and the cmd+D multiple cursor that I used to love doesn't work. Any tips are much appreciated
alt + click on the places you want to write in
Could we not have used onTap event from framer motion instead of having multiple controls.start ?
Is forceMount on portal necessary if you already controlling open state?
Yes because as soon as open becomes false it will immediately unmount. Needs to be fully controlled by the JSX only 👍
@@samselikoff Ohh ofc, got it :D
the flicker after clicking the button looks more like a small bug in my eyes lol, even though it's not , am I the only one that thinks this?
Great content. However, I really think you need to optimize your thumbnails. You're leaving views on the table!
Haha agreed! I'll need to update this one when I have some more time
I appreciate the non-dramatic thumbnails and titles. It’s refreshing.
What is shortcut to quickly wrap some element? I'm excited that you are using VSCode like a master 🥷
Amazing video as always!