I've been going through Framer Motion for a project at work, and it's pushed me to learn the library some more.
One of the components that I ran into the docs was this component called AnimateSharedLayout which sounded useful for what I was doing at work.
I had a difficult time understanding the docs and I wanted to make this video to help clarify my understanding, as well as hopefully help you understand what's going on.
One of the problems that I had understanding with the docs was the description of "Animate layout changes across, and between, multiple components. The link for layout animations didn't lead to anywhere useful, and so I figuring out what layout animations were key.
From playing around with the codesandbox of the first example, my understanding of what layout animations, or more importantly layout are the parts of the DOM element that are related to sizing and layout. You can think of the CSS Box Model here, where the content, padding, border are part of the whole layout equation. I haven't completely checked to see what other parts are affected but anything related to those seem to be a safe bet.
Understanding what layout is in the context of AnimateSharedLayout I find makes understanding the second part "Shared" a lot easier. The main functionality of AnimateSharedLayout is to give the children the ability to signal to other components to do a layout animation. Once again layout being anything related to the sizing of a DOM element i.e. animating the height of the outer container.
This signaling is done by the prop layout. When a motion component inside the AnimateSharedLayout has layout prop, it knows to perform a layout animation whenever it's own state has changed, or the state of another component inside the AnimateSharedLayout tree has changed.
Inside Framer Motion's example, you'll be able to better to see what I've explained above. If you remove the AnimateSharedLayout, you will notice that when you click on any of the list items that the outer container will jump heights to what is when the item is collapsed and expanded. When you remove the layout prop from any of the components which have it, you will notice that it breaks the styling of the component. Remember that the layout prop is the signal for all the components which have the prop to do their layout animation when state has changed. Since the layout prop is removed, the component itself will not send out that signal, and will not properly animate itself when state outside itself (like the items inside the list when the container has no layout prop) has changed.
Hopefully this has been helpful in better understanding the AnimateSharedLayout component!