AnimatedTabBar is a tabbar with a number of preset animations written in pure SwiftUI
Read Article ยป
[](https://swiftpackageindex.com/exyte/AnimatedTabBar)
[](https://swiftpackageindex.com/exyte/AnimatedTabBar)
[](https://swiftpackageindex.com/exyte/AnimatedTabBar)
[](https://cocoapods.org/pods/ExyteAnimatedTabBar)
[](https://opensource.org/licenses/MIT)
# Usage
1. Add an `Int` to store the current selection
2. Pass your buttons to the AnimatedTabBar using one of 2 initializers. For the first one you can pass any view type:
```swift
import AnimatedTabBar
AnimatedTabBar(selectedIndex: $selectedIndex) {
TabButton1()
TabButton2()
TabButton3()
}
```
For the second one the views must have the same type, or be manually converted to `AnyView`
```swift
AnimatedTabBar(selectedIndex: $selectedIndex, views: [TabButton1(), TabButton2(), TabButton3()])
```
### Required parameters
`selectedIndex` - binding to the current index
`views` - buttons to display in the tabbar
### Available customizations - modifiers
use the `customize` closure in the popup modifier:
`barColor` - Color of the tabbar itself
`selectedColor` - Selected tab color (use template rendering for this color to be applied properly)
`unselectedColor` - Unselected tab color
`ballColor` - Ball indicator color
`verticalPadding` - Space from the buttons to the bar's top and bottom edges
`cornerRadius` - The corner radius applied to the tabbar background color
`ballAnimation` - Animation curve to apply to ball motion, default is .easeOut(duration: 0.6)
`indentAnimation` - Animation curve for growing/shrinking of the indent in the tabbar
`buttonsAnimation` - Animation curve for applying color to tab buttons
`didSelectIndex` - Closure which gets called on every tab tap
`ballTrajectory` - Options for ball indicator animation paths:
- `parabolic` - Jump to the selected button following a parabolic arc
- `teleport` - Disappear and quickly re-appear above selected tab
- `straight` - Slide to the selected tab
### Built-in animatable tab buttons
By default tabs only have a simple color animation, but you can customize that. This library has two built-in button types you can use out-of-the-box: `DropletButton` and `WiggleButton`, and a super custom `ColorButton` type in the Example project. Please feel free to use them in your projects or build your own buttons on top of them.
## Examples
To try the AnimatedTabBar examples:
- Clone the repo `https://github.com/exyte/AnimatedTabBar.git`
- Open `AnimatedTabBarExample.xcodeproj` in the Xcode
- Try it!
## Installation
### [Swift Package Manager](https://swift.org/package-manager/)
```swift
dependencies: [
.package(url: "https://github.com/exyte/AnimatedTabBar.git")
]
```
## Requirements
* iOS 16+
* Xcode 14+
## Acknowledgements
Many thanks to [Yeasin Arafat](https://dribbble.com/shots/14883627-Tab-Bar-Animation) for their beautiful original work that we recreated with SwiftUI.
## Our other open source SwiftUI libraries
[PopupView](https://github.com/exyte/PopupView) - Toasts and popups library
[AnchoredPopup](https://github.com/exyte/AnchoredPopup) - Anchored Popup grows "out" of a trigger view (similar to Hero animation)
[Grid](https://github.com/exyte/Grid) - The most powerful Grid container
[ScalingHeaderScrollView](https://github.com/exyte/ScalingHeaderScrollView) - A scroll view with a sticky header which shrinks as you scroll
[MediaPicker](https://github.com/exyte/mediapicker) - Customizable media picker
[Chat](https://github.com/exyte/chat) - Chat UI framework with fully customizable message cells, input view, and a built-in media picker
[CalendarView](https://github.com/exyte/CalendarView) - Calendar view with fully customizable month/day cells
[OpenAI](https://github.com/exyte/OpenAI) Wrapper lib for [OpenAI REST API](https://platform.openai.com/docs/api-reference/introduction)
[AnimatedGradient](https://github.com/exyte/AnimatedGradient) - Animated linear gradient
[ConcentricOnboarding](https://github.com/exyte/ConcentricOnboarding) - Animated onboarding flow
[FloatingButton](https://github.com/exyte/FloatingButton) - Floating button menu
[ActivityIndicatorView](https://github.com/exyte/ActivityIndicatorView) - A number of animated loading indicators
[ProgressIndicatorView](https://github.com/exyte/ProgressIndicatorView) - A number of animated progress indicators
[FlagAndCountryCode](https://github.com/exyte/FlagAndCountryCode) - Phone codes and flags for every country
[SVGView](https://github.com/exyte/SVGView) - SVG parser
[LiquidSwipe](https://github.com/exyte/LiquidSwipe) - Liquid navigation animation
