As you’ve learned, layout animations animate the transitions between different layouts of a single component. But did you know they can also animate between the layouts of two different components? This concept is called shared layout animations.

Take a look at the navigation example below. The active item is highlighted with a background color. When you click on another item, the indicator smoothly animates to the new active item.

It might look like there’s a single indicator moving between items, but in reality, each item has its own indicator, hidden behind the anchor tag. When you click a new item, all inactive indicators are hidden, while the active one is displayed. Layout animations handle the transition between the indicators.

Click the button below to toggle all indicators on and off.