Apple Music

You know how you can swipe down the “Now Playing” screen in Apple Music to magically transform it into a mini-player? I thought that would be a cool interaction to replicate in Framer.

While I was at it, I also made a few other screens scrollable (and pageable—that’s all easy, anyway). And for bonus points, why not have it actually play music?

• Introduction
• Importing the Sketch file
• Making the “Library” screen scrollable
• Making only the first tab active
• Making the “For You” screen scrollable
• Placing the Status Bar and Tab Bar on top of everything
• Making the “Recently Played” albums scrollable
• A Page Component for the “New Music Mix,” “Favourites Mix,” and “Chill Mix” cards
• Showing parts of the other cards
• Making today’s date dynamic
• Switching between the Tabs
• The “Now Playing” screen
• Transparent gray overlay behind the “Now Playing” screen
• Playing music with the Framer Audio module
• Animating the album cover
• Recreating the progress bar and timers
• Recreating the volume slider
• Drawing the mini-player in Framer Design
• Tweaking the mini-player in Code
• Small version of the album cover on the mini-player
• Transitioning from the “Now Playing” screen to the mini-player
• Transitioning from the mini-player back to “Now Playing”

Here’s the finished prototype:

The finished Apple Music prototype