How to make this animation? viz. Connect the shared element

Question

There is this great ui guide which shows some cool ui transitions.

I would like to know how to do this animation (the great one).

I know how to do the good one. I also have some success with the great one (by taking snapshot of the next viewcontroller to be presented and expanding it inside animateTransition(using transitionContext: UIViewControllerContextTransitioning)).

However I do not know how the great one pushes it's adjecent views on both sides.

I would like get an idea on how to do exactly that(push out). I do not need code. Just a general guide is fine.

EDIT: I ended up implementing Kubba's idea.

trungduc's idea of animating tableview cell height has some drawbacks. The cell position is not proper before and after transition. Also, syncing the animation of viewcontroller frame with tableview cell height proved to be futile. Nevertheless it was a good solution although perhaps for a slightly different problem.

Project

Answer 1

I'd try something like this:

• take a snapshot of current controller
• extract two pieces from it: (1) from top of the card to top of the screen and (2) from the bottom of the card to bottom of the screen
• place them in places where they should be
• move (1) tho the top and (2) to the bottom along with your current transition

Another idea, which could be easier to achieve: you can just divide the snapshot on two pieces in the middle of expanding card but I'm not sure how animation would behave