Framer Classic » Apple Music » Small version of the album cover on the mini-player

Small version of the album cover on the mini-player

We’ll now make an extra state for the album cover, in which it’ll be small and positioned on the mini-player, with the correct shadow.

But first, as you noticed when playing the music, the album cover is behind the mini-player. That’s easily fixed with a placeBefore():

$.Album_Cover.placeBefore Mini_Player

Now, for this new state, ”mini”, we can copy the properties of Mini_Album_Cover, that tiny album cover we created in Design. We’ll use its frame, shadowColor, shadowY, and shadowBlur

$.Album_Cover.states.mini =
    frame: Mini_Album_Cover.frame
    shadowColor: Mini_Album_Cover.shadowColor
    shadowY: Mini_Album_Cover.shadowY
    shadowBlur: Mini_Album_Cover.shadowBlur
    shadowSpread: Mini_Album_Cover.shadowSpread
    scale: Mini_Album_Cover.scale

… but we also set shadowSpread and scale, because these properties were changed by the other states. (Mini_Album_Cover just has the default values: a shadowSpread of 0 and a scale of 1.)

We actually don’t want Mini_Album_Cover to be visible; we just wanted to copy its properties. So we can hide it:

Mini_Album_Cover.visible = no

Now, as a test, you can animate to the new ”mini” state with a tap on the album cover:

$.Album_Cover.onTap ->
    $.Album_Cover.animate "mini"
Open in Framer
Testing the animation to the small album cover

Leave a Reply