SwiftUI Scroll Effects

by Annett Schwarze | 2025-03-30

ScrollViews in SwiftUI can be enhanced with scroll effects. To add scroll effects the view modifier .scrollTransition is available. The sample below shows offset effects and rotation effects.

        
import SwiftUI

struct IdImg: Identifiable{
    var id = UUID()
    var image: Image
    init(image: Image) {
        self.image = image
    }
}

@available(iOS 17.0, *)
struct SampleScrollEffectsView: View {
    @State var flowers: [IdImg] = [
        IdImg.init(image: Image("flower1")),
        IdImg.init(image: Image("flower2")),
        IdImg.init(image: Image("flower3"))
    ]

    var body: some View {
        ScrollView(.horizontal) {
            LazyHStack(spacing: 25) {
                ForEach(flowers) { flower in
                    FlowerPhoto(image: flower)
                        .scrollTransition(
                            axis: .horizontal
                        ) { content, phase in
                            return content
                                .rotationEffect(.degrees(phase.value * 25))
                                .offset(x: phase.value * -250)
                        }
                        .containerRelativeFrame(.horizontal)
                        .clipShape(RoundedRectangle(cornerRadius: 32))
                }.scrollTargetLayout()
            }
            .scrollTargetBehavior(.paging)
        }.background(Color.black)
    }
}

@available(iOS 17.0, *)
struct FlowerPhoto: View {
    var image: IdImg
    var body: some View {
        image.image
            .resizable()
            .aspectRatio(contentMode: .fit)
    }
}

@available(iOS 17.0, *)
#Preview {
    SampleScrollEffectsView()
}