Framer motion 4 has deprecated the use of useInvertedScale(). The new recommendation is to use the layout prop, but it doesn't seem to achieve the same effect for me. I'm attempting to scaleX a parent div without affecting the scale of its children elements. My animation involves more complexity, but here's a simplified explanation: the parent scales on the X-axis while the children remain unscaled.
const parentVariants = {
show: {
scaleX: 1,
transition: {
ease: "easeOut",
duration: 3,
},
},
hide: {
scaleX: 0,
},
};
const MyComponent = () => {
return (
<motion.div
animate="show"
variants={parentVariants}
initial="hide"
>
<motion.div variants={parentVariants} layout>
<p>
SOME TEXT TO NOT SCALE
</p>
</motion.div>
</motion.div>
);
};