Skip to content

Guide · Open source

How to use animated-tab-bar: install and add animated iOS tab icons

Updated · written with AI from the project's own documentation and checked against our catalogue data

animated-tab-bar, published by Ramotion, is an MIT-licensed Swift library that adds motion to the icons and items in an iOS bottom tab bar. This guide walks through installing it, wiring it into a storyboard, attaching one of the included animations, and writing your own. By the end you will know the setup steps and where the source is explicit about requirements and limits.

RAMAnimatedTabBarControllerRamotion/animated-tab-bar · ★ 11.1k · MIT

Quick start

  1. 1Check requirements. Confirm your project targets iOS 9.0 or later and that you have Xcode 10.2, as listed in the README.
  2. 2Install the library. Add the pod 'RAMAnimatedTabBarController' line to your Podfile, or drag the RAMAnimatedTabBarController folder into your project.
  3. 3Set the tab bar controller class. In your storyboard or nib, set the UITabBarController's class to RAMAnimatedTabBarController.
  4. 4Set the item classes. Set each UITabBarItem's class to RAMAnimatedTabBarItem and give it a custom image icon.
  5. 5Attach an animation. Add an NSObject for each item, set its class to an included animation such as RAMBounceAnimation, and connect the outlet in RAMAnimatedTabBarItem.
  6. 6Test and customise. Run the app to check each tab. If you need a different effect, subclass RAMItemAnimation and override the three methods.

What the library does and who it suits

The library replaces the standard tab bar controller and items with Ramotion's custom classes, then attaches an animation to each item. The included animations include bounce, left and right rotation, four flip variants, frame, and fume.

It is aimed at iOS developers who want a livelier tab bar than the default look, and at prototypes where a quick visual upgrade is the goal. It is iOS-only because it is built with UIKit classes.

Install animated-tab-bar with CocoaPods, Carthage or manual import

The README lists Xcode 10.2 and an iOS 9.0+ target as requirements. You can add the RAMAnimatedTabBarController folder directly to your project, or use a dependency manager.

For CocoaPods, add the pod to your Podfile. The README also documents Carthage (a github line in your Cartfile) and Swift Package Manager, though it gives no commands for SPM.

  • Manual: drag the RAMAnimatedTabBarController folder into your project
  • CocoaPods: add the pod line to your Podfile
  • Carthage: add the github line to your Cartfile
  • Swift Package Manager: listed in the README without details
pod 'RAMAnimatedTabBarController'

Set up the tab bar in your storyboard or nib

Start from a UITabBarController. In your storyboard or nib, change its class to RAMAnimatedTabBarController. Then set the class of each UITabBarItem to RAMAnimatedTabBarItem.

Give each item a custom image icon. The README describes this as a required step before adding animation.

  • Create a UITabBarController in your storyboard or nib
  • Set its class to RAMAnimatedTabBarController
  • Set each UITabBarItem's class to RAMAnimatedTabBarItem
  • Add a custom image icon to each RAMAnimatedTabBarItem

Attach an animation to each tab item

For each RAMAnimatedTabBarItem, drag an NSObject into your view controller and set its class to the name of the animation you want, such as RAMBounceAnimation. Then connect the animation outlet in RAMAnimatedTabBarItem to that object.

The README links a demonstration video for this step. Repeat the process for every tab that should animate.

  • Drag an NSObject item into your ViewController
  • Set its class to the animation class name (ANIMATION_CLASS in the README)
  • Connect the animation outlet in RAMAnimatedTabBarItem to that object

Write a custom animation

To make your own effect, create a class that inherits from RAMItemAnimation and override the methods the README names. playAnimation runs when the item is selected, deselectAnimation runs when it is deselected, and selectedState sets the selected appearance when the tab bar controller loads.

The README's example, RAMBounceAnimation, scales the icon with a CAKeyframeAnimation and sets the label colour. Use it as a template and change the keyframe values or duration.

  • Subclass RAMItemAnimation
  • Override playAnimation(_:textLabel:) for the selected state
  • Override deselectAnimation for the deselected state
  • Override selectedState(_:textLabel:) for the initial state
class RAMBounceAnimation : RAMItemAnimation { override func playAnimation(_ icon: UIImageView, textLabel: UILabel) { playBounceAnimation(icon) textLabel.textColor = textSelectedColor } override func deselectAnimation(_ icon: UIImageView, textLabel: UILabel, defaultTextColor: UIColor, defaultIconColor: UIColor) { textLabel.textColor = defaultTextColor } override func selectedState(_ icon: UIImageView, textLabel: UILabel) { textLabel.textColor = textSelectedColor } func playBounceAnimation(_ icon : UIImageView) { let bounceAnimation = CAKeyframeAnimation(keyPath: "transform.scale") bounceAnimation.values = [1.0 ,1.4, 0.9, 1.15, 0.95, 1.02, 1.0] bounceAnimation.duration = TimeInterval(duration) bounceAnimation.calculationMode = kCAAnimationCubic icon.layer.add(bounceAnimation, forKey: "bounceAnimation") } }

What people use it for

  • Adding a bounce or rotation effect to the tabs of an iOS app prototype
  • Giving a consumer iOS app a more lively bottom navigation without writing animation code from scratch
  • Building a custom flip or frame effect by subclassing RAMItemAnimation
  • Comparing built-in animations before committing to one design

Frequently asked questions

Is animated-tab-bar free to use?

The library is released under the MIT license, as stated in the README. The license file is included in the repository, so check it for the full terms before shipping.

What are the requirements for animated-tab-bar?

The README lists iOS 9.0+ as the target and Xcode 10.2 as the tool. The library is built with UIKit classes, so it is for iOS projects only.

How do I install animated-tab-bar with CocoaPods?

Add pod 'RAMAnimatedTabBarController' to your Podfile and run your usual CocoaPods install. The README also lists Carthage and manual folder import as options.

Does animated-tab-bar work with Android or the web?

No. The source describes an iOS library built on UIKit, so it does not apply to Android or web projects.

Does animated-tab-bar support SwiftUI TabView?

The README describes setup through a UITabBarController in a storyboard or nib and does not mention SwiftUI. If your app uses TabView exclusively, this setup may not apply.

Is animated-tab-bar still maintained?

The README does not state current support status. The repository's last push was in January 2022, so check recent activity and open issues before relying on it for a long-lived project.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

animated-tab-bar suits iOS developers and prototypers who want animated tab icons without writing the animation logic from scratch, especially if they already use a UITabBarController in storyboards. It is a poor fit for Android or web work, for SwiftUI-only apps, and for teams that need a library with confirmed current maintenance, where you should compare other iOS tab bar animation libraries on GitHub.

Install options & downloads