Las animaciones con scroll hacen que los elementos aparezcan, se muevan o cambien a medida que desplazas la página. Dejaron de ser una moda para convertirse en un estándar del diseño web actual. En esta guía verás qué son, ejemplos de cada tipo y, sobre todo, cómo hacerlas con código: desde CSS puro hasta GSAP, con un ojo en el rendimiento y la accesibilidad.
Qué son las animaciones con scroll
Son animaciones cuyo avance lo controla la posición del scroll, no el paso del tiempo. En lugar de reproducirse solas al cargar, se vinculan a cuánto has desplazado la página o a si un elemento ha entrado en pantalla. Eso te da control: el usuario «conduce» la animación con la rueda del ratón o el dedo.
Se usan para guiar la mirada, dar ritmo a una landing y hacer que una web cuente una historia. Bien aplicadas, suman. Mal aplicadas, marean y ralentizan. La diferencia está en la mesura y en la técnica.
Tipos de efectos y ejemplos
- Reveal al entrar: el elemento aparece (fundido, deslizamiento) cuando entra en pantalla. Es el más común y el más rentable.
- Parallax: el fondo se mueve a distinta velocidad que el primer plano y crea sensación de profundidad.
- Barra de progreso: una barra superior que se llena según avanzas. Útil en artículos largos.
- Scroll horizontal: secciones que se desplazan en horizontal mientras haces scroll vertical.
- Pin o sticky: un elemento se fija mientras el resto sigue desplazándose, típico en secciones tipo «paso a paso».
- Scrollytelling: texto y gráficos sincronizados para contar datos, como en reportajes de prensa.
Para inspirarte con ejemplos reales y actuales, echa un vistazo a los premiados de Awwwards y a las demos de Codrops. Verás en vivo cómo los estudios top usan estas técnicas sin pasarse.
Cómo hacerlas: 4 técnicas con código
1. CSS scroll-driven animations (nativo)
La novedad más potente. Desde 2024 puedes animar con scroll sin una sola línea de JavaScript, usando animation-timeline. La función view() sirve para revelar un elemento cuando entra en pantalla; scroll(), para barras de progreso o parallax ligados al contenedor.
.reveal {
animation: aparecer linear both;
animation-timeline: view();
animation-range: entry 0% cover 40%;
}
@keyframes aparecer {
from { opacity: 0; transform: translateY(40px); }
to { opacity: 1; transform: translateY(0); }
}Corre fuera del hilo principal, así que va muy fluido. La pega: en 2026 solo lo soportan los navegadores Chromium (Chrome y Edge); Safari y Firefox aún no. Úsalo como mejora progresiva, dejando el contenido visible si el navegador no lo entiende.
2. Intersection Observer (JavaScript nativo)
Si necesitas compatibilidad total hoy, esta es la vía nativa. Detecta cuándo un elemento entra en pantalla y le añades una clase para disparar la animación con CSS.
const obs = new IntersectionObserver((entradas) => {
entradas.forEach((e) => {
if (e.isIntersecting) e.target.classList.add('visible');
});
}, { threshold: 0.2 });
document.querySelectorAll('.reveal').forEach((el) => obs.observe(el));3. AOS (Animate On Scroll)
La opción más rápida para fundidos y deslizamientos simples. Pesa unos 8 KB y se controla con atributos data-aos, sin escribir lógica.
<div data-aos="fade-up">Aparezco al hacer scroll</div>
<script>AOS.init();</script>Si solo quieres «que aparezca al verse», AOS te sobra y te ahorra el peso de una librería grande.
4. GSAP + ScrollTrigger
El estándar profesional para animaciones complejas: pin, scroll horizontal, líneas de tiempo sincronizadas. Y una gran noticia: desde abril de 2025, tras la compra por Webflow, GSAP es 100 % gratis, incluido ScrollTrigger y todos los plugins que antes eran de pago, con licencia comercial.
gsap.registerPlugin(ScrollTrigger);
gsap.from('.caja', {
scrollTrigger: '.caja',
y: 100,
opacity: 0,
duration: 1
});Para ese scroll suave y con inercia que ves en las webs premiadas, se combina con Lenis (unos 3 KB), que no rompe ni position: sticky ni el Intersection Observer.
Tip: Si prefieres no partir de cero, en Envato Elements tienes plantillas web y proyectos con animaciones de scroll ya montadas (muchas sobre GSAP) con licencia comercial.
Cuál elegir según tu proyecto
| Necesitas | Mejor opción |
|---|---|
| Fundidos simples al aparecer | AOS o CSS view() |
| Compatibilidad total hoy | Intersection Observer |
| Máximo rendimiento sin JS | CSS scroll-driven |
| Pin, scroll horizontal, timelines | GSAP ScrollTrigger |
| Scroll suave con inercia | Lenis (+ GSAP) |
Mi consejo: no metas GSAP para hacer cuatro fundidos. Empieza por lo ligero (CSS o AOS) y sube a GSAP solo cuando el efecto lo justifique.
Rendimiento y accesibilidad
- Anima solo
transformyopacity: son las propiedades que el navegador mueve sin recalcular el diseño. - Nunca escondas contenido esencial detrás de una animación. Si el script falla, el texto debe verse igual.
- Respeta a quien prefiere menos movimiento con
prefers-reduced-motion. Es accesibilidad, no un extra.
@media (prefers-reduced-motion: reduce) {
.reveal { animation: none; opacity: 1; transform: none; }
}Más sobre diseño y desarrollo web
- Microinteracciones útiles: 15 ejemplos con código
- Trucos y tutoriales de CSS
- Todo el blog de diseño web
Preguntas frecuentes
¿Las animaciones con scroll ralentizan la web?
No, si animas solo transform y opacity y evitas librerías pesadas para efectos simples. Las CSS scroll-driven corren fuera del hilo principal y van especialmente fluidas.
¿Funcionan en móvil?
Sí, pero con moderación. En pantallas pequeñas conviene reducir el movimiento y priorizar los reveal simples sobre parallax o scroll horizontal, que pueden entorpecer la lectura.
¿Necesito una librería o me llega con CSS?
Para revelar elementos, hoy te llega con CSS o Intersection Observer. Para efectos encadenados, pin o scroll horizontal, GSAP ScrollTrigger sigue siendo lo más cómodo, y ahora es gratis.
¿Son malas para el SEO?
No, mientras el contenido esté en el HTML y sea visible sin ejecutar la animación. El problema aparece solo si ocultas texto que depende de un script para mostrarse.
Empieza por un reveal sencillo, mídelo y sube de nivel cuando el proyecto lo pida. Si te ha servido, compártelo!
