Animating a Radix Dropdown with Framer Motion

- 0:00 – Intro
- 1:37 – Menu mount animation
- 3:43 – Making the menu controlled for unmount animation
- 8:24 – Using animation controls for item select animation
- 13:34 – Orchestrating the item animation with promises
- 16:14 – Awaiting closeMenu before running onSelect
- 21:37 – Refactoring + tweaking the transition
- 25:35 – Outro

[benoitgrelard]

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 👏

[avidworkslol]

Radix is such a fantastic library. I'd love to see more content using it.

[snow_was_taken]

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!

[xedb]

Radix + Framer Motion: the perfect match

[HeritierBagumire]

you did a great job bruh, earlier I had no idea of this library . Thanks so much

[stevecastaneda]

Needed this video! Would definitely love to see how you make this into a simplified, re-usable component.

[shakapaker]

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 🙃

[kelvinpraises]

Thanks Sam for making this in time, I'm also startig to use Radix and Framer Motion, can't wait to try them!

[tririfandani]

Yesss radix!! Can you do more video on animating radix components with framer??

[Iammrunkown]

No wonder, you're working for Vercel. You truly are an expert at this.

[ereburg]

Another amazing video! Love your approach and attention to UI micro-interactions and animations.

Thank You, Sam.

[FGA-]

That was so helpful, thanks so much❤🫡

[cedericprivat]

Awesome video! Love the idea of bringen more native components and animations to the web 🙌🏽

[sahilverma_dev]

keep uploading such framer motion videos

[snow_was_taken]

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!

[chukwuemekaajima]

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 🚀

[adriancoliba]

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!

[EvertJunior]

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)

[sitdown.listen.]

Awesome video! Could you make a video how to create a ripple effect component to buttons in NextJS / React using framer-motion?

[stevecastaneda]

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?