# AnimatedTabBar: preset tab bar animations in pure SwiftUI

> AnimatedTabBar is a SwiftUI tab bar with a set of preset animations, including a ball indicator that can travel along a parabolic arc, teleport or slide to the selected tab, plus built-in droplet and wiggle button styles. It suits an iOS developer who wants a distinctive tab bar without writing the animation code, and the practical detail to know first is that the CocoaPods pod is deprecated after 0.1.4, so Swift Package Manager is the route to take.

**exyte/AnimatedTabBar** — A tabbar with a number of preset animations written in pure SwiftUI

- Repository: https://github.com/exyte/AnimatedTabBar
- Website: https://exyte.com/
- Stars: 557 · Forks: 36
- Language: Swift
- License: MIT
- Published: 2026-10-22 · Updated: 2026-10-22 · Language: en
- Canonical page: https://hysenlabs.com/projects/exyte-animatedtabbar

## Two initializers, and the difference is a type constraint

AnimatedTabBar is a tab bar with a number of preset animations written in pure SwiftUI, and there is a demo animation at the top of the README that shows what the component does before a line of code is written.

Usage starts with two steps. You add an `Int` to store the current selection, and you pass your buttons to the AnimatedTabBar using one of two initializers.

The first initializer takes a view builder closure and accepts any view type:

```swift
import AnimatedTabBar

AnimatedTabBar(selectedIndex: $selectedIndex) {
    TabButton1()
    TabButton2()
    TabButton3()
}
```

The second takes an array, and the views in it must have the same type, or be manually converted to `AnyView`:

```swift
AnimatedTabBar(selectedIndex: $selectedIndex, views: [TabButton1(), TabButton2(), TabButton3()])
```

That constraint is the practical difference between the two, and it is a Swift type system consequence rather than a design choice. A view builder closure returns a tuple of the view types it contains, so three different button types are fine there. An array, by contrast, has to have one element type, so either all three buttons are the same type or each is boxed in `AnyView`.

The required parameters are correspondingly short. `selectedIndex` is the binding to the current index and `views` is the buttons to display in the tab bar.

The library is MIT licensed, the primary language is Swift, and the topic tags are animation, ios-component, swift, swiftui, swiftui-components, tabbar and tabbarcontroller. The homepage is exyte.com, and the README links a companion article on the company blog, Read Article, which is the sort of pointer that often contains the reasoning behind the animation design rather than just the API.

There are no GitHub releases on the repository, and the last push was on 2026-07-08, with the default branch on main.

## The ball indicator and its three trajectories

The distinguishing feature of the component is a ball indicator that sits below or above the selected tab and moves between them, and the library gives you three different paths for it to take.

The `ballTrajectory` option controls this. `parabolic` jumps to the selected button following a parabolic arc. `teleport` disappears and quickly re-appears above the selected tab. `straight` slides to the selected tab.

The three options map onto three different readings of the same interaction. The parabolic arc is the most literal interpretation of a ball being tossed from one slot to the next, and it is the one that carries the most character. The teleport option removes the travel entirely and replaces it with a cut, which reads as the ball being somewhere else rather than moving, and that is the choice when a physical journey would be too slow for the content. The straight option slides, which is the conventional choice and the least surprising.

The other animation curves are configurable separately, which tells you the library treats the ball's motion and the rest of the interface as independent layers. `ballAnimation` is the animation curve to apply to the ball motion, defaulting to `.easeOut(duration: 0.6)`. `indentAnimation` is the curve for growing and shrinking of the indent in the tab bar, and `buttonsAnimation` is the curve for applying colour to the tab buttons.

That three-way split is a sensible design. The ball, the indent and the button colours are three visual responses to the same selection change, and having independent curves for them means a designer can make them agree or deliberately disagree without any of the changes requiring a different component.

The `didSelectIndex` parameter is a closure which gets called on every tab tap, and it is how you hook the library up to whatever navigation your app already uses. The selection binding is what actually changes state, and this closure is the notification that it happened, so it is where you would trigger a router or a coordinator action.

## Colour and layout modifiers, and the template rendering caveat

The customization surface is a closure, and the documentation describes it as the `customize` closure in the popup modifier, which is an odd piece of wording for a tab bar component and suggests the closure is shared with a related library in the same family.

The modifiers themselves are a straightforward list. `barColor` is the colour of the tab bar itself, `selectedColor` is the selected tab colour, and the documentation attaches a warning to it: use template rendering for this color to be applied properly. `unselectedColor` is the unselected tab colour, and `ballColor` is the ball indicator colour.

That template rendering note is worth taking seriously rather than skimming. A colour that is applied as a template image takes its tint from the view rather than from the image data, and a tab bar that draws its icons as images rather than as shapes will not recolour them correctly if the icon is a plain asset. The library is telling you that the selected colour will not reach your icons unless you mark them as templates.

The layout modifiers are `verticalPadding`, the space from the buttons to the bar's top and bottom edges, and `cornerRadius`, the corner radius applied to the tab bar background colour.

The whole set, taken together, is a complete description of the component's visual surface: the bar's own colour and shape, the two text and icon states, the indicator colour, the spacing, and three animation curves plus a selection callback. There is no configuration in the list for the shape of the selected indicator itself, because the indicator's shape is what the trajectory options and the built-in button styles are for.

## Droplet, wiggle and your own button

By default tabs only have a simple colour animation, but you can customize that, and the library ships two built-in button types you can use out of the box: `DropletButton` and `WiggleButton`, with a super custom `ColorButton` type in the Example project.

The arrangement is worth understanding because it separates two things that are often conflated. The tab bar handles the selection indicator, the indent and the transition between tabs. The button handles what a tab looks like and how it reacts. The built-in buttons are examples of the second layer, and the documentation is explicit that you can use them in your projects or build your own buttons on top of them.

