Floating Dock Navigation
macOS-style floating dock: icons magnify and lift as the pointer approaches, driven by a cosine falloff and GSAP quickTo setters.
About This Component
macOS-style floating dock: icons magnify and lift as the pointer approaches, driven by a cosine falloff and GSAP quickTo setters. A single self-contained component: one HTML file, one stylesheet, one script, vanilla JavaScript and GSAP, no framework. Ships in three visual variants (vault, glass and brutal) switched by a single data-variant attribute, so you can preview it in a style close to your own site before restyling.
What's Included
- Proximity magnification: scale 1.0 to 1.6 on a smooth cosine bell curve
- 60fps quickTo setters, no tween allocation per mouse move
- Tooltip label rises with the magnified icon
- Rests flat on touch devices; every icon stays a normal tap target
- Icon count and spacing are plain HTML, no JS config
- Three shipped variants: vault, glass, brutal
Perfect For
- SaaS dashboard quick-action docks
- Portfolio and studio sites wanting Apple-tier polish
- Floating bottom navigation on hybrid mobile/desktop layouts
How It Works
Proximity magnification
On every pointer move the script measures the distance from the pointer to each icon centre along the dock axis. A cosine bell turns that distance into a scale and a lift, and gsap.quickTo setters apply them without allocating a tween per frame.