Animación con JavaScript
La animación con JavaScript es movimiento creado con código en el navegador, moviendo elementos de la página o dibujando cada fotograma en un canvas, y puede crear películas sin archivos de imagen.
¿Qué es la animación con JavaScript?
La animación con JavaScript es movimiento creado por código que se ejecuta en un navegador web: un script cambia lo que hay en pantalla a lo largo del tiempo, ya sea moviendo elementos de la página (HTML, SVG) o dibujando cada fotograma en un <canvas>. Es la base del movimiento de interfaces en los sitios web, y también puede producir películas animadas completas, sin archivos de imagen ni de video, cuando el propio código dibuja cada fotograma.
El término abarca dos cosas bastante distintas:
- Animar elementos de la página. Bibliotecas como GSAP y anime.js, o la Web Animations API integrada en el navegador, mueven, desvanecen y transforman botones, textos y formas SVG sobre una línea de tiempo. Así se construye la mayor parte del movimiento en los sitios web.
- Dibujar cada fotograma en un canvas. Una función pinta la imagen completa de un instante dado, y el navegador la llama fotograma tras fotograma. En pantalla no existe nada más que lo que dibuja el código. Este es el tipo de animación que se viralizó tras el lanzamiento de Claude Opus 5.5, descrita como "every frame drawn in JavaScript" ("cada fotograma dibujado en JavaScript").
Cómo funciona la animación con JavaScript dibujada con código
En el enfoque con canvas, una película es una función pura del tiempo, draw(ctx, t): el mismo t siempre da la misma imagen. Esa propiedad es la que permite renderizarla. Un navegador headless salta a cada fotograma, lo captura y escribe un MP4 con precisión de fotograma, por mucho que tarde en dibujarse cada uno. Tres técnicas dan a estas películas su aspecto hecho a mano:
- Aleatoriedad con semilla para líneas temblorosas y rellenos entintados que son idénticos en cada render en lugar de parpadear.
- Música sintetizada con la Web Audio API en la misma página, renderizada offline y mezclada en el video.
- Una línea de tiempo compartida (tempo, planos, eventos) que leen tanto el código de dibujo como la música, para que los sonidos caigan en las acciones y los cortes en el beat.
Animación en canvas vs. animación del DOM
Una animación en canvas es una animación con JavaScript en la que el código pinta cada fotograma sobre un único elemento <canvas>: nada de lo que hay en pantalla existe como un elemento aparte de la página, solo como los píxeles que el código de dibujo produjo para ese instante. Una animación del DOM mueve elementos que ya están en la página (texto, formas SVG, imágenes) cambiando su posición, tamaño u opacidad a lo largo del tiempo, con CSS o con una biblioteca como GSAP.
Cada una sirve para un trabajo distinto. La animación del DOM es la herramienta adecuada para el movimiento de interfaces, porque los elementos siguen siendo clicables, seleccionables y accesibles. La animación en canvas es la adecuada para películas e ilustraciones, porque el código puede dibujar cualquier cosa a cualquier resolución, desde trazos de tinta hechos a mano hasta una ciudad entera, y el resultado se renderiza a MP4 idéntico fotograma a fotograma. Las películas "cada fotograma dibujado en JavaScript" son animaciones en canvas; en ejemplos de animación en canvas encontrarás siete de ellas con sus prompts.
Animación con JavaScript vs. animación por fotogramas clave vs. video con IA
| Animación con JavaScript (canvas) | Animación por fotogramas clave | Generación de video con IA | |
|---|---|---|---|
| Qué produce los fotogramas | El código dibuja cada uno | El software interpola entre poses clave | Un modelo de video predice píxeles |
| Archivos necesarios | Ninguno | Dibujos, vectores, metraje | Ninguno |
| Texto en pantalla | Exacto | Exacto | Puede deformarse |
| Volver a renderizar | Idéntico cada vez | Idéntico | Distinto cada vez |
| Uso típico | Videos explicativos, loops, cortos estilizados, movimiento web | Animación de personajes y motion design | Planos fotorrealistas o cinematográficos |
Más sobre la columna del medio en animación por fotogramas clave, y sobre cómo la cambia la IA en animación con IA vs. animación por fotogramas clave.
Casos de uso comunes
- Videos explicativos: cómo se procesa un pago con tarjeta, por qué el cielo es azul, cómo funciona la cancelación de ruido. Diagramas, etiquetas y movimientos de cámara, todo dibujado con código.
- Intros de canal y loops para YouTube, TikTok e Instagram, incluidos los canales sin rostro.
- Historias cortas y libros ilustrados: un personaje dibujado a partir de una foto de referencia, un cuento para dormir, un corto sin palabras.
- Movimiento para sitios web y productos: animación de interfaces, loops para el hero, gráficos interactivos (normalmente del tipo que anima elementos de la página).
Cómo hacer una animación con JavaScript usando IA
Ya no tienes que escribir el código de dibujo tú mismo. Claude Opus 5.5 puede planificar una película como una rejilla de beats y una lista de planos, escribir el código de dibujo del canvas y la música con Web Audio, y revisar sus propios fotogramas en una hoja de contactos. Hay dos formas de hacerlo: en Claude Code con las javascript-animation skills, gratuitas y de código abierto, o en el modo Animation de iArt, donde escribes un prompt en el navegador y crea la película como código, con una capa de canvas para el trabajo dibujado a mano. La guía paso a paso, con prompts y películas reales, es cómo hacer una animación con cada fotograma dibujado en JavaScript.
Haz una película dibujada con código
Descríbela en una frase. El agente planifica los planos, dibuja cada fotograma en JavaScript y escribe la música, sin terminal y sin archivos.
Prueba Animation en iArt →Conceptos relacionados
Términos relacionados: animación por fotogramas clave, motion graphics, video explicativo, tipografía cinética.