Shared layout animations
Unlock this video and the rest of this course by joining Frontend.FYI PRO .
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.
Unlock the full lesson with PRO
Want to read the full lesson? Join Frontend.FYI PRO.
PRO is a one time purchase of €149 that gives you lifetime access to this course, any courses released in the future, and so much more!