Alignment Animation in SwiftUI

DevTechie Inc

Jun 24, 2022

Photo by Max van den Oetelaar on Unsplash

Another animatable property in SwiftUI is the alignment property. We can easily see this in action with either VStack or HStack.

Let’s create an example where we will animate three images with different animation curves.

Alignment animation with VStack

struct AlignmentAnimation: View {
    @State private var animate = false
    
    var body: some View {
        VStack(alignment: animate ? .leading: .trailing, spacing: 20) {
            Text("Alignment Animation by DevTechie")
                .font(.title3)
                .frame(maxWidth: .infinity)
                .frame(height: 50)
                .background(Color.orange)
            
            Image(systemName: "bus")
                .animation(.easeInOut, value: animate)
            Image(systemName: "bicycle")
                .animation(.linear, value: animate)
            Image(systemName: "airplane")
                .animation(.spring(), value: animate)
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .top)
        .onTapGesture {
            animate.toggle()
        }
    }
}

Alignment animation with HStack

struct AlignmentAnimation: View {
    @State private var animate = false
    
    var body: some View {
        HStack(alignment: animate ? .top: .bottom, spacing: 40) {
            Text("Alignment \nAnimation \nby \nDevTechie")
                .font(.title3)
                .frame(maxHeight: .infinity)
                .frame(maxWidth: .infinity)
                .background(Color.orange)
            
            Image(systemName: "bus")
                .animation(.easeInOut, value: animate)
            Image(systemName: "bicycle")
                .animation(.linear, value: animate)
            Image(systemName: "airplane")
                .animation(.spring(), value: animate)
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .top)
        .onTapGesture {
            animate.toggle()
        }
    }
}

With that we have reached the end of this article. Thank you once again for reading. Subscribe to our weekly newsletter at https://www.devtechie.com