El movimiento en la web: el pipeline del navegador, transitions y keyframes, WAAPI, scroll-driven, view transitions y GSAP a fondo.
Cada nivel construye sobre el anterior. Sin saltos, sin huecos.
Las cuatro familias (CSS, WAAPI, scroll, librerías), qué resuelve cada una, y el mapa completo del territorio.
Anticipación, follow-through, easing, peso. Qué se traduce a interfaces y qué no, y por qué el movimiento comunica.
Las etapas del frame, qué dispara cada una, y por qué animar width cuesta cien veces más que animar transform.
transform, opacity, filter y las animaciones que sobreviven a un hilo principal bloqueado. Cómo verificarlo.
Las cuatro propiedades, qué es interpolable, la lista transition-property, y los errores clásicos de timing.
Leer una curva de Bézier, construir las tuyas, steps para sprites, y linear para aproximar muelles en CSS puro.
Animar un elemento que acaba de aparecer, allow-discrete para display y overlay, y el patrón de entrada y salida completo.
El problema de height auto resuelto por fin, interpolate-size con allow-keywords, y las alternativas sin soporte.
Porcentajes múltiples, easing por keyframe, la resolución de propiedades ausentes, y keyframes con variables.
duration, delay negativo, iteration, direction, fill-mode y play-state como sistema coherente.
La misma potencia desde JS: keyframes como objetos, las dos sintaxis, y por qué devuelve una promesa útil.
play, pause, reverse, currentTime, playbackRate, finished y cancel. Control que CSS no puede dar.
composite con add y accumulate, KeyframeEffect reutilizable, getAnimations y pausar todo el documento.
Cuándo sigues necesitando rAF, el delta time correcto, el problema del framerate variable, y cancelar bien.
Separar la animación del tiempo: qué es una timeline, y por qué esto elimina el 90% del JS de scroll.
La progress timeline del scroll, elegir el scroller y el eje, y la barra de progreso en tres líneas.
La view timeline de un elemento al cruzar el viewport, animation-range, los nombres de rango y view-timeline-inset.
Firefox no lo ha implementado en 2026: detectar con @supports, el polyfill, y la estrategia de mejora progresiva.
El método startViewTransition, el árbol de pseudo-elementos, y qué hace el navegador con las capturas.
view-transition-name, los elementos que hacen morphing, los tipos de transición y animar cada parte.
La regla view-transition en MPA, los eventos pageswap y pagereveal, y la navegación con transición sin SPA.
Las tres vías, animar el trazo con stroke-dasharray, transformaciones en SVG y sus sistemas de coordenadas.
Mover elementos por un trazado, offset-distance, offset-rotate y las formas de ruta modernas.
La ecuación del muelle amortiguado, rigidez y masa como parámetros de diseño, y por qué se sienten reales.
Qué resuelve que las APIs nativas no, la licencia desde abril de 2025 con Webflow, y el mapa de plugins.
El modelo de tween, el objeto vars, el targeting, y las propiedades especiales de GSAP.
Secuenciar sin sumar delays: la posición relativa, las etiquetas, timelines anidadas y el control global.
El sistema completo de eases, CustomEase, los eases de rebote y elásticos, y cuándo cada uno.
El stagger avanzado con grid y from, y las utilidades: mapRange, snap, random, wrap, interpolate.
trigger, start y end, los marcadores, toggleActions, y el modelo mental que hace que todo encaje.
Fijar secciones, el scrub con suavizado, snap, las secciones horizontales y el refresh en resize.
Dividir en caracteres, palabras y líneas, el reflow responsive, el masking de líneas y revertir bien.
El patrón FLIP resuelto: getState, from, animar entre layouts imposibles y el reordenado de listas.
MorphSVG entre formas arbitrarias, DrawSVG para dibujar trazos, y MotionPath con alineación.
Observer para gestos unificados, Draggable con inercia, ScrollSmoother y ScrollTo.
El contexto y matchMedia, la limpieza en componentes, useGSAP, y el patrón con Solid y con Astro.
Motion (antes Framer Motion), Anime.js, Popmotion y auto-animate: qué elige cada quién y por qué.
El formato, el pipeline desde After Effects, dotLottie, el coste real en runtime y las alternativas.
Qué significa reducir el movimiento (no eliminarlo), el trastorno vestibular, y el patrón de dos versiones.
El panel de rendimiento, las capas del compositor, los long tasks, y diagnosticar por qué cae a 30fps.
Inspeccionar, ralentizar y editar animaciones en vivo, y el flujo de trabajo para ajustar timing.
Tokens de duración y easing, la jerarquía del movimiento, y documentar el movimiento en un design system.
El árbol de decisión completo, el catálogo de patrones resueltos, y hacia dónde va la animación en la web.
Empieza por los fundamentos y sube nivel a nivel hasta el dominio total.
Comenzar el camino →