admaDIC App Development & IT Solutions

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()
}
Scroll Effects

 

www.admadic.de | webmaster@admadic.de | Legal Notice and Trademarks | Privacy
© 2005-2007 - admaDIC | All Rights Reserved
All other trademarks and/or registered trademarks are the property of their respective owners
Last Change: Sun Mar 30 09:34:00 2025 GMT