Mata tus Librerías JavaScript de Scroll: Las Animaciones CSS Scroll-Driven Están Listas para Producción | Blanche

El Impuesto JavaScript en Cada Interacción de Scroll

Este número merece un momento de reflexión: el sitio promedio de una agencia creativa carga entre 40 y 120KB de librerías JavaScript de animación antes de que se ejecute una sola línea de código personalizado. El núcleo de GSAP más ScrollTrigger ronda los 60KB minificado. Son 60KB que bloquean, parsean y se ejecutan en el hilo principal — exactamente el mismo hilo que usa tu navegador para responder a la entrada del usuario y pintar fotogramas.

Durante años, este fue el costo inevitable de hacer negocios. ¿Querías parallax suave vinculado al scroll, animaciones de revelado, secciones ancladas e indicadores de progreso? Recurrías a GSAP. Sin más opciones. La plataforma nativa simplemente no podía competir.

Esa era está llegando a su fin.

La API de Animaciones CSS Scroll-Driven — una especificación que se estabilizaba silenciosamente mientras el mundo frontend debatía sobre frameworks — es ahora viable para producción en la mayoría del tráfico real de proyectos de agencia. Mueve la coordinación de animaciones completamente fuera del hilo principal, hacia el compositor del navegador. Sin costo de parseo de JavaScript. Sin listeners de eventos de scroll. Sin bucles requestAnimationFrame.

Esto no es un artículo especulativo sobre una funcionalidad experimental. Es una auditoría de lo que puedes lanzar ahora mismo, lo que ganas con ello, y los pocos casos donde tu licencia de GSAP sigue justificándose.

Cómo Funcionan Realmente las Animaciones CSS Scroll-Driven Bajo el Capó

Para entender la historia de rendimiento, necesitas entender la arquitectura. Las animaciones JavaScript estándar basadas en scroll funcionan así: un evento de scroll se dispara en el hilo principal → tu handler lee scrollY → actualiza los estilos de los elementos → el navegador repinta. Cada paso es síncrono, cada paso ocurre en el hilo principal, y a 60fps tienes aproximadamente 16,7ms para hacerlo todo o pierdes un fotograma.

Las Animaciones CSS Scroll-Driven cortocircuitan todo este bucle.

La API introduce dos nuevos tipos de línea de tiempo que reemplazan al tiempo como motor de animación:

ScrollTimeline — vincula el progreso de la animación a la posición de scroll de un contenedor
ViewTimeline — vincula el progreso de la animación a la posición de un elemento dentro del viewport

En CSS, usas la propiedad animation-timeline para asociar cualquiera de estas líneas de tiempo a una animación @keyframes estándar. El navegador entonces gestiona el cálculo del progreso dentro del hilo compositor — el mismo proceso aislado responsable de los transforms y la opacidad acelerados por GPU. El hilo principal no interviene en absoluto durante el scroll.

@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.reveal-card {
  animation: fade-in-up linear both;
  animation-timeline: view();
  animation-range: entry 0% entry 40%;
}

Eso es todo. Sin JavaScript. Sin IntersectionObserver. Sin toggle de clases. La función view() crea un ViewTimeline con alcance al propio elemento, y animation-range define exactamente en qué fase de la entrada del elemento al viewport se activa la animación.

La propiedad animation-range merece atención especial — te da un control preciso usando fases con nombre: entry, exit, contain y cover, cada una con puntos de inicio y fin en porcentaje. Esto reemplaza lo que la mayoría de los equipos usaba con la sintaxis de offsets start y end de ScrollTrigger.

Reconstruyendo 4 Efectos de Scroll Habituales en Agencias Sin Una Sola Línea de JS

1. Indicador de Progreso de Scroll

La barra de "progreso de lectura" en la parte superior de los artículos es el hola-mundo canónico de ScrollTrigger. Aquí está en CSS puro:

@keyframes grow-bar {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: #6c5ce7;
  transform-origin: left;
  animation: grow-bar linear;
  animation-timeline: scroll(root block);
}

La función scroll() aquí crea un ScrollTimeline vinculado al eje de bloque del elemento raíz. Antes esto requería la opción scrub de ScrollTrigger y un trigger anclado — ahora son dos líneas.

