Framer motion 4 has depreciated useInvertedScale() It says to use the layout prop instead but it doesn't seem to achieve the same effect. I'm trying to scaleX a parent div whiteout affecting the scale of the children. There is more going on in my animation but this is a simple breakdown parent scalesX but children should not scale.
const parentVarent= {
show: {
scaleX: 1,
transition: {
ease: "easeOut",
duration: 3,
},
},
hide: {
scaleX: 0,
},
};
const MyComponent = () => {
return (
<motion.div
animate="show"
variants={parentVarent}
initial="hide"
>
<motion.div variants={parentVarent} layout>
<p>
SOME TEXT TO NOT SACLE
</p>
</motion.div>
</motion.div>
);
};