Scroll-driven
Barra de progreso y reveals al entrar en viewport
En vez de animar por tiempo, mapeás el progreso de scroll del documento a una animación. Scroll hacia arriba rebobina.
animation-timeline: scroll(root block)
Cada card tiene su propia timeline según atraviesa el viewport. Sin IntersectionObserver.
animation-timeline: view(); animation-range: entry 0% cover 28%
Antes: scroll listener + cálculo manual + update de width. Ahora: dos propiedades CSS.
Parallax, headers que se achican, timelines — todo con la misma API.
animation-range: entry 0% cover 28% define en qué punto del ingreso al viewport arranca y cubre la animación.
cover anima mientras el elemento atraviesa todo el viewport; contain solo mientras está completamente visible.
Con timeline-scope podés controlar la animación de un elemento desde un contenedor ancestro.
El navegador maneja la animación en el compositor — sin layout thrashing, sin jank.
/* barra de progreso — mapea el scroll del documento */
.page-progress {
animation: grow linear both;
animation-timeline: scroll(root block);
}
@keyframes grow { to { transform: scaleX(1); } }
/* cada card se anima al entrar al viewport */
.view-card {
animation: reveal linear both;
animation-timeline: view();
animation-range: entry 0% cover 28%;
}
@keyframes reveal {
from { opacity: 0; transform: translateY(14px) scale(.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}Nota honesta sobre soporte
Muchas de estas APIs son recientes y aún no están en todos los navegadores (ver pill de cada sección). La gracia es que todas degradan bien: el carousel sigue scrolleando, el accordion abre/cierra, el textarea funciona — solo sin el "plus" animado.