ios – LinearGradient offset animation not working in SwiftUI

I am making an attempt to steadily reveal a block of Textual content line by line utilizing a LinearGradient by animating its offset(y:) place but it surely doesn’t appear to work. Here is what I’ve:

struct GradientView: View {
    @State var animateGradient = false
    @State var animateBlur = false
    @State var isVisible: Bool = false
    let textual content = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim advert minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. "
    
    var physique: some View {
        VStack {
            GroupBox {
                Toggle("Seen", isOn: $isVisible.animation())
            }

            if isVisible {
                Textual content(textual content)
                    .font(.title2)
                    .daring()
                    .overlay {
                        GeometryReader { proxy in
//                            Shade.purple // << works
                            LinearGradient(colours: [.clear, .white], startPoint: .high, endPoint: .backside) // << doesn't work
                                .body(top: proxy.dimension.top)
                                .offset(y: animateBlur ? proxy.dimension.top : 0)
                                .animation(.easeInOut(period: 1), worth: animateBlur)
                                .onAppear {
                                    animateBlur.toggle()
                                }
                                
                        }
                    }
                    .clipShape(Rectangle())
            }
            Spacer()
        }
        .onChange(of: isVisible, {
            if isVisible == false { animateBlur = false }
            withAnimation {
                animateGradient.toggle()
            }

            withAnimation(.easeOut.delay(0.5)) {
                animateGradient.toggle()
            }
        })
        .padding()
    }
}

There are a few points at current.

1. It appears to work with Shade however not with LinearGradient. After the animation runs, I nonetheless see the LinearGradient overlaying the underside half of the textual content. I might like for the LinearGradient to animate out of view vertically in order to indicate the whole textual content block.
2. With simply [.clear, .white] because the gradient colours, given the peak of the textual content & distribution of the gradient colours in 50-50 proportion, it reveals greater than only one line. I can replace the colours to have extra whites i.e. [.clear, .white, .white, .white, .white, .white] such that the clear portion is constricted to the highest of the gradient however that’s not possible. I additionally tried utilizing gradient stops like so LinearGradient(stops: [.init(color: .clear, location: 0.1), .init(color: .white, location: 0.9)] but it surely didn’t yield anticipated outcomes.

Any assistance is appreciated.