Parallax effect in SwiftUI is offsetting images in list rows

79 views Asked by At

I am learning to use parallax effect in SwiftUI. I got it working for my images in my list view. The only issue I am seeing with it is that it offsets the images the more list rows I have, as if the lower the rows are the lower the images are offset. I added a blue border for visual troubleshooting. I can only think of I am setting the calculation to the whole code. How would I ensure that the parallax is applied to every list row image individually without the image overflowing?

enter image description here

struct PostView: View {
    var post: sometest

    var body: some View {
        VStack(alignment: .leading, spacing: 4) {
            HStack(alignment: .top) {
                ZStack(alignment: .leading) {
                    // Parallax Effect for Display Image
                    GeometryReader { geometry in
                        let minY = geometry.frame(in: CoordinateSpace.named("ScrollViewSpace")).minY
                        let parallaxOffset = minY * 0.1 // Adjust this factor for parallax intensity
                        
                        displayImageView(for: post)
                        //.resizable()
                        .scaledToFill()
                            .frame(width: 100, height: 100)
                            .offset(y: parallaxOffset)
                    }
                    .frame(width: 100, height: 100)
                    .cornerRadius(10)
                    .overlay(
                    RoundedRectangle(cornerRadius: 10)
                        .stroke(.blue, lineWidth: 1)
                    )
                    
                    .shadow(color: Color.black, radius: 6, x: 0, y: 0)
                    .clipped() 
                    .padding(.leading, -8)
                    
                }
            }
        }
    }

I also tried adding minY and maxHeight to explicitly declared as CGFloat. That fixed the images from bleeding but prevented parallax from working.

let parallaxOffset = min(max(minY, -maxHeight / 2), maxHeight / 2) * 0.2
0

There are 0 answers