Framer Motion recipes
My collection of neat components built with Framer Motion, along with tips and tricks how to make Framer Motion do what you want. If you already have a grasp of Framer Motion basics but wanted to learn it deeper, those step-by-step tutorials with examples will help you.
Building Swipe Actions component with React and Framer Motion
Making the useSnap hook was fun, now let's use it and build a neat Swipe Actions component, the Radix way.
How to make draggable Framer Motion elements snap to breakpoints
Drag is cool, but what to do if ya need a bit of snap? In this recipe, we build a reusable hook that makes adding snap points a breeze.
Animating Radix Primitives with Framer Motion
I always forgot how to properly pair Radix Primitives and Framer Motion, so I wrote this guide!
Building a «hold to confirm» button with Framer Motion
If typing the project name to confirm its deletion is too boring, how about we make a confirmation button that shakes, vibrates and almost tries to run away from the user?
Direction-aware animations in Framer Motion
Carousels, multistep forms and navigation between screens – they all profit from nice direction-aware animation. In this recipe, you'll learn how you can implement some.
Making animated tooltip with React and Framer Motion
Learn how to avoid common pitfals when building floating component and how to easily animate them.