Navigation
Animated Tabs Indicator
A tab bar whose active pill slides between tabs instead of jumping.
Opens with this animation loaded. Nothing is uploaded — the scene travels in the link.
.tabs {
transform: translate3d(0px, 0px, 0);
transform-origin: 240px 160px;
}
.tab-track {
transform: translate3d(60px, 138px, 0);
width: 360px;
height: 44px;
background: #14161f;
border-radius: 12px;
}
.active-indicator {
transform: translate3d(64px, 142px, 0);
width: 112px;
height: 36px;
background: #6366f1;
border-radius: 9px;
animation: active-indicator-anim 3000ms linear 0ms infinite both;
will-change: transform, opacity;
}
@keyframes active-indicator-anim {
0% {
transform: translate3d(64px, 142px, 0);
animation-timing-function: ease-in-out;
}
26% {
transform: translate3d(64px, 142px, 0);
animation-timing-function: ease-in-out;
}
37% {
transform: translate3d(184px, 142px, 0);
animation-timing-function: ease-in-out;
}
60% {
transform: translate3d(184px, 142px, 0);
animation-timing-function: ease-in-out;
}
71% {
transform: translate3d(304px, 142px, 0);
animation-timing-function: ease-in-out;
}
90% {
transform: translate3d(304px, 142px, 0);
animation-timing-function: ease-in-out;
}
100% {
transform: translate3d(64px, 142px, 0);
}
}
.tab-design {
transform: translate3d(64px, 142px, 0);
width: 112px;
height: 36px;
background: #00000000;
border-radius: 9px;
color: #ffffff;
font-size: 13px;
font-weight: 600;
transition: color 160ms ease-out;
}
.tab-design:hover {
color: #e7e9ee;
}
.tab-motion {
transform: translate3d(184px, 142px, 0);
width: 112px;
height: 36px;
background: #00000000;
border-radius: 9px;
color: #8b90a0;
font-size: 13px;
font-weight: 600;
transition: color 160ms ease-out;
}
.tab-motion:hover {
color: #e7e9ee;
}
.tab-code {
transform: translate3d(304px, 142px, 0);
width: 112px;
height: 36px;
background: #00000000;
border-radius: 9px;
color: #8b90a0;
font-size: 13px;
font-weight: 600;
transition: color 160ms ease-out;
}
.tab-code:hover {
color: #e7e9ee;
}
@media (prefers-reduced-motion: reduce) {
.active-indicator,
.tab-design,
.tab-motion,
.tab-code {
animation: none;
transition: none;
}
}Why it is built this way
The indicator is one element that moves, rather than a background toggled on each tab. That single moving object is what tells the eye the tabs are related — and it means only one element animates no matter how many tabs you add.
What it animates
1 property across 1 CSS declaration. The bar shows when each one is moving.
transformWhat it costs to run
X is handled by the compositor: no layout, no repaint, and the work can run off the main thread. This is the cheap end of CSS animation, which is why it stays smooth on a slow phone where other properties will not.
It runs for 3.00s across 7 keyframe stops, with every property moving over the same window.
One curve throughout: Ease In Out on a plain box. Keeping a single easing across every property is what makes a multi-property animation read as one movement rather than several things happening at once.
Accessibility
Nothing here hides content — x moves over 3.00s and the element is visible throughout. The exported prefers-reduced-motion guard still silences it, which matters most for the looping ones: motion that never stops is the kind that makes people feel unwell.