We aren’t entirely sure what this effect is called. In any case, we did a quick draft of what we want to achieve when someone scrolls up/down the page.
We have a rough idea how to go about it, but not entirely sure about laying out the phone images.
Is there a good (structured) way to lay out those phone images? Should we be using a grid? Or just eyeball our way?
Our read-only link is here
Thanks!
@skinpores I think better way to do this animation is adding classes to elements (normal element position, and pseudo class for completed animation keyframes).
After that you need to create a page scroll trigger just use this service from @Finsweet team.
In my rough example, a combined version is presented (for animating smartphones, the interactions are used:
And to slide Section 1 to top, add a class to the element using a script generated in Finswit service:
Also on page added short CSS code for correct calculating height of section:
Super helpful! Thanks for the detailed instruction 
