Saltar al contenido
wandres.dev
Iniciar sesión

Animación web

El movimiento en la web: el pipeline del navegador, transitions y keyframes, WAAPI, scroll-driven, view transitions y GSAP a fondo.

43 unidades · 215 temasEmpezar la ruta
  1. 00

    Nivel 0

    5 temas
    1. 01Qué es una animación para el navegadorhechoen curso
    2. 02Las cuatro familias y qué resuelve cada unahechoen curso
    3. 03El árbol de decisión: qué familia usarhechoen curso
    4. 04Dónde se solapan las familias y quién ganahechoen curso
    5. 05Cuándo no animar y cómo escribir la versión sin movimientohechoen curso
  2. 01

    Nivel 1

    5 temas
    1. 01Los principios de la animación clásica que sí se traducenhechoen curso
    2. 02El peso y la masa aparentehechoen curso
    3. 03Anticipación, continuación y solapehechoen curso
    4. 04Por qué el movimiento comunica causalidad y jerarquíahechoen curso
    5. 05La duración correcta y por qué 800ms en un botón es un errorhechoen curso
  3. 02

    Nivel 2

    5 temas
    1. 01Anatomía de un fotograma y el presupuesto de 16.7 mshechoen curso
    2. 02La etapa de estilo: qué se recalcula y por quéhechoen curso
    3. 03Layout: por qué es la etapa carahechoen curso
    4. 04Paint y rasterizado: dónde se generan los píxeleshechoen curso
    5. 05Qué propiedad dispara qué etapahechoen curso
  4. 03

    Nivel 3

    5 temas
    1. 01Los hilos del navegador y por qué existe el compositorhechoen curso
    2. 02Qué es una capa de composición y qué cuestahechoen curso
    3. 03Las condiciones exactas para que una animación se promuevahechoen curso
    4. 04Lo que descalifica una animación sin avisarhechoen curso
    5. 05Verificar la composición en las herramientashechoen curso
  5. 04

    Nivel 4

    5 temas
    1. 01El modelo de transición: el disparador es un cambio de estilohechoen curso
    2. 02Las cuatro propiedades y la abreviaturahechoen curso
    3. 03Qué valores son interpolables y por quéhechoen curso
    4. 04transition-property, sus trampas y por qué all es mala ideahechoen curso
    5. 05La transición que no dispara: el mecanismo completohechoen curso
  6. 05

    Nivel 5

    5 temas
    1. 01Leer una curva de Bézier cúbica antes de ejecutarlahechoen curso
    2. 02Construir tus propias curvashechoen curso
    3. 03steps() y los cuatro tipos de saltohechoen curso
    4. 04La función linear(): curvas arbitrarias en CSShechoen curso
    5. 05Un muelle amortiguado en CSS purohechoen curso
  7. 06

    Nivel 6

    5 temas
    1. 01El problema del estado antes de existirhechoen curso
    2. 02@starting-style: declarar el estado inicialhechoen curso
    3. 03Propiedades discretas y la regla del saltohechoen curso
    4. 04transition-behavior: allow-discrete y la propiedad overlayhechoen curso
    5. 05El patrón completo de entrada y salida sin JavaScripthechoen curso
  8. 07

    Nivel 7

    5 temas
    1. 01Por qué height: auto nunca fue interpolablehechoen curso
    2. 02interpolate-size y calc-size(), con el soporte realhechoen curso
    3. 03La técnica de rejilla: de 0fr a 1frhechoen curso
    4. 04max-height y su defecto de temporizaciónhechoen curso
    5. 05Medir con JavaScript, y la decisión finalhechoen curso
  9. 08

    Nivel 8

    5 temas
    1. 01Anatomía de una regla @keyframeshechoen curso
    2. 02El easing declarado dentro de un keyframehechoen curso
    3. 03Qué pasa con una propiedad que falta en un keyframehechoen curso
    4. 04Keyframes con custom properties y @propertyhechoen curso
    5. 05Dos reglas @keyframes con el mismo nombrehechoen curso
  10. 09

    Nivel 9

    5 temas
    1. 01Duración, iteraciones y retardo positivohechoen curso
    2. 02El retardo negativo: la técnica del desfasehechoen curso
    3. 03animation-direction y el easing que se da la vueltahechoen curso
    4. 04animation-fill-mode y el modelo de las tres faseshechoen curso
    5. 05play-state y la taquigrafía animationhechoen curso
  11. 10

    Nivel 10

    5 temas
    1. 01Element.animate: la puerta de entrada a WAAPIhechoen curso
    2. 02Las dos sintaxis de keyframes de WAAPIhechoen curso
    3. 03El objeto de opciones de temporizaciónhechoen curso
    4. 04Lo que se puede expresar aquí y no en CSShechoen curso
    5. 05Por qué animate devuelve un objeto Animationhechoen curso
  12. 11

    Nivel 11

    5 temas
    1. 01play, pause, reverse, finish, cancel y el estadohechoen curso
    2. 02currentTime y startTime: los dos relojeshechoen curso
    3. 03playbackRate: velocidad, marcha atrás y el cerohechoen curso
    4. 04Las dos promesas: finished y readyhechoen curso
    5. 05Los eventos finish y cancel, y el control que CSS no dahechoen curso
  13. 12

    Nivel 12

    5 temas
    1. 01El problema: dos animaciones sobre la misma propiedadhechoen curso
    2. 02replace, add y accumulatehechoen curso
    3. 03KeyframeEffect: el efecto como objeto independientehechoen curso
    4. 04getAnimations: el inventario de todo lo que se muevehechoen curso
    5. 05Pausar, acelerar y gobernar todo el documentohechoen curso
  14. 13

    Nivel 13

    5 temas
    1. 01Cuándo sigues necesitando requestAnimationFramehechoen curso
    2. 02El delta time y el error que todo el mundo cometehechoen curso
    3. 03Framerate variable, el primer frame y el paso fijohechoen curso
    4. 04cancelAnimationFrame y el patrón de limpiezahechoen curso
    5. 05El reloj compartido: rAF y document.timelinehechoen curso
  15. 14

    Nivel 14

    5 temas
    1. 01Qué es una timeline en el modelo de animación webhechoen curso
    2. 02Timeline monotónica frente a timeline de progresohechoen curso
    3. 03La inversión: separar la animación del tiempohechoen curso
    4. 04Por qué el JavaScript de scroll siempre va por detráshechoen curso
    5. 05Construir una fuente de progreso a manohechoen curso
  16. 15

    Nivel 15

    5 temas
    1. 01La timeline de progreso del scrollhechoen curso
    2. 02Elegir el scroller y el ejehechoen curso
    3. 03Timelines nombradas y timeline-scopehechoen curso
    4. 04La barra de progreso de lectura en tres líneashechoen curso
    5. 05Lo que cambia cuando el tiempo desaparecehechoen curso
  17. 16

    Nivel 16

    5 temas
    1. 01La view timeline: el elemento como relojhechoen curso
    2. 02El modelo de los rangos: cover, contain, entry y exithechoen curso
    3. 03animation-range en la prácticahechoen curso
    4. 04view-timeline-inset: mover los bordeshechoen curso
    5. 05El patrón de revelado al entrarhechoen curso
  18. 17

    Nivel 17

    5 temas
    1. 01El mapa real del soporte en 2026hechoen curso
    2. 02Detectar con @supportshechoen curso
    3. 03El estado final por defectohechoen curso
    4. 04El polyfill y su coste realhechoen curso
    5. 05La decisión honesta: cuándo compensahechoen curso
  19. 18

    Nivel 18

    5 temas
    1. 01El problema que resuelve startViewTransitionhechoen curso
    2. 02El ciclo completo de una transiciónhechoen curso
    3. 03El árbol de pseudo-elementoshechoen curso
    4. 04Las promesas del objeto ViewTransitionhechoen curso
    5. 05Qué captura el navegador exactamentehechoen curso
  20. 19

    Nivel 19

    5 temas
    1. 01view-transition-name y la restricción de unicidadhechoen curso
    2. 02Qué hace morphing y qué solo se desvanecehechoen curso
    3. 03Animar cada parte del árbol por separadohechoen curso
    4. 04view-transition-class: estilar grupos enteroshechoen curso
    5. 05Tipos de transición y :active-view-transition-typehechoen curso
  21. 20

    Nivel 20

    5 temas
    1. 01La regla @view-transitionhechoen curso
    2. 02Los eventos pageswap y pagerevealhechoen curso
    3. 03Coordinar nombres entre dos documentoshechoen curso
    4. 04El bloqueo de renderizado y lo que puede fallarhechoen curso
    5. 05Transiciones sin ser una SPAhechoen curso
  22. 21

    Nivel 21

    5 temas
    1. 01Las tres vías para animar SVGhechoen curso
    2. 02Qué se puede animar con CSS en SVG y qué nohechoen curso
    3. 03Dibujar el trazo: dasharray, dashoffset y la longitudhechoen curso
    4. 04Transformaciones y sistemas de coordenadashechoen curso
    5. 05SMIL hoy: el estado realhechoen curso
  23. 22

    Nivel 22

    5 temas
    1. 01El sistema offset: mover un elemento sin tocar el layouthechoen curso
    2. 02path() y las formas básicas como trazadohechoen curso
    3. 03ray() y la caja de referenciahechoen curso
    4. 04url() a una forma SVG: una sola fuente de verdadhechoen curso
    5. 05offset-rotate, offset-anchor y el orden de las transformacioneshechoen curso
  24. 23

    Nivel 23

    5 temas
    1. 01Por qué un muelle se siente real y una Bézier nohechoen curso
    2. 02La ecuación del oscilador armónico amortiguadohechoen curso
    3. 03Los tres regímenes: subamortiguado, crítico y sobreamortiguadohechoen curso
    4. 04Integrar el muelle frame a framehechoen curso
    5. 05Del muelle a linear(): muestrear física y pegarla en CSShechoen curso
  25. 24

    Nivel 24

    5 temas
    1. 01Qué resuelve GSAP que las APIs nativas nohechoen curso
    2. 02La licencia: GSAP es gratis desde abril de 2025hechoen curso
    3. 03El mapa del ecosistema de pluginshechoen curso
    4. 04Instalación y registro de pluginshechoen curso
    5. 05El reloj y la configuración globalhechoen curso
  26. 25

    Nivel 25

    5 temas
    1. 01to, from, fromTo y set: los cuatro constructoreshechoen curso
    2. 02Anatomía del objeto varshechoen curso
    3. 03El targeting: qué puede ser un objetivohechoen curso
    4. 04Callbacks y sus parámetroshechoen curso
    5. 05Valores relativos, aleatorios y funciones como valorhechoen curso
  27. 26

    Nivel 26

    5 temas
    1. 01El problema de sumar delays a manohechoen curso
    2. 02El parámetro de posición, todas sus formashechoen curso
    3. 03Etiquetas con nombrehechoen curso
    4. 04Timelines anidadashechoen curso
    5. 05El control global: play, pause, reverse, seek, timeScale y progresshechoen curso
  28. 27

    Nivel 27

    5 temas
    1. 01Qué es un ease en GSAPhechoen curso
    2. 02De power0 a power4, y la familia suavehechoen curso
    3. 03Los eases configurables: back, elastic, bounce y stepshechoen curso
    4. 04El EasePack y CustomEasehechoen curso
    5. 05Elegir el ease por lo que comunicahechoen curso
  29. 28

    Nivel 28

    5 temas
    1. 01El stagger simplehechoen curso
    2. 02El objeto de stagger completohechoen curso
    3. 03Utilidades de rango: mapRange, clamp, normalize, snap, wrap y wrapYoyohechoen curso
    4. 04Utilidades de valor: interpolate, random, splitColor, unitize y pipehechoen curso
    5. 05Utilidades de colección: toArray, selector, distribute y shufflehechoen curso
  30. 29

    Nivel 29

    5 temas
    1. 01El modelo mental de ScrollTriggerhechoen curso
    2. 02start y end: la sintaxis de dos valores al completohechoen curso
    3. 03markers: convertir la abstracción en cuatro líneas de coloreshechoen curso
    4. 04toggleActions: los cuatro cruces y las ocho respuestashechoen curso
    5. 05Los callbacks y el objeto self que recibenhechoen curso
  31. 30

    Nivel 30

    5 temas
    1. 01pin: lo que de verdad le hace al DOMhechoen curso
    2. 02scrub: el cabezal atado a la barra y el suavizado numéricohechoen curso
    3. 03snap: ajustar el scroll a posiciones concretashechoen curso
    4. 04Secciones horizontales: el patrón de xPercent y containerAnimationhechoen curso
    5. 05refresh, invalidateOnRefresh y el ciclo de remediciónhechoen curso
  32. 31

    Nivel 31

    5 temas
    1. 01Dividir en caracteres, palabras y líneashechoen curso
    2. 02La accesibilidad del texto partido: un problema realhechoen curso
    3. 03El reflow responsive: por qué hay que volver a dividirhechoen curso
    4. 04El masking de líneas y el efecto de reveladohechoen curso
    5. 05revert, kill y el coste real de dejar el texto partidohechoen curso
  33. 32

    Nivel 32

    5 temas
    1. 01El patrón FLIP desde cerohechoen curso
    2. 02Flip.getState y Flip.from: el ciclo completohechoen curso
    3. 03Animar entre dos layouts que CSS no puede interpolarhechoen curso
    4. 04Reordenar y filtrar listas con Fliphechoen curso
    5. 05Mover un elemento de un contenedor a otrohechoen curso
  34. 33

    Nivel 33

    5 temas
    1. 01MorphSVG y el problema de la correspondencia entre formashechoen curso
    2. 02shapeIndex, origin y el tipo de interpolaciónhechoen curso
    3. 03DrawSVG: dibujar y borrar trazoshechoen curso
    4. 04MotionPathPlugin: align, autoRotate y el recorridohechoen curso
    5. 05Coordenadas de SVG y las utilidades de pathhechoen curso
  35. 34

    Nivel 34

    5 temas
    1. 01Observer: rueda, táctil y puntero bajo una sola APIhechoen curso
    2. 02Draggable: tipos, límites y el disparadorhechoen curso
    3. 03Inercia y snap en Draggablehechoen curso
    4. 04ScrollSmoother y el debate sobre el scroll suavizadohechoen curso
    5. 05ScrollToPlugin: llevar el scroll a un sitio concretohechoen curso
  36. 35

    Nivel 35

    5 temas
    1. 01gsap.context: por qué existe y qué recogehechoen curso
    2. 02gsap.matchMedia: animaciones condicionales con limpieza automáticahechoen curso
    3. 03Las fugas que sobreviven al desmontajehechoen curso
    4. 04useGSAP en React: el hook que cierra el ciclohechoen curso
    5. 05El patrón equivalente en Solid y en Astro con islashechoen curso
  37. 36

    Nivel 36

    5 temas
    1. 01El censo de librerías: qué queda por resolver en 2026hechoen curso
    2. 02Motion en React: el modelo declarativo a fondohechoen curso
    3. 03Motion sin framework: la API híbrida y el peso realhechoen curso
    4. 04Anime.js v4 y auto-animate: dos filosofías opuestashechoen curso
    5. 05Muelles, equipos y el árbol de decisión honestohechoen curso
  38. 37

    Nivel 37

    5 temas
    1. 01Qué hay dentro de un fichero Lottiehechoen curso
    2. 02El pipeline desde After Effects: Bodymovin y el contrato con diseñohechoen curso
    3. 03dotLottie y los reproductores: qué mejora y qué nohechoen curso
    4. 04El coste real en runtime: medirlo, no estimarlohechoen curso
    5. 05Las alternativas y cuándo Lottie es la decisión correctahechoen curso
  39. 38

    Nivel 38

    5 temas
    1. 01El sistema vestibular: por qué una pantalla mareahechoen curso
    2. 02prefers-reduced-motion a fondohechoen curso
    3. 03Reducir no es eliminar: el patrón de dos versioneshechoen curso
    4. 04Movimiento que informa frente a movimiento que decorahechoen curso
    5. 05Transparencia, colores forzados y destelloshechoen curso
  40. 39

    Nivel 39

    5 temas
    1. 01El presupuesto de fotograma y el coste de cada tipo de trabajohechoen curso
    2. 02Grabar bien y leer el flame chart de un fotograma perdidohechoen curso
    3. 03Las capas del compositor y lo que cuestan en memoriahechoen curso
    4. 04Long tasks: qué bloquean y cómo trocear el trabajohechoen curso
    5. 05Diagnosticar por qué una animación cae a 30 fpshechoen curso
  41. 40

    Nivel 40

    5 temas
    1. 01El panel de animaciones: capturar e inspeccionarhechoen curso
    2. 02Ralentizar, recorrer y editar las curvas en vivohechoen curso
    3. 03El flujo para ajustar timing sin recompilarhechoen curso
    4. 04getAnimations como herramienta de depuraciónhechoen curso
    5. 05Los superpuestos de renderizado que revelan repintadoshechoen curso
  42. 41

    Nivel 41

    5 temas
    1. 01La escala de duraciones, con los números y su justificaciónhechoen curso
    2. 02El catálogo de curvas: cuatro roles, no veinte formashechoen curso
    3. 03Distancia, tamaño y la escala de duraciones derivadahechoen curso
    4. 04Jerarquía del movimiento: qué se mueve primero y por quéhechoen curso
    5. 05Documentar el movimiento en un design systemhechoen curso
  43. 42

    Nivel 42

    5 temas
    1. 01El árbol de decisión completo de la animación webhechoen curso
    2. 02Patrones resueltos: acordeón, modal y esqueletohechoen curso
    3. 03Patrones resueltos: lista que se reordena, revelado y transición de páginahechoen curso
    4. 04Patrón resuelto: arrastrar y soltar con reordenaciónhechoen curso
    5. 05Los errores que ya no deberías cometer y hacia dónde va estohechoen curso