Magnify with transforms

Scale icons with transform so the dock never changes width.

Sam Selikoff@samselikoff
Been wanting to add some missing details to my macOS Dock clone for a while, got some in last night: - No container shift from icon scale - Left/right adjustment near edges - Rebuilt with transforms (rather than width) - Bounce + tooltips React is just too dang fun!!
Nov 6, 2024View on X ↗
Sam Selikoff@samselikoff.com
Just updated my Mac Dock demo with transform-only animations, a smoother container, and bouncy app icons! buildui.com/recipes/magn...
Nov 7, 2024View on Bluesky ↗

1 · Slide across the dock

Move over each dock, or drag a finger along it.

Width and heightBad
width: 38px → 64pxContainer moved0px
TransformGood
scale(1.7)Container moved0px
.slot { transform-origin: 50% 100%; transition: transform 120ms var(--ease-out); }

// every pointermove: scale by distance, then slide neighbours aside
const s = 1 + 0.7 * (cos(PI * clamp(d / R, -1, 1)) + 1) / 2;
slot.style.transform = `translateX(${shift}px) scale(${s})`;
// the dock itself keeps its width, so nothing under the pointer moves

Why it matters, pros and cons

Why it matters

Width and height change layout, so the dock resizes and every icon shifts. A transform only repaints.

Pros

  • The dock keeps its width, so icons stay where the pointer expects them.
  • Transforms run on the compositor and skip layout, even with many icons.
  • Each icon is shifted by a computed offset, so neighbours glide, not jump.

Cons

  • You compute every icon's offset in JavaScript, which is more code than a width.
  • Scaled icons overflow the dock, so you reserve room above it.
  • Scaling a bitmap past 1x can blur it; draw icons large and scale down.