Sliding card on a fixed screen.

Hi, I'm trying to recreate the transition/sliding movement shown here:


When a button is clicked, the content area slides in (or out). But the header is fixed. Only the content area slides.


I currently have a design where the header and the footer are fixed (dont move). And when a button is clicked a new card slides into place. Very similar to the example above.

Is there a straight-forward tutorial about this type of interaction? I've attached a screenshot. Thank you.


sliding cards.png


Please sign in to leave a comment.