Scroll

CSS Moderno 2025 Sin JavaScript

Scroll Timeline Animaciones Controladas por Scroll Sin JS

Scroll Timeline API permite crear animaciones fluidas basadas en el scroll del usuario, eliminando completamente la necesidad de JavaScript o librerías externas. Declara tus animaciones en CSS y déjalas sincronizar con el scroll automáticamente.

🎬

CSS Nativo Sin librerías

⚡

60 FPS GPU acelerado

📊

Core Vitals Performance óptimo

Tipos de Timeline Tres formas de controlar animaciones con scroll

📜

scroll()

Vincula la animación al scroll de un contenedor específico. Perfecto para progress bars y elementos que siguen el scroll completo de la página.

animation-timeline: scroll(root);

👁️

view()

Anima elementos cuando entran, están visibles o salen del viewport. Ideal para reveal effects y parallax de elementos individuales.

animation-timeline: view();

🎯

animation-range

Define exactamente cuándo comienza y termina la animación. Control preciso sobre entry, cover, contain y exit.

animation-range: entry 0% cover 40%;

Cards con View Timeline Cada card se anima al entrar al viewport

✨

Fade In

Aparece gradualmente con un movimiento suave desde abajo.

animation-timeline: view();

🎯

Scale Up

Crece desde el centro mientras aparece en pantalla.

transform: scale(0.8) → scale(1)

🔄

Rotate In

Rota suavemente mientras se revela.

transform: rotateY(-15deg)

🌫️

Blur Focus

Enfoca desde un estado borroso.

filter: blur(10px) → blur(0)

➡️

Slide Left

Entra deslizándose desde el lado derecho.

transform: translateX(100px)

✂️

Clip Reveal

Se revela usando clip-path para un efecto dramático.

clip-path: inset(0 100% 0 0)

¿Cómo funciona?

Cada card usa animation-timeline: view() para vincular su animación a su posición en el viewport. Cuando el elemento entra, la animación comienza; cuando sale, puede revertirse o completarse.

Color Morph Background El fondo cambia mientras scrolleas esta sección

Inicio: Azul Brand #2448A6

Medio: Mezcla color-mix()

Final: Dorado #F5B841

Esta sección usa animation-timeline: view() combinado con animation-range: entry 0% exit 100% para crear una transición suave de color mientras scrolleas. Sin JavaScript, solo CSS puro.

Image Reveal con Clip-Path Imágenes que se revelan progresivamente

Image 1

Reveal desde la izquierda

Image 2

Reveal desde abajo

Image 3

Reveal circular

Técnica de Clip-Path

Usando clip-path animado, las imágenes se revelan con diferentes efectos. El uso de clip-path es GPU-acelerado y no causa layout shifts, manteniendo un performance óptimo.

@keyframes reveal-left {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

Galería con Scroll Horizontal Scrollea horizontalmente o usa las flechas

Elemento Uno

Primera card de la galería horizontal

Elemento Dos

Segunda card con scroll suave

Elemento Tres

Tercera card del carrusel

Elemento Cuatro

Cuarta card animada

Elemento Cinco

Quinta y última card

Scroll Horizontal Nativo

Esta galería usa overflow-x: auto con scroll-snap-type para crear un carrusel nativo sin JavaScript. Las animaciones de entrada están vinculadas con view() timeline.

Ejemplos de Código Aprende la sintaxis de Scroll Timeline

                            1. Progress Bar Básico
                            CSS
                        

.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--primary);
  transform-origin: left;
  
  /* Vincula al scroll del documento */
  animation: grow-bar linear;
  animation-timeline: scroll(root);
}

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

                            2. Fade In con View Timeline
                            CSS
                        

.card {
  opacity: 0;
  transform: translateY(50px);
  
  /* Se anima al entrar al viewport */
  animation: fade-in linear;
  animation-timeline: view();
  animation-range: entry 0% cover 30%;
}

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

                            3. Control con Animation Range
                            CSS
                        

.element {
  animation: complex-animation linear;
  animation-timeline: view();
  
  /* Controla cuándo comienza y termina */
  animation-range: entry 0% exit 100%;
  
  /* Otras opciones:
     - entry: cuando empieza a entrar
     - cover: cuando está cubriendo el viewport
     - contain: cuando está completamente visible
     - exit: cuando empieza a salir
  */
}

