Framer motion's motion by variants not working in my ReactJS website

Question

I wanted to use framer motion's <motion.div> tag to use its variants to create a slide in effect in my ReactJS web app. Even though the code compiled without any errors, the slide in motion can not be observed.

code snippet of usage of <motion.div>:

<motion.div 
variants={slideIn('left', "tween", 2, 2)}
className='w-[30%] flex mx-auto justify-center items-center'>
  <h1 className='text-9xl'>Fill</h1>  
  <h1 className='text-5xl'>YOUR FEEDBACK</h1>
</motion.div>

code snipped of my variant:

export const slideIn = (direction, type, delay, duration) => {
    return {
      hidden: {
        x: direction === "left" ? "-100%" : direction === "right" ? "100%" : 0,
        y: direction === "up" ? "100%" : direction === "down" ? "100%" : 0,
      },
      show: {
        x: 0,
        y: 0,
        transition: {
          type: type,
          delay: delay,
          duration: duration,
          ease: "easeOut",
        },
      },
    };
};

please help me

Answer 1

You have to specify initial and animate values in your div like this

<motion.div 
   initial="hidden"
   animate="show"
   variants={slideIn('left', "tween", 2, 2)}
</motion.div>