Cómo animar la entrada y salida de avisos tipo toast
Cómo animar toasts y snackbars: de qué borde deben entrar, cuánto tiempo permanecer, el apilado y por qué el movimiento no puede llevar solo el mensaje.
Idea clave
Un toast debe entrar desde el borde al que pertenece, permanecer el tiempo necesario para leerse y salir más rápido de lo que llegó. Anima transformación y opacidad, acorta la salida y pausa el temporizador mientras el usuario pasa el cursor o enfoca. El movimiento no es el mensaje: quien usa lector de pantalla necesita una región viva, y un error no debe desaparecer antes de poder leerse.
Entra desde el borde al que pertenece
Un toast que aparece abajo debe deslizarse desde abajo; un aviso anclado arriba a la derecha debe venir de ahí. Eso le da un hogar físico y evita que el ojo lo busque. Evita animar desde el centro de la pantalla, porque hace que los mensajes cortos parezcan alertas.
Entrada, permanencia y salida son tres tiempos distintos
La entrada necesita tiempo para ser notada; la permanencia no es una animación, es tiempo de lectura; la salida debe ser rápida, porque el mensaje ya se absorbió. Un desvanecido largo en la salida hace que la interfaz parezca lenta justo cuando el usuario quiere seguir.
Apilar sin saltos
Cuando llegan varios avisos, decide si los nuevos empujan la pila, aparecen encima o sustituyen al más antiguo. Elige lo que elijas, anima el reflujo. Los toasts que saltan a una posición nueva mientras otro se anima parecen rotos.
Da tiempo y control al usuario
Pausa el temporizador al pasar el cursor y al enfocar con el teclado. No cierres automáticamente los errores ni nada que contenga una acción que el usuario deba realizar. Un toast que desaparece antes de leerse es peor que no mostrarlo.
El movimiento no es el anuncio
La animación avisa a quien ve la pantalla; quien usa lector de pantalla necesita una región viva con la cortesía adecuada. Los mensajes importantes deben quedarse en el DOM el tiempo suficiente para leerse. Usa el rol status para confirmaciones rutinarias y el rol alert con moderación, porque interrumpe.
Movimiento reducido
Sustituye el deslizamiento por un desvanecido corto y mantén el cambio de posición instantáneo. El mensaje debe seguir apareciendo en un lugar predecible, así que no elimines el movimiento de diseño que ayuda a encontrarlo.
Principios clave para recordar
- Entra desde el borde al que está anclado el toast
- Permanece el tiempo de lectura y sale más rápido de lo que entró
- Anima el reflujo de la pila para que los mensajes no salten
- Pausa el cierre al pasar el cursor y al enfocar; nunca cierres errores automáticamente
- Acompaña el movimiento con una región viva para lectores de pantalla
Preguntas frecuentes
Fuentes
- ARIA live regions — MDN Web Docs
- Motion — Apple Human Interface Guidelines
- prefers-reduced-motion — MDN Web Docs