Tab Bar Icon Select
The chosen icon fills and lifts while its label brightens, and the icon you left releases.
The animated component in this preview is rendered from the canonical file shown here. The surrounding demo shell only provides context and is not part of the copied code.
import { useId, useState } from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
/**
* Vibary · Tab Bar Icon Select
*
* Selecting a section fills its icon and brings its label up to full
* strength, while the icon you left releases. Nothing travels betweenAbout this pattern
Selection in a bottom bar, where nothing is supposed to travel. Each icon answers for itself: the outline cross-fades to a solid glyph, a soft wash comes up beneath it, and the one you left releases at the same rate. The glyph swap is two shapes at the same size traded by opacity rather than one path morphed into another, because interpolating path data distorts the silhouette exactly halfway through. The pop belongs to the icon; the label only brightens, since it is text and a label that changes size — or weight, which reflows the word — makes the whole bar twitch on every press. Even the icon's spring stays near critical damping: this control gets pressed hundreds of times a day, and a bouncing one wears out in an afternoon.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Mobile navigation
The selected section's glyph is solid and tinted while the others stay hollow.
Related patterns
- Mobile Menu FullscreenA hamburger becomes a close glyph as a full-screen menu wipes in with staggered links.
- Floating Action ExpandThe round action button opens into a labelled list of actions that climb out of it, nearest first.
- Sidebar CollapseA navigation rail narrows to icons, with labels leaving before the width closes so text is never squeezed.