Layout animations can be combined with enter and exit animations to create even more powerful interactions.

In this lesson, we’ll explore how to combine these features by building a bottom navigation component that expands to reveal navigation items when clicked. Check out the smooth animation! 🤤

AnimatePresence

In module 4 we learned about the AnimatePresence component. It allows elements to animate in and out of the DOM when added or removed.

Here, we’ll use it to show or hide the navigation links when the button is clicked. But there’s more: when the navigation links are added, the size of the navigation wrapper changes, which is where Layout Animations come in handy!