SwiftUI animate opacity in gradient mask

Question

I want to animate a mountain line chart (see screenshot) so that the line appears smoothly from left to right. I tried animating the endPoint of a LinearGradient in a mask. This works as it should, but leaves the right end of the line with an opacity value < 1. I also tried animating the opacity value itself, but that doesn't animate anything. This is the View:

import SwiftUI

struct ContentView: View {
    private var datapoints: [CGFloat] = [100, 250, 200, 220, 200, 250, 350, 300, 325, 250]
    
    @State private var pct: Double = 0.0
    
    var body: some View {
        GeometryReader { geometry in
            ZStack {
                Path() { path in
                    var x = 0.0
                    path.move(to: CGPoint(x: x, y: datapoints[0]))
                    for i in (1 ..< datapoints.count) {
                        x += geometry.size.width / CGFloat(datapoints.count - 1)
                        path.addLine(to: CGPoint(x: x, y: datapoints[i]))
                    }
                }
                .stroke()
                
                Path() { path in
                    var x: Double = 0.0
                    path.move(to: CGPoint(x: x, y: datapoints[0]))
                    for i in (1 ..< datapoints.count) {
                        x += geometry.size.width / CGFloat(datapoints.count - 1)
                        path.addLine(to: CGPoint(x: x, y: datapoints[i]))
                    }
                    path.addLine(to: CGPoint(x: path.currentPoint!.x, y: geometry.size.height))
                    path.addLine(to: CGPoint(x: 0, y: geometry.size.height))
                }
                .fill(LinearGradient(colors: [.black.opacity(0.25), .black.opacity(0)], startPoint: .top, endPoint: .bottom))
            }
            .mask(LinearGradient(stops: [Gradient.Stop(color: .black, location: 0), Gradient.Stop(color: .black.opacity(pct), location: 1)], startPoint: .leading, endPoint: .trailing))
                .onAppear() {
                    withAnimation(.linear(duration: 3)) {
                        pct = 1.0
                    }
                }
//            .mask(LinearGradient(stops: [Gradient.Stop(color: .black, location: 0), Gradient.Stop(color: .black.opacity(0), location: 1)], startPoint: .leading, endPoint: pct == 1 ? .trailing : .leading))
//                .onAppear() {
//                    withAnimation(.linear(duration: 3)) {
//                        pct = 1.0
//                    }
//                }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

This is the result if uncomment the commented out lines: