Documentation regarding the layoutDependecy prop

[andrewdoro]

I can't find any documentation regarding the layoutDependecy prop. I had a bug in my app where a layoutId animation was interfering with another animation without actually being in the same tree. I fixed this by adding the layoutDependency="none", but I don't know why is working ?

[gianlucajahn]

The layoutDependency prop is a property that can be used with the motion.layout component in framer motion. This prop allows you to specify which layout should be used for an animation, which can be useful in cases where multiple layout animations are being used on the same page.

For example, you can use the layoutDependency prop to specify that a particular animation should use the position layout, rather than the default scale layout. This can be done by setting the layoutDependency prop to position like so:

<motion.layout layoutDependency="position">
  ...
</motion.layout>

[alexsafayan]

hmm I'm not sure that's right

[alexsafayan]

Only triggers layout animations when the value changes.

[alexsafayan]

I think was recently added to the docs:

layoutDependency
By default, layout changes are detected every render. To reduce measurements and thus improve performance, you can pass a layoutDependency prop. Measurements will only occur when this value changes.
<motion.nav layout layoutDependency={isOpen} />