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> ); };
Advertisement
Answer
Ok so after a discussion on the framer-motion discord: You can’t use variants or the animate prop.
<Container style={{ width: isBig ? "100%" : "0%", borderRadius: "15px" }} layout > <Text /> </Container>
you have to use style tag or CSS instead. Additionally, the layout prop isn’t a stand-in replacement. It looks like you can’t get the width all the way to zero, and the layout is more of a “from one size to another” utility. If you remove the padding in my v4 example it no longer works :/
For reference:
Discord Link: https://discord.com/channels/341919693348536320/716908973713784904/842083550990958642
This came up in a Github issue here:https://github.com/framer/motion/issues/1145
I created a working version in v2 that uses useInvertedScale()
:
https://codesandbox.io/s/framer-motion-layout-scaling-text-in-framer-motion-295-useinvertedscale-ixqln
I created a working version in v4 that doesn’t here: https://codesandbox.io/s/framer-motion-layout-scaling-text-in-framer-motion-4-70eb3