ios – Maintain 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 top modifications instantly with no animation.

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

This is the code:

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

So the self.keyboardAdjustedListHeight is connected to to the checklist view:

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

Your entire modal is is simply

ZStack 
  - VStack (date header)
       - drag gesture
  - VStack (checklist view)
       - positioned underneath 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 supposed 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()) { top in
                        let unadjustedKeyboardHeight = self.keyboardUnadjustedHeight - top
                        self.keyboardAdjustedListHeight = unadjustedKeyboardHeight
                        
                        if top > .zero {
                            self.animateShrinkModal.toggle()
                        }
                        
                        change (self.modalState) {
                        case .didShow:
                            self.modalState = .didShow
                        default:
                            break
                        }
                    }

As you’ll be able to see I solely set off the animation when the keyboard top shouldn’t be zero. The modal top is reset with out an animation proper after the keyboard top is zero which is properly after the drag ends. Even dragging slowly towards the keyboard has the specified impact.