Apple Music » Making the “Library” screen scrollable

Making the “Library” screen scrollable

Currently, we only see the “Library” screen, because the other artboards are all to the right, off-screen (with the same distance between them as in the Sketch file). We’ll move them over later, when we need them.

When you scroll to the bottom of the Layer Panel, you’ll see that our Library artboard (now a layer, of course) contains three child layers: Status_Bar, Tabs, and Library_content. (The last two have children of their own.)

In the Layer Panel: “Library” and its child layers

Well, the content of the screen itself is in Library_content, and with the ScrollComponent’s wrap() function we make it scrollable:

scroll_library = ScrollComponent.wrap $.Library_content

Our new ScrollComponent, scroll_library, will by default be scrollable in all directions, so also sideways, but that’s easily fixed by disabling its scrollHorizontal.

scroll_library.scrollHorizontal = no

The end of the page is partly hidden by the Tab Bar so we should add a bit of contentInset:

scroll_library.contentInset =
    bottom: $.Tabs.height + 80
Download Framer project

I’ve used the height of $.Tabs, but added an extra 80 points to make space for the mini-player.

The “Library” screen can be scrolled