Web Motion Atlas / Atlas de animación web

Antes de usarlo Mantén el contenido legible y el desplazamiento normal. Con movimiento reducido, muestra el estado completo.

Implementa este efecto con HTML, CSS y JavaScript.
Línea de tiempo al desplazar / Timeline on scroll
La línea crece al desplazarse y revela los hitos en orden.
Usos: Historia, etapas y procesos de incorporación
scroll + transform
Mantén el contenido legible y el desplazamiento normal. Con movimiento reducido, muestra el estado completo.
Respeta el objetivo, activador y comportamiento. Admite 320px, teclado y prefers-reduced-motion; conserva el orden y el foco.

Antes de usarlo Mantén el contenido legible y el desplazamiento normal. Con movimiento reducido, muestra el estado completo.

Implementa este efecto con HTML, CSS y JavaScript.
Revelado de texto al desplazar / Scroll text reveal
Las palabras ganan color según avanza la lectura.
Usos: Mensajes breves y presentación de marca
scroll + opacity
Mantén el contenido legible y el desplazamiento normal. Con movimiento reducido, muestra el estado completo.
Respeta el objetivo, activador y comportamiento. Admite 320px, teclado y prefers-reduced-motion; conserva el orden y el foco.

Antes de usarlo Mantén el contenido legible y el desplazamiento normal. Con movimiento reducido, muestra el estado completo.

Implementa este efecto con HTML, CSS y JavaScript.
Tarjetas apiladas / Stacking cards
La siguiente tarjeta sube y la anterior retrocede.
Usos: Servicios y secuencias de casos
scroll + transform
Mantén el contenido legible y el desplazamiento normal. Con movimiento reducido, muestra el estado completo.
Respeta el objetivo, activador y comportamiento. Admite 320px, teclado y prefers-reduced-motion; conserva el orden y el foco.

Antes de usarlo Mantén el contenido legible y el desplazamiento normal. Con movimiento reducido, muestra el estado completo.

Implementa este efecto con HTML, CSS y JavaScript.
Cambio de color de fondo / Background color change
La paleta del fondo sigue la posición de lectura.
Usos: Separación de capítulos y temas
scroll + background-color
Mantén el contenido legible y el desplazamiento normal. Con movimiento reducido, muestra el estado completo.
Respeta el objetivo, activador y comportamiento. Admite 320px, teclado y prefers-reduced-motion; conserva el orden y el foco.

Antes de usarlo Mantén el contenido legible y el desplazamiento normal. Con movimiento reducido, muestra el estado completo.

Implementa este efecto con HTML, CSS y JavaScript.
Cabecera que se oculta / Hide-on-scroll header
El menú se oculta al bajar y reaparece al subir.
Usos: Artículos largos y navegación móvil
scroll direction + transform
Mantén el contenido legible y el desplazamiento normal. Con movimiento reducido, muestra el estado completo.
Respeta el objetivo, activador y comportamiento. Admite 320px, teclado y prefers-reduced-motion; conserva el orden y el foco.

Antes de usarlo Mantén el contenido legible y el desplazamiento normal. Con movimiento reducido, muestra el estado completo.

Implementa este efecto con HTML, CSS y JavaScript.
Seguimiento de sección / Scrollspy
El índice destaca la sección que se está leyendo.
Usos: Guías largas y especificaciones
scroll position + aria-current
Mantén el contenido legible y el desplazamiento normal. Con movimiento reducido, muestra el estado completo.
Respeta el objetivo, activador y comportamiento. Admite 320px, teclado y prefers-reduced-motion; conserva el orden y el foco.

Antes de usarlo Mantén el contenido legible y el desplazamiento normal. Con movimiento reducido, muestra el estado completo.

Implementa este efecto con HTML, CSS y JavaScript.
Botón para volver arriba / Back to top
Aparece al bajar y permite regresar al inicio.
Usos: Listas largas y volver a explorar
scrollTo + focus
Mantén el contenido legible y el desplazamiento normal. Con movimiento reducido, muestra el estado completo.
Respeta el objetivo, activador y comportamiento. Admite 320px, teclado y prefers-reduced-motion; conserva el orden y el foco.

Antes de usarlo Mantén el contenido legible y el desplazamiento normal. Con movimiento reducido, muestra el estado completo.

Implementa este efecto con HTML, CSS y JavaScript.
Zoom al desplazar / Scroll zoom
La escena se amplía para acercar el sujeto.
Usos: Detalles de producto e imágenes principales
scroll + scale
Mantén el contenido legible y el desplazamiento normal. Con movimiento reducido, muestra el estado completo.
Respeta el objetivo, activador y comportamiento. Admite 320px, teclado y prefers-reduced-motion; conserva el orden y el foco.

