Animations in iOS: Tab Bar concepts
Tags: swift, ios
Published: 2019-05-23 08:50:18

---
title: Animations in iOS: Tab Bar concepts
published: true
description: They guide users inside the app, allowing them to quickly switch between different tabs.
tags: swift,ios,
---


 We see tab bars every day.

They guide users inside the app, allowing them to quickly switch between different tabs. Apple provides a nice into in their Human Interface Guidelines:

Tab bars are translucent, may have a background tint, maintain the same height in all screen orientations, and are hidden when a keyboard is displayed. A tab bar may contain any number of tabs, but the number of visible tabs varies based on the device size and orientation. If some tabs can’t be displayed due to limited horizontal space, the final visible tab becomes a More tab, which reveals the additional tabs in a list on a separate screen
But who said mobile navigation should be boring?

Let’s explore interesting animations inside the tab bars. I focused first on the ones made for iOS platform. And mentioned several useful guides to implement animated tab bars in Swift 📚

Some of the animations are from real apps. While others — are just nice design concepts, made for inspiration.

Would you use some of them for your apps?


![1_yTtJ9dHsouqXC4y3B3oO5g.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1558601028042/7dXHDnKDZ.gif)

WeChat Tab Bar Redesign by Adrian Reznicek for PLATFORM

![1_yTtJ9dHsouqXC4y3B3oO5g.gif](https://cdn-images-1.medium.com/max/800/1*lUukV9NDO1NkNT3F03JRpQ.gif)

Animated tab bar concept by Cadabra Studio

![1_yTtJ9dHsouqXC4y3B3oO5g.gif](https://cdn-images-1.medium.com/max/800/1*oT4Y-nMdQaG6vjSuv6U93Q.gif)

Camera app tab bar [iPhone X edition] concept by Oleg Frolov for Magic Unicorn

![1_yTtJ9dHsouqXC4y3B3oO5g.gif](https://cdn-images-1.medium.com/max/800/1*-yusZdPbxBbjGBdvnI4vmA.gif)

Yoga App Menu Concept by Dannniel

![1_yTtJ9dHsouqXC4y3B3oO5g.gif](https://cdn-images-1.medium.com/max/800/1*p0todCqWtsVwG8kOFCyPEA.gif)

Create a New Document Tab Bar concept by Hoang Nguyen

![1_yTtJ9dHsouqXC4y3B3oO5g.gif](https://cdn-images-1.medium.com/max/800/1*oU5sOkj0PUnLOMHjhEuQhw.gif)

Fluid Tab Bar Interaction concept by Oleg Frolov

![1_yTtJ9dHsouqXC4y3B3oO5g.gif](https://cdn-images-1.medium.com/max/1200/1*W0fsXNGi5V6WYCSb-MqEyA.gif)

Animated Tab Bar Icons — Interface concept by Andrew McKay

![1_yTtJ9dHsouqXC4y3B3oO5g.gif](https://cdn-images-1.medium.com/max/800/1*Pg6_e25gs6GK6CCD2WsbsA.gif)

Animated Tab Bar Icons — Interface concept by Andrew McKay

![1_yTtJ9dHsouqXC4y3B3oO5g.gif](https://cdn-images-1.medium.com/max/800/1*g1JuHN9vm1cHWOpSYmvKyA.gif)

Tab bar icons by Dimest

![1_yTtJ9dHsouqXC4y3B3oO5g.gif](https://cdn-images-1.medium.com/max/800/1*W0fsXNGi5V6WYCSb-MqEyA.gif)

Tab bar active animation by Aaron Iker, based on Valentin Tsymbaluk concept

![1_yTtJ9dHsouqXC4y3B3oO5g.gif](https://cdn-images-1.medium.com/max/800/1*FVjvQgXpRlIBkcPLx9dGig.gif)

Animated Tab Bar Icons — Interface concept and Swift implementation by Ramotion

![1_yTtJ9dHsouqXC4y3B3oO5g.gif](https://cdn-images-1.medium.com/max/800/1*0nOpxIXG4asiLd5ixBxEQA.gif)

Tab bar interaction concept by Boyang Zhang

![1_yTtJ9dHsouqXC4y3B3oO5g.gif](https://cdn-images-1.medium.com/max/800/1*O6Kwwvk9OFXesM6qxmTQaw.gif)

Animated Tab Bar concept by Mauricio Bucardo

![1_yTtJ9dHsouqXC4y3B3oO5g.gif](https://cdn-images-1.medium.com/max/800/1*N1e50drhdq9D2tXHryG17A.gif)

Tab bar interaction concept by Kaiseir

If you want to practice with designing or developing tab bars, these guides will help you out:


-  [Human Interface Guidelines](https://developer.apple.com/design/human-interface-guidelines/ios/bars/tab-bars/)  on Tab Bars, where you’ll learn best practices in a quick 4 min read.

-  [Guide](https://codewithchris.com/ios-tab-bar-app/)  on “Starting an iOS Tab Bar App with UITabBarViewController”.

- 29 implemented  [examples](https://iosexample.com/tag/tab-bars/) .

- Swift UI module  [library](https://github.com/Ramotion/animated-tab-bar)  for adding animation to iOS tab bar.

 Hope you enjoyed this small inspirational peace. You can also check 30 beautiful examples of animations for iOS and Everything you need to know about Loading Animations 

Happy designing and developing!