SwiftUI NavigationStack Hero Animation Effect - Custom Matched Geometry Effect - iOS 17 - Xcode 15

[@Kavsoft]

Update:
In the latest iteration of Xcode, the preferences are not functioning as expected. To resolve this issue, simply replace the view within the .overlayPreference() function in the ContentView.swift file with the following code:
struct LayerView: View {
var selectedProfile: Profile?
var hideView: (Bool, Bool)
var value: [String: Anchor]
var pushView: Bool
/// Storing Source Rect
@State private var sourceRect: CGRect = .zero
var body: some View {
GeometryReader(content: { geometry in
if let selectedProfile, let anchor = value[selectedProfile.id] {
let rect = pushView ? geometry[anchor] : sourceRect
ImageView(profile: selectedProfile, size: rect.size)
.offset(x: rect.minX, y: rect.minY)
/// Simply Animating the rect will add the geometry Effect we needed
.animation(.snappy(duration: 0.35, extraBounce: 0), value: rect)
.transition(.identity)
.onAppear {
if sourceRect == .zero {
sourceRect = rect
}
}
.onDisappear {
sourceRect = .zero
}
.opacity(!hideView.0 ? 1 : 0)
}
})
}
}
Then, simply pass this view in the overlayPreference() method, as shown below:
.overlayPreferenceValue(MAnchorKey.self, { value in
LayerView(selectedProfile: selectedProfile, hideView: hideView, value: value, pushView: pushView)
})

[@Kavsoft]

Updated Version:
ruclips.net/video/vuMm9r5H8d0/видео.html

[@jacobzheng3792]

Finally! It seems much better than the .matchedGeometryEffect() modifier.

[@bilalsimsek7306]

Great tutorial..

[@Mahadev-x7u]

Amazing achievement 👍

[@pkt-dev]

looking super cool , instead of 0.45 delay can we use @State true on appear then perform tupple action ?

[@OBLIVIOUSKARI]

God that looks amazing. Wondering I can wrap that into something reusable.

[@jazz_devk1]

though placing photos over screen main size works!

[@OBLIVIOUSKARI]

Does this work on ios16?

[@t0p1c85]

Is the animation effect only works on snappy?
I'd try spring and easeInOut, but it didn't work properly with the image animation.
TKS!

[@Kavsoft]

I just tested with spring, bouncy, and InteractiveSpring animations; it’s fine; even easeInOut is working, but when using easeInOut, the image is pushed to top left, and it’s expanding from there.

[@t0p1c85]

@@Kavsoft My image animation can't work properly by dismiss the DetailView. It can zoom in the picture, but it can't zoom back out.

[@johannes_g]

Hey, great content! But I have a question: How would you deal with the overlay on the home view going beyond the bounds of the list when it scrolls?

[@Kavsoft]

Hi, just to clarify, did you ask about how to add a detail view as a scroll view?

[@johannes_g]

There is an issue with the overlay image placed on top of the List. Because whatever content is vertically above the List will be hidden below the overlay image since the overlay does not respect the boundaries of the List - the overlay images will scroll beyond the bounds of the List. Try placing any view in a VStack with your List, and you will understand my issue.

[@King_Slayer_06]

@@johannes_g Hey did you find solution to this? I'm also facing same issue.

[@luiscosta5284]

Similar question as others here, how can you overlay a scroll view for long content?

[@Kavsoft]

Just for clarification, are you asking how to convert the detail view into a scrollable view?

[@luiscosta5284]

correct @@Kavsoft

[@shimonbalzera8618]

WOW!!

[@ho6y]

So there is no way to do this through NavigationLink? :( makes the code messy

[@Kavsoft]

As of now, the matchedgeometry effect won’t work on sheets or navigation links.

[@damidami2843]

Its so sad that you can’t do this between pages using navigationlink

[@jazz_devk1]

stopped my code during injection of new content