Antes de usarlo No dependas del puntero: permite tocar y usar el teclado. Los formularios no envían datos.

Implementa este efecto con HTML, CSS y JavaScript.
Inclinación 3D / 3D tilt
La tarjeta se inclina según la posición del puntero.
Usos: Portafolios y productos
pointermove + perspective
No dependas del puntero: permite tocar y usar el teclado. Los formularios no envían datos.
Respeta el objetivo, activador y comportamiento. Admite 320px, teclado y prefers-reduced-motion; conserva el orden y el foco.

Antes de usarlo No dependas del puntero: permite tocar y usar el teclado. Los formularios no envían datos.

Implementa este efecto con HTML, CSS y JavaScript.
Luz sobre el puntero / Spotlight hover
Una luz sigue el puntero e ilumina el borde.
Usos: Selección de funciones y elementos
radial-gradient + Pointer Events
No dependas del puntero: permite tocar y usar el teclado. Los formularios no envían datos.
Respeta el objetivo, activador y comportamiento. Admite 320px, teclado y prefers-reduced-motion; conserva el orden y el foco.

Antes de usarlo No dependas del puntero: permite tocar y usar el teclado. Los formularios no envían datos.

Implementa este efecto con HTML, CSS y JavaScript.
Cambio de imagen al pasar / Image swap on hover
Pasa el puntero o toca para ver otro color o vista.
Usos: Variantes y comparación de caras
opacity + :focus-visible
No dependas del puntero: permite tocar y usar el teclado. Los formularios no envían datos.
Respeta el objetivo, activador y comportamiento. Admite 320px, teclado y prefers-reduced-motion; conserva el orden y el foco.

Antes de usarlo No dependas del puntero: permite tocar y usar el teclado. Los formularios no envían datos.

Implementa este efecto con HTML, CSS y JavaScript.
Texto rodante / Text roll
El texto sube y su reemplazo aparece desde abajo.
Usos: Enlaces breves y menús
overflow + translateY
No dependas del puntero: permite tocar y usar el teclado. Los formularios no envían datos.
Respeta el objetivo, activador y comportamiento. Admite 320px, teclado y prefers-reduced-motion; conserva el orden y el foco.

Antes de usarlo No dependas del puntero: permite tocar y usar el teclado. Los formularios no envían datos.

Implementa este efecto con HTML, CSS y JavaScript.
Vista previa de imagen / Hover image preview
Toca una entrada para ver una imagen de ese lugar.
Usos: Portafolios y destinos
pointermove + focus
No dependas del puntero: permite tocar y usar el teclado. Los formularios no envían datos.
Respeta el objetivo, activador y comportamiento. Admite 320px, teclado y prefers-reduced-motion; conserva el orden y el foco.

Antes de usarlo No dependas del puntero: permite tocar y usar el teclado. Los formularios no envían datos.

Implementa este efecto con HTML, CSS y JavaScript.
Etiqueta flotante / Floating label
La etiqueta sube y permanece visible al escribir.
Usos: Formularios de contacto e inscripción
label + :placeholder-shown
No dependas del puntero: permite tocar y usar el teclado. Los formularios no envían datos.
Respeta el objetivo, activador y comportamiento. Admite 320px, teclado y prefers-reduced-motion; conserva el orden y el foco.

Antes de usarlo No dependas del puntero: permite tocar y usar el teclado. Los formularios no envían datos.

Implementa este efecto con HTML, CSS y JavaScript.
Validación en línea / Inline validation
El error y su corrección aparecen junto al campo.
Usos: Comprobar el formato del correo
ValidityState + aria-invalid
No dependas del puntero: permite tocar y usar el teclado. Los formularios no envían datos.
Respeta el objetivo, activador y comportamiento. Admite 320px, teclado y prefers-reduced-motion; conserva el orden y el foco.

Antes de usarlo No dependas del puntero: permite tocar y usar el teclado. Los formularios no envían datos.

Implementa este efecto con HTML, CSS y JavaScript.
Botón de carga / Loading button
Muestra el progreso y el resultado e impide repeticiones.
Usos: Respuesta al guardar o enviar
disabled + aria-busy
No dependas del puntero: permite tocar y usar el teclado. Los formularios no envían datos.
Respeta el objetivo, activador y comportamiento. Admite 320px, teclado y prefers-reduced-motion; conserva el orden y el foco.