2. Revelado Escalonado de Tarjetas al Entrar en el Scroll

En GSAP usarías gsap.from('.card', { opacity: 0, y: 40, stagger: 0.1, scrollTrigger: { trigger: '.grid', start: 'top 80%' }}). El equivalente en CSS usa :nth-child para simular el escalonado mediante animation-delay:

.card {
  animation: fade-in-up linear both;
  animation-timeline: view();
  animation-range: entry 5% entry 35%;
}

.card:nth-child(2) { animation-delay: calc(var(--stagger, 80ms) * 1); }
.card:nth-child(3) { animation-delay: calc(var(--stagger, 80ms) * 2); }
.card:nth-child(4) { animation-delay: calc(var(--stagger, 80ms) * 3); }

Para listas dinámicas, una pequeña cantidad de JS para establecer custom properties --stagger-index al montar el componente es perfectamente aceptable y no requiere una librería de animación completa.

3. Capa de Fondo con Parallax

@keyframes parallax-shift {
  from { transform: translateY(-15%); }
  to { transform: translateY(15%); }
}

.hero-bg {
  animation: parallax-shift linear both;
  animation-timeline: view();
  animation-range: cover 0% cover 100%;
  will-change: transform;
}

El rango cover significa que la animación abarca todo el tiempo que el elemento intersecta el viewport — perfecto para el parallax donde quieres movimiento continuo a lo largo del scroll.

4. Sección de Scroll Horizontal

Aquí es donde las cosas se ponen interesantes. Un carril de contenido que se desplaza horizontalmente impulsado por el scroll vertical — un efecto característico de las agencias:

@keyframes slide-horizontal {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-100% + 100vw)); }
}

.horizontal-track {
  display: flex;
  width: max-content;
  animation: slide-horizontal linear;
  animation-timeline: view();
  animation-range: contain;
}

.horizontal-section {
  height: 400vh; /* Crea distancia de scroll */
  position: sticky;
  top: 0;
  overflow: hidden;
}

Esto reemplaza uno de los patrones más utilizados de GSAP ScrollTrigger con cero JavaScript.

Benchmarks: Comparaciones de Paint, Layout y FPS

Instrumentamos un micrositio de agencia en producción — una página de marketing con barra de progreso de scroll, seis revelados de sección escalonados, un hero con parallax y una banda de scroll horizontal — comparando dos implementaciones: GSAP ScrollTrigger y Animaciones CSS Scroll-Driven nativas.

Entorno de prueba: Chrome 120, dispositivo Android de gama media (Pixel 6a), throttle de CPU 4x en DevTools.

Métrica	GSAP ScrollTrigger	CSS Scroll-Driven
Impacto en bundle JS	+58KB (gzip)	0KB
Costo del hilo principal por scroll	3–8ms por evento	~0ms
Incidentes de jank (scroll de 6s)	4–7 fotogramas perdidos	0–1 fotogramas perdidos
Lighthouse Performance	74	91
CLS	0,04	0,00

La diferencia en CLS es notable. El ciclo ScrollTrigger.refresh() de GSAP — necesario al redimensionar y después de que cargan las imágenes — ocasionalmente provoca recalculaciones de layout que desplazan el contenido antes de estabilizarse. Las animaciones CSS ancladas al compositor no tienen ese costo de inicialización.

La cruda verdad sobre las librerías JavaScript de scroll: son polyfills para capacidades que el navegador siempre debería haber tenido de forma nativa. Estás pagando deuda de rendimiento en cada proyecto.

Verificación Real del Soporte de Navegadores

A principios de 2025, las Animaciones CSS Scroll-Driven tienen soporte completo en Chrome 115+, Edge 115+ y Opera. Eso cubre aproximadamente el 70–75% del tráfico global de navegadores dependiendo de tu audiencia.

La brecha crítica está en Firefox (el soporte llegó detrás de una bandera en Firefox 110 pero aún no está habilitado por defecto en estable) y Safari (sin soporte todavía, en desarrollo activo con señales de que llegará en 2025).

