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
- 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