frontend.fyi

Recreating the MacOS Dock hover animation with CSS

A rebuild of the Stripe Sessions speaker carousel with Tailwind CSS

Code on Github
🧑‍💻 🎥
... Almost ready!

What you’ll learn

In this video we’ll be recreating the MacOS dock animation you see when hovering an app icon on desktop. We do this by combining both the new CSS has() selector and CSS variables in a smart way. This results in us being able to quite closely replicate the dock animation, without the use of any animation libraries like Framer Motion or GASP.