export const boxVariants = {
  entering: {y: 20},
  entered: {
      y: 0,
      transition: {
          y: {
              duration: 0.2,
              ease: [.62,.28,.23,.99]
          }
      }
  },
    show: { scale: 1.2 },
    tap: { scale: 0.8 },
    top: { y: [null, -150, 0] },
    left: {
      x: [null, -150, 0],
      transition: {
        duration: 3,
        times: [0, 0.3, 0.8],
        ease: ["backIn", "backOut"]
      }
    },
    right: { x: [null, 150, 0] },
    zoom: { scale: [null, 2, 1], rotate: [0, 90, 0] }
  }
  
  export const barsVariant = {
    animate: { transition: { staggerChildren: 0.095 } }
  }
  
  export const barVariant = {
    initial: { scaleY: 0 },
    animate: {
      scaleY: [null, 1, 0],
      transition: { ease: "easeOut" }
    }
  }
  
  export const buttonsVariant = {
    appear: { transition: { staggerChildren: 0.08 } },
    animate: { transition: { staggerChildren: 0.12 } }
  }
  
  export const buttonVariant = {
    hidden: { opacity: 0, x: -20 },
    appear: { opacity: 1, x: 0, transition: { duration: 0.5, ease: "easeOut" } },
    animate: {
      y: [null, 50, 0],
      scale: [1, 0, 1],
      rotate: [0, 360, 0]
    }
  }