How to create asymmetric transitions

Paul Hudson @twostraws September 3rd 2021

Updated for Xcode 14.0 beta 1

SwiftUI lets us specify one transition when adding a view and another when removing it, all done using the asymmetric() transition type.

For example, we can create a text view that uses asymmetric transitions so that it moves in from the leading edge when added and moves down to the bottom edge when being removed, like this:

struct ContentView: View {
    @State private var showDetails = false

    var body: some View {
        VStack {
            Button("Press to show details") {
                withAnimation {
                    showDetails.toggle()
                }
            }

            if showDetails {
                Text("Details go here.")
                    .transition(.asymmetric(insertion: .move(edge: .leading), removal: .move(edge: .bottom)))
            }
        }
    }
}

Download this as an Xcode project

Sponsor Hacking with Swift and reach the world's largest Swift community!

How to create asymmetric transitions

Similar solutions…