Animation Examples

export const fadeUp: Variants = {
  hidden: { opacity: 0, y: 50 },
  show: { opacity: 1, y: 0 },
};

<motion.div
  variants={fadeUp}
  initial="hidden"
  animate="show"
  transition={{ duration: 0.5, ease: 'easeOut' }}
>
  Content
</motion.div>

export const fadeIn: Variants = {
  hidden: { opacity: 0 },
  show: { opacity: 1 },
};

<motion.div
  variants={fadeIn}
  initial="hidden"
  animate="show"
  transition={{ duration: 0.4 }}
>
  Content
</motion.div>

export const slideDown: Variants = {
  hidden: { opacity: 0, y: -50 },
  show: { opacity: 1, y: 0 },
};

<motion.div
  variants={slideDown}
  initial="hidden"
  animate="show"
>
  Notification
</motion.div>

export const slideLeft: Variants = {
  hidden: { opacity: 0, x: 50 },
  show: { opacity: 1, x: 0 },
};

<motion.div
  variants={slideLeft}
  initial="hidden"
  animate="show"
>
  Panel
</motion.div>

export const slideRight: Variants = {
  hidden: { opacity: 0, x: -50 },
  show: { opacity: 1, x: 0 },
};

<motion.div
  variants={slideRight}
  initial="hidden"
  animate="show"
>
  Content
</motion.div>

export const dropdown: Variants = {
  hidden: { opacity: 0, y: -12 },
  show: { opacity: 1, y: 0 },
  exit: { opacity: 0, y: -12 },
};

<AnimatePresence>
  {isOpen && (
    <motion.div
      variants={dropdown}
      initial="hidden"
      animate="show"
      exit="exit"
    >
      Menu Items
    </motion.div>
  )}
</AnimatePresence>

export const slideInRight: Variants = {
  hidden: { x: '100%' },
  show: { x: 0 },
  exit: { x: '100%' },
};

<AnimatePresence>
  {isOpen && (
    <motion.nav
      variants={slideInRight}
      initial="hidden"
      animate="show"
      exit="exit"
      transition={{ type: 'spring', damping: 25 }}
    >
      Navigation
    </motion.nav>
  )}
</AnimatePresence>

export const staggerContainer: Variants = {
  hidden: {},
  show: {
    transition: {
      staggerChildren: 0.06,
      delayChildren: 0.15,
    },
  },
};

export const staggerItem: Variants = {
  hidden: { opacity: 0, x: 20 },
  show: { opacity: 1, x: 0 },
};

<motion.ul
  variants={staggerContainer}
  initial="hidden"
  animate="show"
>
  {items.map((item) => (
    <motion.li key={item.id} variants={staggerItem}>
      {item.name}
    </motion.li>
  ))}
</motion.ul>