Framer Classic » Apple Music » The “Now Playing” screen

The “Now Playing” screen

The only artboard we haven’t used yet is the “Now Playing” screen. It’s another scrollable one because it also contains lyrics and a list of upcoming songs.

scroll_now_playing = new ScrollComponent
    width: Screen.width
    height: Screen.height - 33
    y: 33
    scrollHorizontal: no
    directionLock: yes

The ScrollComponent is placed 33 points lower because there’s a gap at the top of the screen. The “Now Playing” screen actually begins 13 points below the 20 points of the Status Bar.

And because it’s placed lower we also subtract those same 33 points from Screen.height when setting its height.

By the way, this is how it should look in the end:

How the “Now Playing” screen should look eventually

Direction lock is enabled because we don’t want the screen to scroll when we change the playback volume or scrub to a different point in the song.

The ScrollComponent for the “Now Playing” screen

Now the artboard.

We bring it over by setting its x to 0, and we add it to the ScrollComponent’s content layer. (Because that’s how you do it when not using wrap().)

$.Now_Playing.x = 0
$.Now_Playing.parent = scroll_now_playing.content

You’ll notice that there’s quite a lot of space at the end of the page.

Extra space at the end of “Now Playing”

That’s on purpose. Because by now setting a negative value for the contentInset (at the bottom) the user will be able to scroll beyond the end of the page (this is called overdrag) without seeing the screen underneath.

Add these lines to the ScrollComponent’s properties:

contentInset:
    bottom: -100
Extra “overdrag” space

Ah, the Tab Bar is still in the way. We’ll move it down.

Add this line, preferably higher up in the code, inside its The Tab Bar fold:

$.Tabs.y = Screen.height
Download Framer project

It places the Tab Bar just below the screen.

Later, when transitioning from the “Now Playing” screen to the mini-player, we’ll animate it back up.

The current “Now Playing” screen

Leave a Reply