layoutTransition using height instead of transforms

Comment moved from #268.

For the new layoutTransition was opted for a transform + useInvertedScale() approach. There are several practical issues with this when trying to implement something like a auto growing container for items:

• It requires an extra child component just to be able to use useInvertedScale()
• The inversion isn’t always exact, causing a wonky shifting effect (#274)
• There is often a subtle shift when the browser changes render mechanisms when the transition finishes and goes back to transform: none. Could be ‘fixed’ by doing something like transform: rotate( .0001deg ), but is a nasty workaround and not easy to do as the transform is applied inline.
• Most importantly, the contents around the container do not follow the grow/shrink transition; they instantly snap into their new location, which looks odd (see https://codesandbox.io/s/framer-motion-sandbox-c7urd).

Describe the solution you’d like An option to animate height (+ overflow:hidden) on the parent container instead of using transforms. Ideal would be if the overflow:hidden would be applied automatically as well, and only while the animation is running.

Here is an example of the effect I like to achieve: https://codesandbox.io/s/example-growing-container-t3sq2 -> but of course, without setting fixed heights (it also animate when content changes).

[mattgperry]

Hi Rijk

We aren’t going to implement this because of the performance implications - I’d rather keep working on the transform approach.

The good news is you can cover a lot of layoutTransition use-cases simply by animating height via animate. For instance in your use-case animating height: 20 and height: 'auto'.

Also if you didn’t know, you know you can use useInvertedScale without a new component:

const scaleX = useMotionValue(1)
const scaleY = useMotionValue(1)
const inverted = useInvertedScale({ scaleX, scaleY })

return (
  <motion.div layoutTransition style={{ scaleX, scaleY }}>
    <motion.div style={inverted} />
  </motion.div>
)

Likewise there is an experimental API in the works for animating surrounding elements into their new positions. You can already use the UnstableSyncLayout component today:

<UnstableSyncLayout>
  <motion.div layoutTransition style={{ height: isOpen ? 0 : 200 }} />
  <motion.div positionTransition />
</UnstableSyncLayout>

We will be trying to land on a better name ASAP.

[rijk]

Aah, sorry I should have seen that. Works like a charm man! https://codesandbox.io/s/example-growing-container-7xx10