Cómo animar pestañas y controles segmentados con indicador deslizante
Guía para animar pestañas y controles segmentados con indicador deslizante: cálculo de posiciones, transiciones de paneles, soporte de redimensión y accesibilidad ARIA.
Idea clave
Un control segmentado premium utiliza una única píldora indicadora deslizante compartida que se desplaza entre los botones de las pestañas mediante transform: translate y scaleX. Esto crea continuidad visual al cambiar de sección. Los paneles de contenido deben desvanecerse con un desplazamiento sutil y las flechas del teclado deben permitir navegar de pestaña en pestaña.
Píldora deslizante única frente a bordes individuales
En lugar de animar un borde inferior en cada pestaña por separado, utiliza un único elemento de fondo o indicador que se traslade a la posición de la pestaña activa. El ojo humano sigue el movimiento continuo como un objeto físico que cambia de lugar.
Cálculo y física de la píldora
Obtén la posición left y el width de la pestaña activa en el DOM y aplica un muelle a translateX y width. Durante el desplazamiento rápido entre pestañas distantes, estirar ligeramente el ancho transmite inercia.
- Anima el indicador mediante transform en lugar de left/width cuando sea viable
- Recalcula posiciones automáticamente al redimensionar la ventana (ResizeObserver)
- Asegura contraste suficiente entre el texto de la pestaña y la píldora
- Evita animaciones de rebote exageradas que tapen el texto
Transiciones de los paneles de contenido
Al cambiar de pestaña, el contenido entrante debe mostrarse con un fundido suave y un desplazamiento de 4 a 8 px en la dirección de navegación, evitando saltos bruscos de altura.
Pautas de navegación por teclado
Implementa el patrón WAI-ARIA Tabs: role="tablist", role="tab" y role="tabpanel". Los usuarios deben navegar entre pestañas con las flechas de dirección y activar con Enter o Espacio.
Fragmento de implementación en producción
/* Sliding pill container */
.tab-list {
position: relative;
display: flex;
background: #f3f4f6;
padding: 4px;
border-radius: 12px;
}
.sliding-indicator {
position: absolute;
top: 4px;
bottom: 4px;
background: white;
border-radius: 8px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1),
width 200ms cubic-bezier(0.16, 1, 0.3, 1);
}Principios clave para recordar
- Usa un indicador único compartido para crear continuidad física
- Adapta la píldora a cambios de pantalla con ResizeObserver
- Navega entre pestañas con flechas de dirección mediante patrón ARIA
- Desvanece el indicador directamente ante movimiento reducido
Preguntas frecuentes
Fuentes
- Tabs Pattern — W3C WAI-ARIA Authoring Practices
- Segmented Buttons — Material Design 3