@keyframes complex-animation {
  0% { transform: scale(0.8); opacity: 0; }
  50% { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

                            4. Scroll Horizontal
                            CSS
                        

.horizontal-container {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
}

.gallery-item {
  scroll-snap-align: center;
  
  /* Anima al entrar al viewport horizontal */
  animation: slide-in linear;
  animation-timeline: view(inline);
  animation-range: entry 0% cover 30%;
}

@keyframes slide-in {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

Con JavaScript vs Con CSS La diferencia es abismal

❌

Método Tradicional (JavaScript)

Necesitas:

📦 GSAP ScrollTrigger (50KB+)
📝 Intersection Observer API
🔧 Event listeners en scroll
⚙️ Cálculos de posición en JS
🐌 Performance degradado en scroll
🔄 Throttle/debounce para optimizar
📚 Dependencies en package.json

// JavaScript + GSAP ScrollTrigger
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";

gsap.registerPlugin(ScrollTrigger);

gsap.to(".element", {
  opacity: 1,
  y: 0,
  scrollTrigger: {
    trigger: ".element",
    start: "top 80%",
    end: "top 20%",
    scrub: true,
    markers: true
  }
});

// ... más configuración
// ... más código
// ... más mantenimiento

✅

Con Scroll Timeline (CSS)

Solo necesitas:

🎨 CSS puro nativo
⚡ GPU acelerado (60 FPS)
📦 0 bytes de JavaScript
🚀 Performance óptimo
✨ Declarativo y limpio
🔄 Sin throttle/debounce
📊 Core Web Vitals perfectos

/* CSS Puro */
.element {
  opacity: 0;
  transform: translateY(50px);
  
  /* ¡Eso es todo! */
  animation: fade-in linear;
  animation-timeline: view();
  animation-range: entry 0% cover 30%;
}

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

/* Sin librerías
   Sin dependencies
   Sin JavaScript
   Performance perfecto */

Comparación de Métricas

Bundle Size

~50KB vs 0KB

Performance

40-50 FPS vs 60 FPS

Complejidad

Alta vs Baja

Casos de Uso ¿Cuándo usar Scroll Timeline?

🎨

Landing Pages

Crea experiencias inmersivas con parallax, reveal effects y transiciones suaves que captan la atención sin sacrificar performance.

📱

Portfolios

Muestra tus proyectos con animaciones elegantes que se revelan al scrollear, creando una narrativa visual profesional.

📖

Storytelling

Narra historias con elementos que aparecen progresivamente, guiando al usuario a través del contenido de forma natural.

🛍️

Product Showcases

Presenta productos con efectos visuales impactantes que destacan características clave mientras el usuario explora.

📊

Data Visualization

Anima gráficos y datos que se revelan al entrar al viewport, haciendo la información más digerible y atractiva.

📰

Editorial

Mejora artículos largos con progress bars, imágenes que se revelan y efectos que mantienen el engagement del lector.

Referencia: Animation Range Controla exactamente cuándo se ejecutan las animaciones

Viewport

entry Empieza a entrar

cover Cubriendo viewport

contain Completamente visible

exit Empieza a salir

Ejemplos de Rangos

animation-range: entry 0% cover 30%;

Comienza cuando el elemento empieza a entrar y termina cuando ha cubierto el 30% del viewport.

animation-range: cover 0% exit 100%;

Comienza cuando empieza a cubrir y termina cuando ha salido completamente.

animation-range: entry 0% exit 100%;

Se ejecuta durante todo el tiempo que el elemento está en el viewport.

animation-range: contain 0% contain 100%;

Solo se anima cuando el elemento está completamente visible dentro del viewport.

Propiedades CSS Referencia completa de Scroll Timeline

animation-timeline

Define qué timeline controla la animación. Puede ser scroll() o view().

animation-timeline: scroll(root); animation-timeline: view();

animation-range

Especifica cuándo comienza y termina la animación en relación al scroll.

animation-range: entry 0% exit 100%; animation-range: cover 20% cover 80%;

scroll()

Función que crea un scroll timeline. Acepta eje (block, inline, x, y) y contenedor.

scroll(root) scroll(nearest) scroll(y)

view()

Función que crea un view timeline. Acepta eje e inset para ajustar el área visible.

view() view(block) view(inline 20px)

timeline-scope

Permite que descendientes accedan a un timeline nombrado definido en un ancestro.

timeline-scope: --myTimeline;

Soporte de Navegadores Scroll Timeline en producción

🌐

Chrome 115+ ✅ (Jul 2023)

🔷

Edge 115+ ✅ (Jul 2023)

🦊

Firefox ⚠️ En desarrollo

🧭

Safari ⚠️ En desarrollo

Implementación Progresiva

Scroll Timeline es una mejora progresiva. Los navegadores que no lo soporten simplemente mostrarán el contenido sin animaciones, manteniendo la funcionalidad completa.

/* Fallback para navegadores sin soporte */
@supports not (animation-timeline: scroll()) {
  .animated-element {
    /* Versión estática o animación CSS tradicional */
    opacity: 1;
    transform: none;
  }
}

/* Feature detection con JavaScript (opcional) */
if (CSS.supports('animation-timeline', 'scroll()')) {
  // Navegador soporta Scroll Timeline
  document.body.classList.add('supports-scroll-timeline');
}

Polyfill Disponible

Para navegadores sin soporte nativo, existe un polyfill oficial que puede agregar la funcionalidad mediante JavaScript:

<script src="https://flackr.github.io/scroll-timeline/dist/scroll-timeline.js"></script>

Nota: El polyfill añade ~15KB pero permite usar la API en todos los navegadores. Es una mejora progresiva opcional.

Tips de Performance Optimiza tus scroll animations

Usa propiedades GPU-aceleradas

Limítate a transform y opacity para animaciones super fluidas. Evita animar width, height o top/left.

✅ transform, opacity, filter, clip-path ❌ width, height, margin, padding

Usa will-change con cuidado

will-change prepara el navegador, pero úsalo solo cuando sea necesario y remuévelo cuando termine la animación.

will-change: transform, opacity;

Contain para aislar

contain: layout paint aísla el elemento y evita que las animaciones afecten el resto del layout.

contain: layout paint;

content-visibility para lazy render

Usa content-visibility: auto para que el navegador solo renderice elementos cercanos al viewport.

content-visibility: auto;

Recursos Adicionales Aprende más sobre Scroll Timeline

📚