⌘ REFERENCIA · 202 elementos
Cheatsheet de Animación Web
Todo el movimiento en un sitio: el pipeline, transitions, keyframes, WAAPI, scroll, view transitions, GSAP, accesibilidad y depuración. Busca por API o por el efecto que quieres.
🎬 El pipeline y el compositor 12
Cuatro etapas; tocar una arrastra a todas las de abajoStyle · layout · paint · composite
El fotograma entero; tuyos son unos 10 ms, no los dieciséis16,7 ms a 60 Hz
Disparan layout: la etapa que recorre el árbol enterowidth, top, margin
Se saltan layout, pero repintan la capabackground-color, box-shadow
Solo composición: el trabajo se lo queda la GPUtransform · opacity
Compositable, pero cada función tiene su preciofilter
Una textura aparte en memoria: no salen gratisCapa de composición
La animación sigue aunque el JavaScript se atasqueFuera del hilo principal
Pista, no arreglo: dejarlo puesto siempre es peor que nadawill-change
Sin error ni aviso: solo va a tirones en gama mediaDescalificación silenciosa
Un filter o un blend arriba aplana todo tu subárbolLa que viene del ancestro
Los overlays que enseñan qué se promovió y qué repintaLayer borders · Paint flashing
🔀 Transitions 9
Un cambio de estilo: sin dos valores no hay transiciónEl disparador
Enumera; all acaba animando cosas que no queríastransition-property
Su valor inicial es 0s: sin ella no ocurre nadatransition-duration
En negativo arranca la transición ya empezadatransition-delay
La curva; el valor por defecto es ease, no lineartransition-timing-function
Los que el motor sabe convertir en una lista de númerosValores interpolables
Saltan al 50% del recorrido salvo que las habilitesPropiedades discretas
El elemento aún no existía, o el valor de partida era autoLa que no dispara
Escribir transition después borra el transition-behaviorLa abreviatura reinicia
📈 Easing, curvas y muelles 15
Dos puntos de control; los extremos están clavadoscubic-bezier(x1, y1, x2, y2)
Permitido: así se hacen la anticipación y el reboteY fuera del rango 0 a 1
El defecto: arranca rápido y frena; no es simétricoease
Un tramo plano en la curva es una pausa en pantallaLa pendiente es velocidad
Saltos discretos para sprites y contadoressteps(5, jump-end)
Los cuatro modos de reparto de los saltosjump-start · end · none · both
Curva arbitraria por puntos: la puerta al muelle en CSSlinear(0, 0.25 30%, 1)
Lo que se va, rápido; lo que llega, con frenoEntrada frente a salida
Fuerza proporcional al desplazamiento más rozamientoOscilador amortiguado
Tres parámetros que un diseñador sí sabe ajustarRigidez · masa · amortiguación
El número que decide si rebota o si solo frenaRatio de amortiguación
Rebota: para lo que quiere sentirse vivoSubamortiguado
Llega en el mínimo tiempo sin pasarse ni una vezCríticamente amortiguado
Se arrastra hasta el reposo: casi nunca es lo que buscasSobreamortiguado
Tiene condición de parada; por eso hay que muestrearloUn muelle no tiene duración
🚪 Entrada, salida y tamaño auto 11
El estado desde el que parte algo que acaba de existir@starting-style
Y sin dos valores el navegador no transiciona nadaSin él no hay dos valores
Deja que las discretas esperen al final del recorridotransition-behavior: allow-discrete
Con allow-discrete el salto ocurre cuando acaba, no antesdisplay: none
Mantiene el elemento en la capa superior mientras se vaoverlay
La abreviatura transition borra el behavior que pusiste antesEl orden de las declaraciones
Nunca fue interpolable: auto no es una longitudheight: auto
Habilita animar hacia auto en todo el subárbolinterpolate-size: allow-keywords
La forma explícita de operar con el tamaño intrínsecocalc-size(auto, size)
El acordeón con rejilla, sin medir nada desde JavaScriptDe 0fr a 1fr
La técnica vieja: la duración real depende del contenidomax-height
🎞️ Keyframes y control 12
Una lista de estados; from y to son 0% y 100%@keyframes
Varios porcentajes comparten el mismo bloque0%, 50% { }
La curva declarada ahí rige el tramo que empieza allíEasing dentro del keyframe
Se interpola desde el keyframe anterior que sí la teníaPropiedad ausente
No se fusionan: la última definición sustituye a la otraDos reglas con el mismo nombre
Arranca a mitad: la base del desfase entre elementosanimation-delay negativo
Qué se ve antes de empezar y qué queda al terminaranimation-fill-mode
Conserva el último keyframe en lugar de volver al origenforwards
Ida y vuelta, con la curva reflejada en el regresoanimation-direction: alternate
Un número o infinite; los decimales cortan a media vueltaanimation-iteration-count
Pausar sin perder el punto del recorridoanimation-play-state
Solo interpolan si la custom property está registradaKeyframes con variables
⚙️ WAAPI y el bucle de render 16
Devuelve un objeto Animation, no una promesael.animate(frames, opts)
Un objeto por keyframe, con offset opcionalArray de objetos
Una clave por propiedad y sus valores en ordenObjeto de arrays
duration, easing, delay, iterations, fill, directionOpciones de temporización
El control que CSS nunca llegó a darplay · pause · reverse · finish · cancel
Escribir el reloj es hacer scrubbing a manocurrentTime
Sincronizar dos animaciones sobre la misma timelinestartTime
Velocidad y marcha atrás; el cero congela sin cancelarplaybackRate
Dos promesas: al terminar y al estar lista para arrancarfinished · ready
Fijar el estado final sin dejar un fill eternocommitStyles() · persist()
Sumar efectos en vez de que el último aplaste al anteriorcomposite: add
El efecto como objeto reutilizable entre elementosKeyframeEffect
El inventario de todo lo que se mueve, CSS incluidogetAnimations()
Solo cuando el frame depende del resultado del anteriorrequestAnimationFrame
Multiplica por el tiempo transcurrido, no por un frame fijoDelta time
El mismo reloj que usan las animaciones declarativasdocument.timeline
📜 Scroll-driven 15
La animación deja de depender del tiempo y depende del progresoLa inversión
Sustituye el reloj por otra fuente de avanceanimation-timeline
El progreso de un scroller, del 0% al 100%scroll()
Elegir scroller y eje sin tener que nombrar nadascroll(root block)
El propio elemento como reloj mientras cruza la ventanaview()
Recorta qué tramo del progreso consume la animaciónanimation-range
Entry, contain y exit teselan cover sin huecos ni solapescover · contain · entry · exit
Mover los bordes donde el cruce empieza y acabaview-timeline-inset
Nombrar la timeline para engancharla desde otro sitioscroll-timeline-name · view-timeline-name
Subir el nombre a un ancestro común de los dos elementostimeline-scope
Con una timeline de progreso significa la timeline enteraanimation-duration: auto
Existe tras un flag en about:config, y eso no cuentaFirefox no lo implementa
Julio de 2023 y septiembre de 2025Chromium 115 · Safari 26
Escribe el resultado en la regla base y mejora encimaEl estado final por defecto
La detección que sostiene la mejora progresiva@supports (animation-timeline: scroll())
🪄 View transitions 14
Captura, ejecuta tu cambio de DOM y vuelve a capturardocument.startViewTransition(cb)
Imágenes del antes y del después, no elementos vivosQué captura
La raíz del árbol, superpuesta a todo el documento::view-transition
Interpola posición y tamaño del par capturado::view-transition-group
Contiene old y new y aplica el aislamiento::view-transition-image-pair
Las dos capturas que se cruzan en el fundido::view-transition-old · new
Sin nombre no hay morphing: solo fundido de la raízview-transition-name
Dos elementos con el mismo nombre abortan la transiciónLa restricción de unicidad
Estilar un grupo entero sin repetir la misma reglaview-transition-class
Una transición con variantes según de dónde vengastypes · :active-view-transition-type
Las tres promesas del objeto ViewTransitionready · updateCallbackDone · finished
Saltar directamente al estado final sin animarskipTransition()
Activarlas entre documentos, sin convertirte en SPA@view-transition { navigation: auto }
El último retoque antes de salir y el primero al entrarpageswap · pagereveal
✏️ SVG y trazados 12
CSS, SMIL o manipular el DOM del propio SVGLas tres vías
Todavía funciona, pero no es donde escribir código nuevoSMIL
Trazo y hueco: la base del dibujo progresivostroke-dasharray
Desplaza el patrón: de la longitud total hasta cerostroke-dashoffset
Medir el trazado en lugar de adivinar la longitudgetTotalLength()
Que el origen mida sobre la caja y no sobre el viewBoxtransform-box: fill-box
Mueve el elemento por un trazado sin tocar el layoutoffset-path
La posición sobre el trazado, del 0% al 100%offset-distance
Girar con la tangente, o fijar un ángulo propiooffset-rotate
Qué punto del elemento es el que sigue la líneaoffset-anchor
Un trazado recto definido por ángulo y caja de referenciaray(45deg closest-side)
Apuntar a una forma del SVG: una sola fuente de verdadurl(#curva)
🟢 GSAP: tweens y timelines 16
Webflow compró GreenSock y liberó la librería enteraGratis desde abril de 2025
ScrollTrigger, SplitText y MorphSVG ya no se paganTodos los plugins incluidos
Sin registrar, el plugin no existe para el motorgsap.registerPlugin()
Del estado actual al que declaresgsap.to()
Del que declares al actual: el constructor de las entradasgsap.from()
Los dos extremos explícitos, sin depender del CSS previogsap.fromTo()
Un tween de duración cero: estado inicial sin animargsap.set()
Qué animar y cómo animarlo, en la misma llaveEl objeto vars
Selector, elemento, array o cualquier objeto de JavaScriptTargeting
Atajos que evitan pelear con la cadena de transformx · y · xPercent · rotation
Una cadena con += o -= se resuelve al arrancar el tweenValores relativos
Reciben índice y objetivo: un valor distinto por elementoFunciones como valor
Secuenciar sin ir sumando delays a manogsap.timeline()
Vacío es al final; < es el inicio del anterior; -=0.5 solapaParámetro de posición
Un nombre en la línea de tiempo al que apuntar y saltarEtiquetas
Gobernar la secuencia entera como si fuera un tweentimeScale · seek · progress
🎚️ GSAP: eases, stagger y utilidades 15
La familia base: a más número, más pronunciada la curvapower1 a power4
El lineal de GSAP; su nombre no es linearnone
El sufijo decide dónde está la parte lentain · out · inOut
Los configurables: aceptan parámetros entre paréntesisback · elastic · bounce · steps
Pegar una curva dibujada y usarla como ease con nombreCustomEase
Cuatro papeles bastan; veinte formas distintas son ruidoElegir por lo que comunica
Desfase constante entre objetivos consecutivosstagger: 0.1
Repartir un total frente a fijar el hueco entre cada uno{ amount, each }
Desde dónde se propaga la ola por la lista{ from: "center" }
Distancia en dos dimensiones para una cuadrícula{ grid, axis }
Llevar un rango de números a otro distintogsap.utils.mapRange
Redondear al múltiplo o al valor más cercano de una listagsap.utils.snap
Dar la vuelta al llegar al final en lugar de salirsegsap.utils.wrap
De NodeList a un array de verdad, con sus métodosgsap.utils.toArray
Interpolar entre dos valores, colores y objetos incluidosgsap.utils.interpolate
📌 GSAP: ScrollTrigger 14
Un tramo del scroll conectado a una animación o a callbacksEl modelo
El elemento cuya posición define el tramotrigger
Primer valor el disparador, segundo la ventanastart: "top 80%"
Convierte la abstracción en cuatro líneas de coloresmarkers: true
Cuatro cruces y ocho respuestas posibles para cada unotoggleActions
Los mismos cruces, pero con código tuyoonEnter · onLeave · onEnterBack · onLeaveBack
El objeto que reciben los callbacks: progress, direction, isActiveself
El cabezal atado a la barra; un número le pone suavizadoscrub: true
Envuelve el elemento y le reserva el hueco en el documentopin
Ese hueco reservado; quitarlo solapa las secciones a propósitopinSpacing
Ajustar el scroll a posiciones concretas al soltarsnap
Volver a calcular los valores tras un cambio de tamañoinvalidateOnRefresh
Remedir cuando el layout cambió por algo que no fue el resizeScrollTrigger.refresh()
El patrón de la sección horizontal fijadaxPercent y containerAnimation
🧩 Plugins y ecosistema 17
Divide en caracteres, palabras y líneas para animarlosSplitText.create()
Vuelve a dividir cuando el texto refluye y no rompe nadaautoSplit
Envuelve cada línea para el revelado desde abajomask: "lines"
Devuelve el texto original: sin esto el DOM queda hecho trizasrevert()
Mide antes, cambia el DOM y anima la diferenciaFlip.getState() · Flip.from()
Anima entre dos layouts que CSS no sabe interpolarFlip
De una forma a otra; shapeIndex arregla el giro raroMorphSVG
Dibujar y borrar un trazo sin calcular dasharray a manoDrawSVG
Recorrer un path con align y autoRotateMotionPathPlugin
Rueda, táctil y puntero bajo una sola API de gestosObserver
Arrastre con límites, lanzamiento y ajuste al soltarDraggable + InertiaPlugin
Recoge lo creado dentro y lo revierte de una vezgsap.context()
Animaciones condicionales que se limpian solas al cambiargsap.matchMedia()
El hook de React que cierra el ciclo de vida por tiuseGSAP()
El declarativo de React; también tiene API sin frameworkMotion
Control fino frente a una línea y que el DOM se apañeAnime.js v4 · auto-animate
JSON exportado de After Effects; mide su coste antes de usarloLottie
♿ Accesibilidad 11
Una preferencia declarada, no una suposición sobre nadieprefers-reduced-motion: reduce
Quitar todo feedback deja la interfaz sin causa ni efectoReducir no es eliminar
Una coreografía completa y otra de fundidos y cambiosEl patrón de dos versiones
El movimiento grande en pantalla puede producir mareo realEl sistema vestibular
Los efectos que más disparan la respuesta vestibularParalaje y zoom
La misma preferencia para lo que no es CSSmatchMedia() en JS
La preferencia puede cambiar con la página ya abiertaEscuchar el cambio
Menos veladuras y menos desenfoques de fondoprefers-reduced-transparency
La paleta la impone el sistema: no pelees con ellaforced-colors: active
Nada que parpadee tres veces por segundo, sin excepcionesDestellos
Si explica de dónde viene algo, se queda aunque se reduzcaMovimiento que informa
🔬 Diagnóstico y rendimiento 13
Captura lo que se dispara y lo enseña en una línea de tiempoPanel de animaciones
Ver el timing a cámara lenta antes de tocar un númeroRalentizar al 25%
Ajustar el bezier sin recompilar ni recargarEditar la curva en vivo
Listar y pausar en caliente todo lo que está corriendogetAnimations() en la consola
Verde donde el navegador vuelve a pintar en cada fotogramaPaint flashing
Comprobar si tu elemento tiene capa propia de verdadLayer borders
Un fotograma perdido leído de arriba abajo, etapa por etapaFlame chart
Más de 50 ms de hilo principal: todo lo demás esperaLong task
Ceder el hilo para que el frame llegue a tiempoTrocear el trabajo
Siempre el mismo orden; cada rama se descarta observandoEl árbol de diagnóstico
El coste de una librería se graba en el aparato realMedir, no estimar
Tokens con números justificados por distancia y tamañoEscala de duraciones
Qué se mueve primero comunica qué es lo importanteJerarquía del movimiento