I'm new to Framer Motion (and animations in general) and am trying to replicate the below GSAP effect

https://codepen.io/cameronknight/pen/pogQKwR

I can achieve the reveal effect and scale effect individually, but when applying both animations, only one of the animation triggers, and the remainder of the second animation only triggers after the first has completed.

I've tried altering the delay, duration etc. but to no avail, and was wondering if there was any alternative method to trigger both animations at the same time (or with very minimal delay).

The code can be found below:

I have a motion image element, and a motion div element on top styled to be the exact same dimensions on top of the image element. An X transformation is applied to the motion div element to achieve the reveal effect. I then tried to apply a scale effect to the motion image element, and this is where the problem occurs.

function App() {

  const overlayVariant = {
    start: {
      x: "0%", 
      opacity: 1,
    },
    end: {
      x: "100%",
      transition: {
        delay: 0.5, 
        duration: 1, 
        ease: "easeInOut"
      }
    }
  }

  const imageVariant = {
    start: {scale: 1.1},
    end: {
      scale: 1,
      transition: {
        delay: 0.5, 
        duration: 1, 
        ease: "easeOut"
      }
    }
  }


  return (
    <main className="app-container">
      <section className="app-contents">
        <div className="app-image">
          <motion.div 
            className="image-overlay"
            variants={overlayVariant}
            initial="start"
            animate="end"
            >
          </motion.div>
          <motion.img 
            src={image} 
            variants={imageVariant}
            whileHover="hover"
            transition={{duration: 0.6, ease: [0.43, 0.13, 0.23, 0.96]}}
            initial="start"
            animate="end"
            />
        </div>
      </section>
      
    </main>
  );
}

Thank you advance, and I would appreciate any help I could get.