Skip to content
All effectsNavigation

Magnify Bar

Items grow as the pointer comes near them, up to 130% — any more and the targets move out from under the pointer — and spring back when it leaves.

Pure CSSNavigationPro

Usage

Meant for

ToolbarSidebar railAction Bar

Examples

On a Toolbar

Move the pointer along the Toolbar, slide a finger over it, or tab into it and use the arrow keys. Each button grows with its closeness to the pointer, up to 130% — any more and the buttons move out from under the pointer — and every one springs back when the pointer leaves. Only transform changes, from the bottom edge, so the row never re-lays out. Keyboard focus needs no script: the focused button and its neighbours grow the same way. Until you reach for it, the preview runs a travelling wave.

The class is wm wm-magnify-bar — the first half is the marker the trigger and reduced-motion rules hook into, the second is the effect.