# Bottom Navigation Animation in Jetpack Compose

DevFeed: [Bottom Navigation Animation in Jetpack Compose](<https://devfeed.tech/articles/bottom-navigation-animation-in-jetpack-compose-25767.md>)

Original publisher: [Read original article](<https://www.sinasamaki.com/bottom-navigation-animation-in-jetpack-compose/>)

Author: sinasamaki

Published: 2022-02-21T00:00:00Z

Content type: tutorial

Language: en

Sources: [sinasamaki](<https://devfeed.tech/sources/sinasamaki.md>)

Topics: [Jetpack Compose](<https://devfeed.tech/topics/jetpack-compose.md>), [navigation](<https://devfeed.tech/topics/navigation.md>), [Compose](<https://devfeed.tech/topics/compose.md>), [ui](<https://devfeed.tech/topics/ui.md>), [Code](<https://devfeed.tech/topics/code.md>)

Tags: [article](<https://devfeed.tech/tags/article.md>), [bottom-navigation](<https://devfeed.tech/tags/bottom-navigation.md>), [class](<https://devfeed.tech/tags/class.md>), [code](<https://devfeed.tech/tags/code.md>), [color](<https://devfeed.tech/tags/color.md>), [components](<https://devfeed.tech/tags/components.md>), [compose](<https://devfeed.tech/tags/compose.md>), [icons](<https://devfeed.tech/tags/icons.md>), [implement](<https://devfeed.tech/tags/implement.md>), [jetpack-compose](<https://devfeed.tech/tags/jetpack-compose.md>), [libraries](<https://devfeed.tech/tags/libraries.md>), [navigation](<https://devfeed.tech/tags/navigation.md>), [screen](<https://devfeed.tech/tags/screen.md>), [sealed-class](<https://devfeed.tech/tags/sealed-class.md>), [state](<https://devfeed.tech/tags/state.md>), [ui](<https://devfeed.tech/tags/ui.md>)

## AI overview

A tutorial on building a custom animated bottom navigation interface in Jetpack Compose. It starts with a functional navigation UI and then adds animations for item weight, size, height, shadows, corners, opacity, and title visibility using Compose animation components.

## Source excerpt

Bottom navigation UI is used to navigate between different top level screens in apps. There is a composable available in the compose libraries, but it could be improved with some more animations. Using only the animation components provided in the jetpack compose libraries, we could implement a more custom bottom