framer motion, change direction of the odd items in map function

Hello awesome people,

I have data that mapped and the direction of animation is fade-in from left, now I want to change the odd items to fade-in from right. What I accomplish is all the items are same animations.

so far this is my code.

  const item = {
    visible: {
      opacity: 1,
      x: 0,
      transition: { duration: 0.3, ease: "easeOut" },
    },
    hidden: {
      opacity: 0,
      x: -100,
    },
  };

  const textitem = {
    visible: {
      opacity: 1,
      x: 0,
      transition: { delay: 0.5, duration: 0.5, ease: "easeOut" },
      odd: {
        x: 0,
      },
    },
    hidden: {
      opacity: 0,
      x: 200,
      transition: { duration: 0.3, ease: "easeOut" },
      odd: {
        x: -200,
      },
    },
  };

 <motion.div
      className="flex w-full 2xl:max-w-[1440px] 2xl:mx-auto xl:w-full md:mx-auto py-[50px] px-[30px] md:py-[50px] md:px-[60px] items-center flex-col lg:flex-row lg:odd:flex-row-reverse "
      variants={container}
      ref={ref}
      animate={controls}
      initial="hidden"
    >
      <motion.div className="w-full md:w-[95%] lg:w-1/2" variants={item}>
        <img src={image} alt={alt} className="w-full" />
      </motion.div>
      <motion.div
        className="w-full md:w-[95%] lg:w-1/2 lg:px-[60px] md:items-center mt-8 lg:mt-0"
        variants={textitem}
      >
        <HFour style="mb-[24px]">{title}</HFour>
        <PSmall style="">{paragraph}</PSmall>
      </motion.div>
    </motion.div>