Apple Music » A Page Component for the “New Music Mix,” “Favourites Mix,” and “Chill Mix” cards

A Page Component for the “New Music Mix,” “Favourites Mix,” and “Chill Mix” cards

We want to be able to swipe between the “New Music Mix,” “Favourites Mix,” and “Chill Mix” with one card always snapping to the center of the screen (a carousel). So we’ll use a PageComponent.

mixes = new PageComponent
    frame: $.New_Music_mix.frame # Reusing the frame
    parent: $.For_you
    scrollVertical: no
    directionLock: yes

A layer’s frame property contains both the layer’s dimensions (width and height) and its position (x and y), so this way the PageComponent will occupy the same space in its parent layer ($.For_you) as the original card.

The PageComponent is transparent gray because it’s still empty

Now we can use the addPage() function to add the cards, like this:

mixes.addPage $.New_Music_mix
mixes.addPage $.Favourites_mix
mixes.addPage $.Chill_mix
Download Framer project
The three cards inside the PageComponent