Apple Music » Introduction


The screens are created in Sketch, but we’ll use Framer Design to quickly recreate the mini-player.

We’ll combine different animations (with different timings) to transition from the full-screen player to the mini-player, and back.

Other things we’ll touch on in this tutorial:

  • Import from Sketch
  • Use filters to make layers grayscale, or invert their colors
  • Use the Background Blur effect
  • Make some elements (Tab Bar and Status Bar) appear on all screens
  • Use a module to create a music player that has a (scrubbable) progress bar, volume control, and time playing and time remaining readouts.
  • Use a Text Layer
  • Create a function that uses bits of JavaScript to show the current day in that Text Layer
  • Use ScrollComponents, also inside other ScrollComponents…
  • … and use Direction Lock to not have them scroll at the same time
  • Wrap masked Sketch groups in a ScrollComponent
  • Use a PageComponent
  • Use parent layers to resize the pages in that PageComponent