Showing parts of the other cards

There’s a small detail: A part of the second card should already be visible, as an affordance to signal that you can swipe. (Just like with the “Recently Played” albums, where the third album also peeps in.)

So our cards should be smaller. We need to cut a slice of the first one’s right edge, make the “Favourites Mix” card smaller on both sides, and cut a bit of the left side of “Chill Mix.” We can do this by placing each card inside another layer that will serve as a mask.

(By the way, you can delete the addPage() lines we used.)

First, a wrapper for the first card:

wrapper1 = new Layer
    width: $.New_Music_mix.width - 15
    height: $.New_Music_mix.height
    backgroundColor: null
    clip: yes

We reuse the card’s height but subtract 15 points from its width. We get rid of the layer’s default backgroundColor by setting it to null, and by enabling clip, the layer will act as a mask.

Then we place $.New_Music_mix inside it:

$.New_Music_mix.parent = wrapper1
$.New_Music_mix.y = 0

We now do need to set its vertical position, though. That wasn’t needed earlier because addPage() automatically corrects x and y positions.

And now we add our wrapper as a page to the mixes PageComponent.

mixes.addPage wrapper1

For the second card, “Favourites Mix,” we do the same:

wrapper2 = new Layer
    width: $.Favourites_mix.width - 30
    height: $.Favourites_mix.height
    backgroundColor: null
    clip: yes
$.Favourites_mix.parent = wrapper2
$.Favourites_mix.y = 0          # Reset y-position
$.Favourites_mix.x = -15        # Reposition

With one difference: We move it 15 points to the left.

This way its parent layer, wrapper2, will cut 15 points off its left side and 15 points off its right side.

And the third card, “Chill Mix,” loses 15 points of its left side:

wrapper3 = new Layer
    width: $.Chill_mix.width - 15
    height: $.Favourites_mix.height
    backgroundColor: null
    clip: yes
$.Chill_mix.parent = wrapper3
$.Chill_mix.y = 0               # Reset y-position
$.Chill_mix.x = -15             # Reposition
mixes.addPage wrapper3