ios – Preserve two view positions synchronized throughout animation

I’ve a questions on syncing view positions throughout an animation change.

This is the model I am aiming for, however discover when the keyboard seems, the view peak modifications instantly with no animation.

This model is what I at the moment have, with the animation when view peak shrinks, however discover on the swipe down there’s a noticeable hole between the date header and the highest of the checklist view. Sort of seems damaged.

This is the code:

                        .onReceive(keyboardHeightPublisher.removeDuplicates()) { peak in
                        withAnimation {
                            let unadjustedKeyboardHeight = self.keyboardUnadjustedHeight - peak
                            self.keyboardAdjustedListHeight = unadjustedKeyboardHeight
                        } completion: {
                            swap (self.modalState) {
                            case .didShow:
                                self.modalState = .didShow
                            default:
                                break
                            }
                        }
                    }

So the self.keyboardAdjustedListHeight is hooked up to to the checklist view:

.body(peak: self.keyboardAdjustedListHeight)
                    .place(CGPoint(x: (geometry.measurement.width / 2), y: (self.gesturePosition.y + (self.dateHeaderRect.peak / 2)) + (self.keyboardAdjustedListHeight / 2)))

All the modal is is simply

ZStack 
  - VStack (date header)
       - drag gesture
  - VStack (checklist view)
       - positioned below the date header primarily based on drag gesture place.

I attempted matchedGeometryEffect however that did not do the trick.

Any clues?

EDIT: I am aiming to get the second GIF (animated checklist view) however the one drawback is the hole upon dragging down.

SOLUTION:
Used a variation of @Benzy Neez’s answer right here.

This was the meant impact. Principally an animation of the checklist view shrinking however no separation of the date header from the checklist view on down drag.
This code is beneath the checklist view VStack.
So nonetheless:

ZStack 
    VStack (date view)
        (drag gesture updates place)
    VStack (checklist view)
        (updates place primarily based on drag gesture)

            .animation(.easeInOut, worth: self.animateShrinkModal)
                    .toolbar(content material: {
                        ToolbarItem(placement: .keyboard) {
                            EmptyView()
                        }
                    })
                    .onReceive(keyboardHeightPublisher.removeDuplicates()) { peak in
                        let unadjustedKeyboardHeight = self.keyboardUnadjustedHeight - peak
                        self.keyboardAdjustedListHeight = unadjustedKeyboardHeight
                        
                        if peak > .zero {
                            self.animateShrinkModal.toggle()
                        }
                        
                        swap (self.modalState) {
                        case .didShow:
                            self.modalState = .didShow
                        default:
                            break
                        }
                    }

As you may see I solely set off the animation when the keyboard peak is just not zero. The modal peak is reset with out an animation proper after the keyboard peak is zero which is properly after the drag ends. Even dragging slowly towards the keyboard has the specified impact.