I’m experiencing some unexpected behavior with a slide transition in a SwiftUI view.

I have a series of slides within an HStack that I want to animate through when a button is pressed.

I expected that I’d need to calculate individual offsets for each slide to make them appear and disappear correctly.

However, when using the same offset calculation for each slide, the transition still behaves correctly, and I’m trying to understand why.

Here’s the relevant part of my code:

struct OnboardingView: View {
    @StateObject private var viewModel = OnboardingViewModel()

    func calculateOffset(_ index: Int, _ screenWidth: CGFloat) -> CGFloat {
        let difference = index - viewModel.currentPage
        return screenWidth * CGFloat(difference)
    }

    var body: some View {
        GeometryReader { geometry in
            let screenWidth = geometry.frame(in: .global).size.width

            HStack(spacing: 0) {
                SlideView1()
                    .frame(width: screenWidth)
                    .offset(x: calculateOffset(1, screenWidth))
                SlideView2()
                    .frame(width: screenWidth)
                    .offset(x: calculateOffset(1, screenWidth))
                SlideView3()
                    .frame(width: screenWidth)
                    .offset(x: calculateOffset(1, screenWidth))
            }
        }
        .background(Color.blue.ignoresSafeArea())
        .safeAreaInset(edge: .bottom) {
            VStack {
                Text("Current Page: (viewModel.currentPage)")
                Button("Next") {
                    withAnimation {
                        viewModel.currentPage += 1
                    }
                }
            }
        }
    }
}

class OnboardingViewModel: ObservableObject {
    @Published var currentPage = 1
}

struct SlideView1: View {
    var body: some View {
        Text("Slide 1")
    }
}

struct SlideView2: View {
    var body: some View {
        Text("Slide 2")
    }
}

struct SlideView3: View {
    var body: some View {
        Text("Slide 3")
    }
}


class OnboardingViewModel: ObservableObject {
    @Published var currentPage = 1
}

As you can see, calculateOffset(1, width) is used for all slides, yet the view transitions correctly with each button press.

To provide more context, here’s an image from the Xcode view hierarchy debugger showing all the slides lined up side by side, which seems to confirm that the layout is as expected for an HStack:

I’m puzzled as to why this works. My expectation was that each slide should have its own offset calculation based on its position in the stack.

Could someone help me understand the underlying mechanics of why the shared offset leads to the correct behavior?