FramerMotion

A component that makes it easier to use motion elements from Framer Motion (opens in a new tab) for animations.

Reference

<FramerMotion mode='wait' hide={!text}>
  <motion.div 
    initial={ y: 100 }
    animate={ y: 0 }
    exit={ y: 100 }
  >
    {text}
  </motion.div>
</FramerMotion>

Props

• hide: A boolean that can be used to hide the graphic when certain conditions aren't met.
• mode ("sync" | "wait" | "popLayout"): Decides how entering and exiting children will behave. See full docs at Framer Motion (opens in a new tab).