在成帧器运动中为 scaleX 设置动画而不影响儿童的比例

Question

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

Answer 1

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