SwiftUI animation tabs of a TabView

Question

When using TabView in SwiftUI, is it possible to modify the transitions between tab selection? Currently, when different tabs are selected, the transition is pretty sudden; actually instantaneously sudden, ouch.

For example, given the following:

TabView {
Text("The First Tab")
    .tabItem {
        Image(systemName: "1.square.fill")
        Text("First")
    }
Text("Another Tab")
    .tabItem {
        Image(systemName: "2.square.fill")
        Text("Second")
    }
Text("The Last Tab")
    .tabItem {
        Image(systemName: "3.square.fill")
        Text("Third")
    }
}

How does one add something like .transition(AnyTransition.opacity.combined(with: .slide))

Thanks !

Electrodynamic

Answer 1

You can add the .animation property to your TabView.

TabView {
   // code here
}
.animation(*animation type*)

Basic animation types you have are .default, .easeIn, .easeOut, .easeInOut and .linear.

Hope this helps!

Corinecorinna

I tried that in an Xcode Tabbed app project template.It doesn't work. – Electrodynamic

@JustinNgan Interesting... doesn't work in the template for me either, but it did work on my existing project. Will investigate further. – Corinecorinna

Yeah... though honestly, I find things in Swift sometimes do things and later it doesn't. Obviously it's not that it just does what it wants, but there are so many interactions' happening that one little change somewhere can make a huge difference. If you can make any headway on this, it would be AWESOME! ;-) – Electrodynamic

Answer 2

How does one add something like .transition(AnyTransition.opacity.combined(with: .slide))

If you are looking for slide transitions, where one panel slides out when another slides in, then you probably won't manage it with a TabView. But it is possible if you abandon TabView and construct the tabs and panel switcher yourself. See the answer to SwiftUI bi-directional move transition moving the wrong way in certain cases for an example.

Redmund