I just rebuilt Apple Music on iOS using React and Framer Motion.
This app is a treasure trove of tiny, beautiful details and I wanted to break down everything I noticed along the way.
Let's get started!
The star of the show is the album art's spring animation.
It grows faster and more dramatically than it shrinks – easy to do with variant-scoped transitions. And Framer Motion handles all the gnarly details around maintaining velocity and acceleration across interrupts.
0:000:00
Next, it's easy to miss, but the play button itself bounces on tap. It also stays scaled down if you tap and hold.
Framer Motion's onTopStart and onTop gesture APIs make it easy to achieve both effects in one tidy animation, directly on the element.
0:000:00
Another subtle detail here is the animation speed. The button finishes animating faster than the album art.
💡 This is an iOS design principle where larger elements animate more slowly so that they "feel" heavier. That's why on iOS, switching apps is the "heaviest" animation.
0:000:00
Next up, the progress bar. A tricky thing here is that it needs to animate smoothly while the music is playing.
Using React state for this would cause too many rerenders, but Framer Motion has a perfect answer for this: a Motion Value. It updates outside of React's render phase.
0:000:00
Being able to move seamlessly back and forth between React state (for the timecodes) and Framer Motion (for the scrubber) is one of my favorite aspects of working with the library.
It lets you keep using React exactly where it makes sense.
This next part impressed me the most: building the draggable scrubbers.
Making an element horizontally draggable is as easy as adding drag="x". Can't get more declarative than that!
0:000:00
dragConstraints stops the scrubber from going outside the progress bar.
dragControls lets you set the x position, so when you click anywhere on the bar you can snap the scrubber to where you clicked.
0:000:00
💡 You might not think of dragging an element as an animation, but it's actually in the same problem space: the element needs to track the user's mouse at 60fps without destroying your app's performance.
The next part is my favorite detail of the whole app:
The timecodes nudge out of the way when you drag the scrubber close to the edges.
0:000:00
This was surprisingly easy to do. I already have the currentTime in state, so if I'm within 15% of the end of the track, I just nudge each timecode down by 15 pixels.
Pulling this off felt magical.
The final detail is the background. It's subtle, but it's actually an animated gradient of colors sampled from the album art.
If you speed up a video you can see the movement clearly.
0:000:00
I needed to go back to high school geometry class for this one.
First, kick off an infinite animation from 1 to 2π. Then, use sine and cosine to transform that value into x,y coordinates.
You can then use those coordinates to animate an element along the path of a circle.
0:000:00
The circle's actually going to be our camera frame.
If we turn the circle into a rectangle that fills the screen, we can just make this a background with a nice gradient. Scale it up, slow down the transition speed, and we have the basis for our animation.
0:000:00
After that it's just a matter of tweaking the scale and colors to produce a pleasing result.
Another tiny detail that gives us that extra bit of polish we've come to know and love from iOS.
0:000:00
A lot of these effects are so subtle you might not even realize that they're there – but you'd notice if they were gone. The app would feel stiff and lifeless.
Framer Motion lets me go the extra mile to get these results without disturbing the React code I've already written.
menu
Pay what you can