Hover & Exit Animations

Primarily, we are going to talk about four things here

• initial - initial state of the animation
• animate - final or animate state
• whileHover - state when the user hovers
• exit - state when the component is removed
• AnimatePresence - a component that helps manage presence of the animation when it is mounted

Initial

The initial state determines how the component behaves when it is not loaded. Consider this an initial state of the component.

<motion.div
  initial={{
    opacity: 0,
    filter: "blur(10px)",
  }}
  className="size-20 rounded-md bg-white shadow-md"
/>

Here, the component will not be visible and will have a blur of 10 pixels.

Animate

the animate state determines how the component behaves, when loaded.

<motion.div
  initial={{
    opacity: 0,
    filter: "blur(10px)",
  }}
  animate={{
    opacity: 0,
    filter: "blur(0px)",
  }}
  className="size-20 rounded-md bg-white shadow-md"
/>

In this example, the component will come from opacity 0 -> opacity 1 and the blur will go from 10px -> 0px.

Exit

The exit state determines how the component behaves when it is about to be removed.

<motion.div
  initial={{
    opacity: 0,
    filter: "blur(10px)",
  }}
  animate={{
    opacity: 0,
    filter: "blur(0px)",
  }}
  exit={{
    opacity: 0,
    filter: "blur(10px)",
    y: 100,
  }}
  className="size-20 rounded-md bg-white shadow-md"
/>

But here's a caveat, the exit animations won't work if you dont wrap the component around an AnimatePresence component. Animate Presence ensures that the exit animations run before they're unmounted.

Clerk Card

Let's take an example of a card that I saw on Clerk and recreate it here using all the animations props available from motion.