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