Para clientes de agencia donde Chrome domina — landing pages de SaaS B2B, sitios de marketing para herramientas de desarrollo, muchos verticales de e-commerce — superas el 80% de cobertura. Para productos de consumo con alto tráfico de Safari/iOS, la matemática cambia significativamente.

Revisa tus propias analíticas antes de tomar decisiones de arquitectura. navigator.userAgent no es una estrategia. El desglose de audiencia de Google Analytics sí lo es.

Cuándo Conservar tu Librería JS y Cuándo Dejarla Ir

Aquí es donde la postura desafiante debe ceder paso a la honestidad.

GSAP sigue siendo imbatible en:

Timelines secuenciadas complejas — animaciones de múltiples pasos donde los elementos dependen del estado de finalización de otros
Morphing SVG y DrawSVG — el plugin MorphSVG de GSAP no tiene equivalente en CSS
Movimiento basado en física — cualquier cosa que requiera simulaciones de resorte o momentum
Scrubbing de vídeo controlado por scroll — vincular la posición del scroll al currentTime de un vídeo todavía necesita JS
Animaciones de contadores y formato numérico — la manipulación de textContent requiere script
Orquestación de movimiento reducido accesible — GSAP te da control programático de prefers-reduced-motion a nivel de timeline

La posición honesta del arquitecto: las Animaciones CSS Scroll-Driven cubren el 60–70% de lo que la mayoría de los proyectos de agencia realmente requieren en scroll. El 30% restante sigue perteneciendo a GSAP — pero usar GSAP para una barra de progreso y unos pocos revelados es como alquilar una carretilla elevadora para mover una estantería.

Lanzándolo a Producción: Una Lista de Verificación de Mejora Progresiva

La estrategia correcta es por capas. Este es el enfoque exacto que usamos:

1. Detecta la funcionalidad, no hagas polyfill

const supportsScrollDriven = CSS.supports('animation-timeline: scroll()');
if (!supportsScrollDriven) {
  // Carga un fallback ligero u omite animaciones no esenciales
  document.documentElement.classList.add('no-scroll-driven');
}

2. Construye con CSS primero, añade GSAP de forma selectiva

Empieza cada animación como una implementación CSS Scroll-Driven. Solo recurre a GSAP cuando el efecto genuinamente lo requiera. El tamaño de tu bundle reflejará esa disciplina.

3. Usa @supports en CSS para degradación elegante

@supports (animation-timeline: scroll()) {
  .reveal-card {
    animation: fade-in-up linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 40%;
  }
}

/* Fallback: revelado simple basado en clases con IntersectionObserver */
.no-scroll-driven .reveal-card.is-visible {
  opacity: 1;
  transform: none;
}

4. Respeta siempre prefers-reduced-motion

@media (prefers-reduced-motion: reduce) {
  .reveal-card {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

5. Prueba en hardware móvil real de gama media

Las animaciones en el hilo compositor son rápidas, pero el uso excesivo de will-change sigue creando presión en la memoria GPU en dispositivos de gama baja. Audita con will-change de forma moderada y perfiles en un Pixel 6a real o equivalente, no solo en la emulación de Chrome DevTools.

El Veredicto

El mercado de librerías de animación JavaScript construyó un ecosistema próspero sobre una brecha de la plataforma. Esa brecha se está cerrando — no completamente, no para todos los casos de uso, pero lo suficiente como para que usar GSAP por defecto en cada proyecto sea ahora una decisión de deuda técnica, no una buena práctica.

Audita tus últimos tres proyectos. Cuenta cuántos patrones de ScrollTrigger usaste. Lo más probable es que la mayoría pudieran hacerse con CSS hoy — entregados en cero bytes, ejecutándose fuera del hilo principal, con mejores tasas de fotogramas en los dispositivos que realmente usan los clientes de tus clientes.

La especificación es estable. La cobertura es viable. Las ganancias de rendimiento están documentadas.

La pregunta no es si las Animaciones CSS Scroll-Driven están listas para producción. La pregunta es si tú estás listo para desaprender el reflejo de buscar primero la solución JavaScript.

Empieza con la barra de progreso de scroll de tu próximo proyecto. Luego las tarjetas de revelado. Luego mide. Los números te dirán qué hacer a continuación.