Una pantalla en blanco es lo primero que ve un visitante mientras el sitio carga. Pero podría estar viendo bloques de contenido que aparecen con suavidad.

La animación activada por desplazamiento ya no es decorativa. Dirige la atención, marca el ritmo de navegación y da vida a las páginas de aterrizaje. Pero elegir una herramienta al azar significa arriesgar el rendimiento y romper la maquetación en dispositivos móviles.

A continuación presentamos tres enfoques funcionales para la animación por desplazamiento en 2026, desde JavaScript nativo sin una sola dependencia hasta librerías listas para usar con docenas de efectos. Como extra, analizamos el fallo fatal de Revealator, un plugin que fue popular pero se quedó estancado en 2020.

💡 Resumen rápido:

• Comprenderá cómo la Intersection Observer API permite animaciones de revelado sin jQuery ni librerías de terceros
• Explorará AOS, la librería más popular (28.000 estrellas en GitHub), sus clases, atributos y configuración en 5 minutos
• Comparará ScrollReveal y AOS por curva de aprendizaje, tamaño del paquete y flexibilidad
• Sabrá por qué Revealator ya no puede usarse en proyectos nuevos
• Obtendrá una tabla comparativa y una elección lista para su tarea

Intersection Observer API, un enfoque nativo sin dependencias

Una API del navegador que monitoriza cuándo un elemento intersecta con la ventana gráfica. Sin jQuery, sin polyfills para navegadores modernos. El soporte alcanza al 97%+ de la audiencia global según Can I Use.

El principio es simple: usted crea un observador, lo adjunta a los elementos objetivo y recibe una llamada de retorno cuando un elemento entra en el área visible. En ese momento, añade una clase CSS con la animación.

1
const observer = new IntersectionObserver((entries) => {
2
  entries.forEach(entry => {
3
    if (entry.isIntersecting) {
4
      entry.target.classList.add('visible');
5
    }
6
  });
7
}, { threshold: 0.1 });
8
 
9
document.querySelectorAll('.reveal').forEach(el => observer.observe(el));

El código anterior monitoriza todos los elementos con la clase .reveal. Cuando un elemento entra en la ventana gráfica (el valor threshold se establece en el código), la animación se activa. Usted define el CSS correspondiente, cualquier @keyframes que desee.

1
.reveal {
2
  opacity: 0;
3
  transform: translateY(30px);
4
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
5
}
6
 
7
.reveal.visible {
8
  opacity: 1;
9
  transform: translateY(0);
10
}

Ventajas del enfoque: cero dependencias, sin aumento del paquete, control total sobre los disparadores y la animación CSS. Adecuado para proyectos donde cada kilobyte importa y el rendimiento en dispositivos poco potentes es crítico.

Desventajas: necesita escribir su propio envoltorio para reactivaciones, retrasos y animaciones en cascada. Las librerías ofrecen esto de serie.

Para un proyecto con JS puro y altos requisitos de velocidad, opte por Intersection Observer. Si no quiere escribir el envoltorio manualmente, considere AOS.

AOS (Animate on Scroll), una librería con 28.000 estrellas

AOS es el estándar de facto para animaciones por desplazamiento en desarrollo web. El repositorio de GitHub acumula más de 28.000 estrellas y 2.600 bifurcaciones. La librería es tan simple que la configuración lleva exactamente dos minutos.

Conecte el CSS y el JS, mediante CDN o npm:

1
<link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">
2
<script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
3
<script>AOS.init();</script>

Después, cualquier elemento con un atributo data-aos cobra vida al hacer desplazamiento:

1
<div data-aos="fade-up">Этот блок выплывет снизу</div>
2
<div data-aos="zoom-in" data-aos-delay="300">Этот — с задержкой 300 мс</div>

Hay más de 30 efectos integrados: desvanecimiento, volteo, zoom, deslizamiento en todas direcciones. Usted controla la duración (data-aos-duration), el retraso (data-aos-delay), el desplazamiento (data-aos-offset) e incluso el anclaje (data-aos-anchor), cuando la animación de un elemento se vincula a la aparición de otro.

Ventajas:

• Configuración en 5 minutos, tres líneas de código y atributos de datos
• Más de 30 funciones de aceleración integradas, animaciones en cascada y de anclaje
• Repositorio activo, los errores se cierran, no hay incidencias vencidas

Desventajas:

• Dependencia del autor: el proyecto está vivo pero las actualizaciones son poco frecuentes (la última versión es la 2.3.1)
• Enfoque puramente CSS: sin lógica programática (animaciones condicionales, parámetros dinámicos)

Use AOS cuando: necesite velocidad de desarrollo, más de 30 efectos listos para usar, animación en una página de aterrizaje típica con una docena de bloques.

ScrollReveal, una alternativa centrada en JavaScript

ScrollReveal es una librería de la misma categoría con más de 22.000 estrellas en GitHub. A diferencia de AOS, se controla desde JavaScript, no mediante atributos de datos.

1
ScrollReveal().reveal('.block', {
2
  delay: 200,
3
  distance: '50px',
4
  origin: 'bottom',
5
  duration: 600,
6
  reset: true
7
});

Diferencia clave respecto a AOS: API completa en JS. Usted modifica los parámetros de animación mediante programación, los carga desde el servidor, los vincula a condiciones. Para lógica compleja, esto lo resuelve.

Ventajas:

