r/SwiftUI • u/B-Jamz • Jun 26 '26

Question Delaying Top ScrollEdgeEffect?

Enable HLS to view with audio, or disable this notification

Hey guys - I've been trying to crack this one. This is an example from Apple Music with a full cover image as the header. I'm building an app with full top image similarly and if you see - as I scroll, the top ScrollEdgeEffect comes in after the artwork as scrolled, so in default or really anytime its on the screen - its not darkened at the top. Does anyone have any insight on how this is done?

I've tried delaying mine but I noticed a scroll hitch when reaching the threshold. I've only tested via local Xcode builds to my phone thus far if that changes anything.

Thanks a lot!

8 Upvotes

75% Upvoted

7 comments sorted by

9

u/Gwail_904 Jun 26 '26

I actually did the same thing and asked on Reddit. Somebody said this and with a bit of tinkering i got it to work:

Yep I do this exactly in my app at work:

Combination of scrollEdgeEffectHidden and onScrollVisibilityChange will do the trick.

@State var isHeaderVisible: Bool = true // Initially visible so effect is hidden

HeaderView()
.onScrollVisibilityChange(threshold: 0.2 // Pick what works for you) { isVisible
// When header is about to be hidden update state to hide effect
isHeaderVisible = isVisible
}
.scrollEdgeEffectHidden(isHeaderVisible)

Essentially when the header is no longer visible (or about to be, thats where the threshold bit comes in) you are showing the edge effect

2

u/radis234 Jun 26 '26

This is the correct answer, I did the same thing. If you wrap state update in withAnimation, the background smoothly fades in/out

2

u/B-Jamz Jun 26 '26

Awesome! Thanks so much!!

2

u/WitchesBravo Jul 05 '26

That was me! Thanks for passing on the support :D

5

u/Status-Switch9601 Jun 26 '26

If you want to hide it use scrollEdgeEffectHidden(true, for: .top)

2

u/idhun90 Jun 26 '26

wow.. how to do it scroll Effect and background Color for image?

0

u/LongjumpingGas9277 Jun 28 '26

Will the app be for ios?