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.
- Live demo & playground of what we've build.
- Watch Video on YouTube
- MDN Docs about CSS has selector
- HTML and JavaScript part can be found in /src/app.tsx
- The styling part can be used in /src/index.css
React (could also be built with Vanilla JS), TypeScript, Vanilla CSS (using the has() selector!), CSS Variables.
Wallpaper source: https://unsplash.com/photos/4wzRuAb-KWs
Icons source: https://macosicons.com/#/