Animating a mask alongside an expanding CollectionViewCell - swift

Question

I am working on a transition during which a collectionView cell expands to reveal new elements.
In order to prevent the new elements from animating with the cell, I removed them from the animated view.
Here is an image of the view hierarchy
After I remove the elements from the animated view, they are also not being clipped by the cell anymore, revealing them before the cell has expanded.
Right now I can decide between the elements animating with the cell or the elements appearing before they should.
Here is a video of the current state of the animation
You can see the new elements appearing on the cell to the left of the selected one.
Below is the code for my animated transitioning:
let destination = transitionContext.viewController(forKey: .to)
let containerView = transitionContext.containerView
containerView.addSubview(destination.view)
// Initial state
let widthConstraint = destination.header.widthAnchor.constraint(equalToConstant: 500)
let heightConstraint = destination.header.heightAnchor.constraint(equalToConstant: 601)
NSLayoutConstraint.activate([widthConstraint, heightConstraint])
let transform = CATransform3DMakeTranslation(cellFrame.origin.x, cellFrame.origin.y, 0.0)
destination.topView.layer.transform = transform
destination.view.layer.zPosition = 999
containerView.layoutIfNeeded()
let animator = UIViewPropertyAnimator(duration: 4, dampingRatio: 10) {
// Final state
NSLayoutConstraint.deactivate([widthConstraint, heightConstraint])
destination.topView.layer.transform = CATransform3DIdentity
destination.view.layoutIfNeeded()
}
I was thinking about masking the new elements based on the frame of the expanding cell but am not sure how I could make that work.

Answer 1

An alternative solution you could do is to transition the labelingView to show only when it should be present. For example, only show your labelingView once you finish your animation transition.
Some psuedo code..
labelingView.alpha = 0
UIView.animate(withDuration: 1, animations: {
// perform transitions
}) { _ in
labelingView.alpha = 1
}

Answer 2

I solved it an it turned out to be easier than expected.
I simply created a mask based on the initial collectionViewCell and animated it to fullscreen alongside the expanding cell.
let mask = UIView()
mask.frame.origin = CGPoint(x: cellFrame.origin.x, y: cellFrame.origin.y)
mask.frame.size = CGSize(width: 500, height: 601)
mask.backgroundColor = .white
mask.alpha = 1
destination.labelingView.mask = mask
// Final mask state
mask.frame.origin = CGPoint(x: 0.0, y: 0.0)
mask.frame.size = CGSize(width: 1366, height: 1024)