Animated move behaviour of a collection header view.

https://i.stack.imgur.com/5gAUn.gif


In the movie above you see that both the label under the image view and the header view will move out of the way to make room for the focused item. I was wondering how they achieved this effect. You see that most developers just create extra whitespace to avoid overlapping when an item gets in it's focus state, however this doesn't seem like the most elegant way to solve the issue. The way Apple did it, is in my opinion.


I first thought they hard coded it on the first item, but when the caption of the header view is larger and would overlap with the second item, then the effect also occurs there. Can anyone give me some pointers in the right direction?