z index on transform

[MiladSadeghi]

I created a header slide on my landing page, and I want the next slide to move forward by 20rem from the previous slide, with a section of the second slide appearing below the previous slide. However, this is not happening! When I use 'x' on the variants, the forward slide appears above the previous slide. But when I use margin, it works fine. The problem is, when I use margin, I encounter issues with scrolling.

Jerskits.mp4

I want the text to appear above, but it's not happening when I use these variants.

const slideVariants: Variants = {
  initial: {
    x: "0rem",
    transition: {
      easings: ["easeInOut"],
      delay: 0.2,
    },
  },
  animate: {
    x: "-20rem",
    transition: {
      easings: ["easeInOut"],
      delay: delay,
    },
  },
};

When I use margin instead of 'x', it works fine. However, I should mention that it causes issues with the parents of those slides when scrolling.

Jerskits.1.mp4

I mean the z-index is not working properly when using 'x'.
can anyone help me with this? I'm at a dead end. I have tried everything, but nothing seems to work!

[itaim18]

How does the code looks like in the motion.div itself(is you used it, at all)
I guess a smal reprod would assist in helping you

[MiladSadeghi]

<motion.div
  key={product._id}
  variants={slideVariants}
  initial="initial"
  animate={index > showingSlide ? "animate" : "initial"}
  className="relative flex h-screen min-w-full overflow-hidden"
>

showingSlide is state and its change when slide change.