SwiftUI Button fade animation happens with a delay when in ScrollView

Question

Created Apr ’25

Replies 3

Boosts 0

Participants 4

When we place a Button inside a ScrollView , the fade animation of the button is delayed, so most users won't see it I think. You can see this in the trivial example

 struct ContentView: View {
    var body: some View {
        ScrollView {
            Button {
                // empty
            } label: {
                Text("Fade animation test")
            }
        }
    }
}

Is there any way to opt out of this behavior? In UIKit, this was also the default behavior, but you could always change it by overriding touchesShouldCancel method.

I think I can probably do that by rewriting an animation completely with some custom ButtonStyle or by rewriting a Button component completely, but it doesn't seem like a good solution to me, as I want the native look and feel (in case of button animation it is pretty easy to mimic though).

And also for some components, like lists, Apple has already implemented the correct behavior by themselves somehow.

Boost

Answer 1

Claude31 OP

Apr ’25

I tested (in simulator) and did not notice , any delay. I compared with the same button outside the scroll view, no difference.

most users won't see it I think.

So, what's the point ?

What animation do you mean ?

What do you see ?
What did you expect ?

0

Answer 2

FilonenkoM OP

Apr ’25

I thought it would reproducible for everyone, as it was for me across frameworks and devices. Here are the two recordings - with and without ScrollView. I turned on touch indication, so you can see that the animation on Button happens with a significant delay. When I was writing that most users won't see it, I was referring to the animation, not the delay.

0

Answer 3

Kaspel4711 OP

Apr ’25

I see the behavior too, did you find any hints on how to mitigate this?

Cheers,

0

	struct ContentView: View {
	var body: some View {
	ScrollView {
	Button {
	// empty
	} label: {
	Text("Fade animation test")
	}
	}
	}
	}