That is a reasonable extension point, because the button type is just a view in the tab bar's content, and the selection colour reaches it through the modifier chain. A custom button that reads the selection state and draws itself accordingly fits the same pattern the two built-ins use.

The `ColorButton` in the Example project is described as super custom, which suggests it is there as a demonstration of the ceiling rather than as something to copy. The Example project is where all of this is exercised, and the README explains how to try it: clone the repo `https://github.com/exyte/AnimatedTabBar.git`, open `AnimatedTabBarExample.xcodeproj` in Xcode, and try it.

That is a small detail but a useful one for anyone evaluating the library, because the example project is the fastest way to see whether the animations feel right in a real app rather than in a video.

## Installation, requirements and the CocoaPods deprecation

Installation is through Swift Package Manager, and the requirement is a single dependency entry:

```swift
dependencies: [
    .package(url: "https://github.com/exyte/AnimatedTabBar.git")
]
```

The badges at the top of the README tell you the state of the two distribution routes. There is an SPM-Compatible badge and a Swift Package Index badge for the Swift versions and platforms, and then a Cocoapods badge that says Deprecated after 0.1.4 in yellow.

That is the single most practical fact in the README for anyone starting today. The CocoaPods pod exists and you can still install it, but it is frozen at 0.1.4, which is a long way behind the current version scheme, and a project on CocoaPods would be pinning itself to an old snapshot of the component. Swift Package Manager is where the library is maintained and where a new integration should go.

The requirements are iOS 16+ and Xcode 14+. The iOS 16 floor is what lets the library use the SwiftUI features it does, and it is also worth noting as an adoption constraint: an app that still supports iOS 15 has to decide whether the tab bar is worth dropping the deployment target for.

The repository layout is small and conventional for a Swift package. There is a `Package.swift` at the root, a `Sources/` directory holding the library, an `AnimatedTabBarExample/` directory with the demo app, a `.swiftpm/` directory for Swift Package Manager configuration and a LICENSE file. The absence of a separate test directory in the listing is notable, and the emphasis is instead on the example project.

The project belongs to Exyte, and the README lists a long line of the organisation's other SwiftUI libraries: PopupView for toasts and popups, AnchoredPopup, Grid, ScalingHeaderScrollView, MediaPicker, Chat, CalendarView, an OpenAI REST API wrapper, AnimatedGradient, ConcentricOnboarding, FloatingButton, ActivityIndicatorView, ProgressIndicatorView, FlagAndCountryCode, SVGView and LiquidSwipe. The acknowledgement section credits Yeasin Arafat for the original work on Dribbble that the SwiftUI version recreates, which is the honest lineage of a component like this, since a distinctive tab bar animation usually starts as a design on a community site rather than as a feature request.

## Conclusion

Adopt AnimatedTabBar if you want a tab bar with a distinctive motion design and do not want to write the animation yourself, since the ball indicator trajectories and the built-in button styles are the point of the library. Do not adopt it if you need to support anything below iOS 16, since that is the stated minimum alongside Xcode 14, and check first whether you are on the CocoaPods or Swift Package Manager route, because the CocoaPods pod is deprecated after version 0.1.4 and the package manager is where new work will land.

## FAQ

### What is AnimatedTabBar?

It is a tab bar with a number of preset animations written in pure SwiftUI, from Exyte. It includes a ball indicator that can travel along three trajectories, droplet and wiggle button styles out of the box, and modifiers for colours, spacing, corner radius and three separate animation curves.

### How do I use AnimatedTabBar in SwiftUI?

Store the current selection in an Int, then use one of two initializers. The builder form takes a closure and accepts any view type, for example `AnimatedTabBar(selectedIndex: $selectedIndex) { TabButton1(); TabButton2() }`. The array form takes views of the same type, or each converted to AnyView, for example `AnimatedTabBar(selectedIndex: $selectedIndex, views: [TabButton1(), TabButton2()])`.

### What animation options does AnimatedTabBar offer?

The ballTrajectory option chooses between parabolic, which jumps to the selected button along a parabolic arc, teleport, which disappears and quickly re-appears above the selected tab, and straight, which slides there. Separately, ballAnimation, indentAnimation and buttonsAnimation set the curves for the ball motion, the indent and the button colour changes, with ballAnimation defaulting to .easeOut(duration: 0.6).

### How do I install AnimatedTabBar?

Through Swift Package Manager, by adding `.package(url: "https://github.com/exyte/AnimatedTabBar.git")` to your dependencies. The CocoaPods pod is marked deprecated after version 0.1.4, so the package manager route is the one to use for a new integration. The requirements are iOS 16 or newer and Xcode 14 or newer.

### Can I use custom tab buttons with AnimatedTabBar?

Yes. By default tabs only have a simple colour animation, but the library provides DropletButton and WiggleButton as built-in types, and the documentation invites you to build your own buttons on top of them. The Example project contains a super custom ColorButton type that shows how far the button layer can be taken.

### Is AnimatedTabBar still being maintained?

The repository is not archived and the last push was on 2026-07-08, on the main branch, with no GitHub releases. The licence is MIT, the source lives in a Sources directory alongside an AnimatedTabBarExample project and a Package.swift file, and there is a companion article on the Exyte blog about the SwiftUI tab bar animation.

## Sources

- [exyte/AnimatedTabBar on GitHub](https://github.com/exyte/AnimatedTabBar)
- [Issues](https://github.com/exyte/AnimatedTabBar/issues)
- [License: MIT](https://github.com/exyte/AnimatedTabBar/blob/main/LICENSE)
- [Project website](https://exyte.com/)
- [README](https://github.com/exyte/AnimatedTabBar/blob/main/README.md)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/exyte-animatedtabbar