Cómo animar un panel inferior o drawer móvil
Aprende a diseñar e implementar paneles inferiores móviles: seguimiento táctil en tiempo real, puntos de anclaje, físicas de muelle y gestión accesible del foco.
Idea clave
Un panel inferior intuitivo sigue el dedo del usuario en tiempo real con transform: translateY. Al soltar, calcula la velocidad del gesto y utiliza físicas de muelle para decidir si anclar en media pantalla, abrir completo o descartar. El fondo oscuro debe desvanecerse en proporción a la altura y el foco debe atraparse dentro mientras esté abierto.
Puntos de anclaje y arquitectura de estados
Los paneles inferiores modernos manejan varios puntos estables: colapsado, media altura y pantalla completa. Modela estas posiciones como estados discretos con muelles que conectan unos con otros según la inercia del arrastre.
Efecto elástico en los extremos
Al arrastrar más allá de la altura máxima o hacia el fondo, introduce resistencia progresiva (efecto goma elástica). Esto comunica visualmente que se ha alcanzado el límite físico del contenedor.
- Aplica resistencia logarítmica cuando el arrastre supera el 100% de altura
- Usa transform: translateY() para garantizar 60 o 120 FPS
- Vincula la opacidad del telón de fondo a la fracción de apertura del panel
- Cierra el panel si el usuario desliza hacia abajo con suficiente velocidad
Atenuación del fondo y gestos de descarte
Tocar el telón de fondo semitransparente debe cerrar el panel de inmediato con una animación de retorno idéntica a la del arrastre rápido hacia abajo.
Requisitos de accesibilidad
El panel debe actuar como role="dialog" modal con aria-modal="true". La tecla Escape debe cerrarlo y el foco debe quedar contenido mientras permanezca visible.
Principios clave para recordar
- Sigue el dedo en tiempo real mediante transform: translateY()
- Decide el punto de anclaje final evaluando la velocidad del gesto
- Aplica resistencia elástica al forzar los extremos
- Atrapa el foco del teclado y permite cerrar con Escape
Preguntas frecuentes
Fuentes
- Bottom Sheets Pattern — Material Design 3
- Sheets Presentation — Apple Human Interface Guidelines