All posts

How to make draggable Framer Motion elements snap to breakpoints

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

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

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?
Did you know you can write your own typesafe React router in 500 lines?

Did you know you can write your own typesafe React router in 500 lines?

There are a lot of things you can do for yourself. One of them is simple type-safe React routing library. Sounds good, doesn't it?
Direction-aware animations in Framer Motion

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.
Concurrency in React 18 for busy bees

Concurrency in React 18 for busy bees

Guide to concurrency, CPU- and IO-bound components, and other interesting stuff. Finally, learn wtf deferred value is.
Guide to React Suspense and use hook for busy bees

Guide to React Suspense and use hook for busy bees

Suspense was introduced 5 years ago yet for a long time its sole purpose was just code splitting. Now Suspense helps you to reduce boilerplate and optimize SSR. In this guide, we'll discover how Suspense works, how to use it, and what the profits are.
Making animated tooltip with React and Framer Motion

Making animated tooltip with React and Framer Motion

Learn how to avoid common pitfals when building floating component and how to easily animate them.