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