Antes de usarlo Conserva el acceso al contenido y ofrece pausa o cierre, incluso sin soporte del efecto.

Implementa este efecto con HTML, CSS y JavaScript.
Transición de vista / View transition
La misma imagen conecta la tarjeta con sus detalles.
Usos: Pasar de una lista al detalle
document.startViewTransition
Conserva el acceso al contenido y ofrece pausa o cierre, incluso sin soporte del efecto.
Respeta el objetivo, activador y comportamiento. Admite 320px, teclado y prefers-reduced-motion; conserva el orden y el foco.

Antes de usarlo Conserva el acceso al contenido y ofrece pausa o cierre, incluso sin soporte del efecto.

Implementa este efecto con HTML, CSS y JavaScript.
Caja de luz / Lightbox
Amplía una imagen y vuelve al punto de origen al cerrar.
Usos: Fotografías, obras y diagramas
dialog.showModal + close
Conserva el acceso al contenido y ofrece pausa o cierre, incluso sin soporte del efecto.
Respeta el objetivo, activador y comportamiento. Admite 320px, teclado y prefers-reduced-motion; conserva el orden y el foco.

Antes de usarlo Conserva el acceso al contenido y ofrece pausa o cierre, incluso sin soporte del efecto.

Implementa este efecto con HTML, CSS y JavaScript.
Puntos interactivos / Hotspots
Selecciona un punto del dibujo para leer su descripción.
Usos: Partes de productos y lugares
button + aria-expanded
Conserva el acceso al contenido y ofrece pausa o cierre, incluso sin soporte del efecto.
Respeta el objetivo, activador y comportamiento. Admite 320px, teclado y prefers-reduced-motion; conserva el orden y el foco.

Antes de usarlo Conserva el acceso al contenido y ofrece pausa o cierre, incluso sin soporte del efecto.

Implementa este efecto con HTML, CSS y JavaScript.
Cuenta regresiva / Countdown timer
El tiempo restante disminuye hasta cero y se detiene.
Usos: Plazos e inicio de eventos
performance.now + timeout
Conserva el acceso al contenido y ofrece pausa o cierre, incluso sin soporte del efecto.
Respeta el objetivo, activador y comportamiento. Admite 320px, teclado y prefers-reduced-motion; conserva el orden y el foco.

Antes de usarlo Conserva el acceso al contenido y ofrece pausa o cierre, incluso sin soporte del efecto.

Implementa este efecto con HTML, CSS y JavaScript.
Separador animado / Animated shape divider
Una onda en movimiento conecta dos secciones.
Usos: Bordes de portada y capítulos
SVG path + transform
Conserva el acceso al contenido y ofrece pausa o cierre, incluso sin soporte del efecto.
Respeta el objetivo, activador y comportamiento. Admite 320px, teclado y prefers-reduced-motion; conserva el orden y el foco.

Antes de usarlo Conserva el acceso al contenido y ofrece pausa o cierre, incluso sin soporte del efecto.

Implementa este efecto con HTML, CSS y JavaScript.
Animación de me gusta / Like animation
El corazón da un salto al cambiar la selección.
Usos: Favoritos y confirmación de guardado
aria-pressed + Web Animations
Conserva el acceso al contenido y ofrece pausa o cierre, incluso sin soporte del efecto.
Respeta el objetivo, activador y comportamiento. Admite 320px, teclado y prefers-reduced-motion; conserva el orden y el foco.

Antes de usarlo Conserva el acceso al contenido y ofrece pausa o cierre, incluso sin soporte del efecto.

Implementa este efecto con HTML, CSS y JavaScript.
Indicación de desplazamiento / Scroll cue
Un movimiento hacia abajo señala más contenido; púlsalo para ir.
Usos: Pasar de la portada al artículo
scrollIntoView + focus
Conserva el acceso al contenido y ofrece pausa o cierre, incluso sin soporte del efecto.
Respeta el objetivo, activador y comportamiento. Admite 320px, teclado y prefers-reduced-motion; conserva el orden y el foco.

Antes de usarlo Conserva el acceso al contenido y ofrece pausa o cierre, incluso sin soporte del efecto.

Implementa este efecto con HTML, CSS y JavaScript.
Vídeo de fondo / Background video
Reproduce una escena detrás de un mensaje legible.
Usos: Viajes, espacios y marcas
video + muted + playsinline
Conserva el acceso al contenido y ofrece pausa o cierre, incluso sin soporte del efecto.
Respeta el objetivo, activador y comportamiento. Admite 320px, teclado y prefers-reduced-motion; conserva el orden y el foco.