• Control desde JS: puede gestionar la animación desde cualquier parte del código
• reset: true, animación repetida al desplazarse hacia arriba y volver a bajar
• Soporte para selectores CSS de cualquier complejidad

Desventajas:

• Curva de aprendizaje ligeramente más pronunciada que AOS, sin enfoque visual de atributos de datos
• Menos funciones de aceleración integradas

La elección entre AOS y ScrollReveal se reduce a una cosa: atributos de datos o JavaScript. Para una página de aterrizaje típica, opte por AOS. Para una SPA donde la animación forma parte de la lógica de negocio, opte por ScrollReveal.

Revealator: una nota histórica

Revealator es un plugin jQuery de QODIO que entre 2016 y 2018 fue una solución simple para animar bloques: se adjuntan clases como revealator-fade, revealator-slideup y revealator-zoomout, y los elementos aparecen al desplazarse. La página de demostración en jQueryScript aún funciona, puede ver los efectos.

El problema es que el repositorio de GitHub se archivó en abril de 2023 con la nota «DEPRECATED, ya no recibe mantenimiento activo». El último commit significativo fue en diciembre de 2020. El plugin requiere jQuery como dependencia en un mundo donde el 97% de los sitios ya no usan jQuery para nuevas funcionalidades. No hay soporte, los errores no se corrigen, no se utilizan las API modernas del navegador.

No use Revealator en proyectos nuevos. Si lo encuentra en una base de código antigua, migre a Intersection Observer o AOS. La tarea es la misma, pero el rendimiento y la mantenibilidad son un orden de magnitud superiores.

Comparación de enfoques

Para una página de aterrizaje rápida, AOS es suficiente. Para una SPA con control programático, ScrollReveal. Para un proyecto con requisitos de rendimiento estrictos y tolerancia cero a las dependencias, Intersection Observer puro. Revealator no está en la competición.

Vea el análisis de 6 minutos de Kevin Powell, donde muestra la animación de revelado activada por desplazamiento con CSS puro e Intersection Observer, sin una sola librería.

⁉️🤔 Preguntas frecuentes

¿Por qué usar animación de revelado en una página de aterrizaje? ¿No ralentiza el sitio?

Una animación bien hecha no ralentiza nada. Intersection Observer funciona de forma asíncrona fuera del hilo principal, las animaciones CSS se renderizan en la GPU mediante transform y opacity, no se provoca repintado. Los problemas comienzan cuando se anima width, height o left/top, eso sacude la maquetación. Librerías como AOS solo animan transform y opacity. La regla principal es no animar la geometría.

¿Se puede usar AOS en un sitio con un framework JS pesado, React o Vue?

Se puede, pero con una salvedad: AOS escanea el DOM en la inicialización y no ve los elementos añadidos reactivamente después de AOS.init(). La solución es llamar a AOS.refresh() después de montar el componente. En React, eso es useEffect; en Vue, mounted. Para una integración profunda con el estado, ScrollReveal es más conveniente ya que se gestiona puramente desde JS.

¿En qué es mejor Intersection Observer que el viejo enfoque con eventos scroll de jQuery?

El enfoque jQuery adjunta un listener a scroll, el evento se dispara docenas de veces por segundo, cada llamada lee la geometría del elemento (provoca reflow), el sitio se ralentiza. Intersection Observer funciona de forma asíncrona, la llamada de retorno se invoca una vez ante un cambio real de visibilidad. En una página con 50 bloques animados, la diferencia de rendimiento es de aproximadamente 40 veces a favor de Observer, según pruebas de los desarrolladores de WebKit.

¿Qué hacer si la animación se entrecorta en el móvil?

Primero, verifique que solo está animando transform y opacity. Segundo, añada will-change: transform, opacity al elemento antes de que comience la animación y elimínelo después. Tercero, en dispositivos poco potentes, reduzca la duration a 200-300 ms: una animación rápida se percibe como más fluida que una animación lenta y entrecortada. En dispositivos con una tasa de refresco de pantalla de 60 Hz, una animación de menos de 300 ms no da tiempo a cansar la vista.

¿Se puede hacer animación de revelado sin nada de JavaScript?

Parcialmente, mediante CSS Scroll-driven Animations, pero la especificación aún es experimental: funciona en Chrome 115+, pero no en Firefox ni Safari. Para producción, necesita o bien Intersection Observer (nativo, sin librerías) o un polyfill. Para un sitio en producción en 2026, la opción mínima es Intersection Observer sin librerías: JS nativo, cero dependencias, soporte completo.

Qué enfoque elegir para una página de aterrizaje en 2026

Si está haciendo una página de aterrizaje típica con 5-10 bloques y una fecha límite para «ayer», AOS. Tres líneas de código, 30 efectos, difícil de estropear.

Si es una SPA en React/Vue y la animación está ligada a la lógica de negocio, ScrollReveal. El control programático compensa los 5 minutos extra de configuración.

Si el presupuesto de rendimiento es estricto y el diseñador dibujó animaciones únicas, Intersection Observer. Cero kilobytes, control total sobre el CSS, máxima velocidad.

No use Revealator. El plugin era bueno en 2016, pero el mundo ha avanzado.

Pruebe AOS en una página de prueba, npm install aos --save o CDN en 5 minutos. Sienta la diferencia entre una página de aterrizaje estática y una página donde los bloques cobran vida al desplazarse. Escriba en los comentarios qué enfoque eligió y por qué.