SwiftUI ScrollView adds unwanted animation automatically

Question

I have an issue with animations within a SwiftUI ScrollView. I can reproduce it in a Playground with the code seen below. I just want to animate the opacity but it also animates the scaling. If I use a VStack instead of a ScrollView it works. But I need it to be scrollable.

Did someone experienced the same issue and could give me a quick hint?

Actual behaviour: https://giphy.com/gifs/h8DSbS1xZ9PJyHIJrY

import SwiftUI
import PlaygroundSupport

struct ContentView: View {

    @State var showText = 0.0
    var body: some View {
        ScrollView {

        Text("Test")
            .font(.title)
            .opacity(showText)
        Text("Another really really long text")
            .opacity(showText)
        }
    .frame(width: 320, height: 420)
    .background(Color.red)
    .onAppear {
        withAnimation(Animation.easeInOut(duration: 1)) {
            self.showText = 1.0
        }
        }
    }
}

PlaygroundPage.current.liveView = UIHostingController(rootView: ContentView())

Asperi Asperi · Accepted Answer · 2020-05-06T07:28:53

Here is possible solution. Tested with Xcode 11.4 / iOS 13.4

ScrollView {
    VStack {
        Text("Test")
            .font(.title)
        Text("Another really really long text")
    }
    .fixedSize()
    .opacity(showText)
}

SwiftUI ScrollView adds unwanted animation automatically

1 Answers