Soy nuevo en Framer Motion (y en las animaciones en general) y estoy tratando de replicar el siguiente efecto GSAP

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

Puedo lograr el efecto de revelación y el efecto de escala individualmente, pero cuando aplico ambas animaciones, solo se activa una de las animaciones, y el resto de la segunda animación solo se activa después de que la primera se haya completado.

Intenté alterar el retraso, la duración, etc., pero fue en vano, y me preguntaba si había algún método alternativo para activar ambas animaciones al mismo tiempo (o con un retraso mínimo).

El código se puede encontrar a continuación:

Tengo un elemento de imagen en movimiento y un elemento div de movimiento en la parte superior diseñado para tener exactamente las mismas dimensiones en la parte superior del elemento de imagen. Se aplica una transformación X al elemento div de movimiento para lograr el efecto de revelación. Luego traté de aplicar un efecto de escala al elemento de imagen en movimiento, y aquí es donde ocurre el problema.

 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> ); }

Gracias por adelantado, y agradecería cualquier ayuda que pudiera obtener.