SwiftUI: Animate Tab bar tab switch with a CrossDissolve slide?

Prafulla Singh
2 min readApr 18, 2021

XCode 12 — iOS 14

In this tutorial, We are going to implement CrossDissolve slide animation for Tab bar view.

We cannot achieve CrossDissolve animation in SwiftUI itself, unless we create custom tab bar. In this tutorial, We are going to implement crossDissolve for native Tab-bar.

As Tabbar does not give any API to add custom animation, We are going to inspect Tab-bar for UIKit’s UITabbar. After getting UITabbar, we implement the animation.

To get UITabbar using following library.

import SwiftUI
import Introspect //To Get UIView in view hierarchy
@main
struct
LoopingVideoApp: App {
var body: some Scene {
WindowGroup {
TabView {
NavigationView {
List {
Text("Menu list item 1")
}.navigationBarTitle("Menu")
}.tabItem {
Label("Menu", systemImage: "list.dash")
}
NavigationView {
List{
Text("Order list item 1")
}.navigationBarTitle("Order")
}.tabItem {
Label("Order", systemImage: "square.and.pencil")
}
}.introspectTabBarController { (tabBarController) in //Introspect library
tabBarController.delegate = tabBarControllerDelegate //update delegate

}
}
}
}
final class TabBarControllerDelegate: NSObject, UITabBarControllerDelegate {func tabBarController(_ tabBarController: UITabBarController, animationControllerForTransitionFrom fromVC: UIViewController, to toVC: UIViewController) -> UIViewControllerAnimatedTransitioning? { //add transition logic here }
}

I borrowed transition logic from here:

Logic:

1. Get from and to view controller using UITransitionContextViewControllerKey2. Get frame fo fromVC or toVC3. Check if view is moving right or left based on its index4. Update the frame respectively 5. perform move operation

Final code:

--

--