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
And now we add our wrapper as a page to the
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