Now Playing Mini Player — Free HTML CSS JS Snippet

Music apps like Spotify and Apple Music do not open their full player as a plain modal that fades in from nowhere — the mini bar at the bottom of the screen visibly grows into the full-screen player, so the album art you were just looking at stays the same object the whole time, just bigger. That continuity is what makes the transition feel physical instead of like two disconnected screens. This snippet reproduces that exact effect using the FLIP technique (First, Last, Invert, Play), the same general approach behind iOS and Android "hero" transitions between a list item and its detail view, built with nothing but getBoundingClientRect(), CSS transforms, and one requestAnimationFrame-driven loop for the animated equalizer bars.

What FLIP actually stands for and why each step exists

FLIP is a sequence, not a single trick. First: before anything changes, measure the mini player's exact position and size on screen with getBoundingClientRect(). Last: make the destination element (the full sheet) visible at its natural, final layout — full-screen, no transform — and measure ITS rect too. Invert: compute the delta between those two rects (how far left/up the sheet's top-left corner needs to shift, and what scale factor would shrink its width/height down to the mini player's dimensions) and apply that as a transform immediately, with transitions disabled, so the sheet is technically full-size in the DOM but visually rendered exactly where the mini player was. Play: on the very next frame, remove the inverted transform and re-enable transitions, so the browser animates the transform from "shrunk down to mini-player size and position" to "none" (its natural full-size state) — which reads as the sheet growing out of the mini player.

Why the transform has to be computed, not guessed

The delta values are never hardcoded pixel numbers. expand() reads miniRect.left - sheetRect.left and miniRect.top - sheetRect.top for the translate offset, and miniRect.width / sheetRect.width plus the same ratio for height as the scale factor. This means the morph works correctly regardless of where the mini player happens to sit or how large the sheet is at any given viewport size — the same code that works in a 320px-wide mobile mockup would work identically if the container were resized, because the transform is derived from live measurements taken at the moment of the click rather than a fixed guess.

Why the transform-origin matters

sheet.style.transformOrigin is set to top left to match how the translate+scale math is computed — the delta values describe how the sheet's own top-left corner needs to move and shrink to land on the mini player's top-left corner. If the transform-origin were left at its default of center, the same translate/scale numbers would scale the sheet from its middle outward, producing a transform that visually drifts away from the mini player's actual position instead of growing cleanly out of it.

Reversing the morph on collapse

collapse() runs the identical FLIP math in the opposite direction: it measures the sheet's current (full-size) rect as the starting point, temporarily reveals the still-hidden mini player to read its target rect, then re-hides it, computes the same translate/scale delta, and animates the sheet's transform FROM none TO that inverted position — shrinking the sheet back down onto the mini player rather than just fading it away. A transitionend listener (checked against e.propertyName === 'transform' so it does not fire early on the opacity or border-radius transitions running in parallel) finally sets display: none on the sheet and restores the mini player's visibility once the shrink animation has actually finished.

The equalizer bars and progress loop

A single requestAnimationFrame loop drives two unrelated things every frame: it advances progress (a 0-1 float) by dt / DURATION seconds elapsed, which updates the scrubber fill width and handle position and the current-time label — and, only while playing is true, it assigns each equalizer bar a fresh randomized height, capped higher in the expanded sheet view (32px) than in the compact mini bar (15px). When paused, the bars simply stop being reassigned and freeze at whatever height they last had, rather than resetting to zero, which reads as "sound stopped" more naturally than an abrupt flatline.