JavaScript Animation
JavaScript animation is motion made by code in a web browser, either by moving page elements or by drawing every frame on a canvas, which can produce whole films with no image files.
What is JavaScript Animation?
JavaScript animation is motion created by code running in a web browser: a script changes what's on screen over time, either by moving page elements (HTML, SVG) or by drawing every frame onto a <canvas>. It powers interface motion on websites, and it can also produce whole animated films, with no image or video files, when the code draws each frame itself.
The term covers two quite different things:
- Animating page elements. Libraries such as GSAP and anime.js, or the browser's built-in Web Animations API, move, fade and morph buttons, text and SVG shapes on a timeline. This is how most website motion is built.
- Drawing every frame on a canvas. A function paints the full picture for a given moment, and the browser calls it for frame after frame. Nothing exists on screen except what the code draws. This is the kind of animation that spread after the Claude Opus 5.5 launch, described as "every frame drawn in JavaScript".
How Code-Drawn JavaScript Animation Works
In the canvas approach, a film is a pure function of time, draw(ctx, t): the same t always gives the same picture. That property makes it renderable. A headless browser seeks to each frame, captures it, and writes an MP4, frame-accurately, however long a frame takes to draw. Three techniques give these films a hand-made look:
- Seeded randomness for wobbly lines and inked fills that are identical on every render instead of flickering.
- Music synthesized with the Web Audio API in the same page, rendered offline and mixed into the video.
- One shared timeline (tempo, shots, events) that both the drawing code and the music read, so sounds land on actions and cuts land on the beat.
JavaScript Animation vs. Keyframe Animation vs. AI Video
| JavaScript (canvas) animation | Keyframe animation | AI video generation | |
|---|---|---|---|
| What makes the frames | Code draws each one | Software interpolates between key poses | A video model predicts pixels |
| Files needed | None | Drawings, vectors, footage | None |
| On-screen text | Exact | Exact | Can drift |
| Re-render | Identical every time | Identical | Different every time |
| Typical use | Explainers, loops, stylized short films, web motion | Character and motion design work | Photoreal or cinematic shots |
More on the middle column in keyframe animation, and on how AI changes it in AI animation vs. keyframe animation.
Common Use Cases
- Explainers: how a card payment clears, why the sky is blue, how noise-cancelling works. Diagrams, labels and camera moves all drawn in code.
- Channel intros and loops for YouTube, TikTok and Instagram, including faceless channels.
- Short stories and picture books: a character drawn from a reference photo, a bedtime story, a wordless short.
- Website and product motion: interface animation, hero loops, interactive graphics (usually the page-element kind).
How to Make a JavaScript Animation with AI
You no longer have to write the drawing code yourself. Claude Opus 5.5 can plan a film as a beat grid and a shot list, write the canvas drawing code and the Web Audio score, and check its own frames on a contact sheet. There are two ways to run it: in Claude Code with the free, open-source javascript-animation skills, or in iArt's Animation mode, where you type a prompt in the browser and it makes the film; for a longer one, ask it to keep going. The step-by-step guide, with real prompts and films, is how to make an animation where every frame is drawn in JavaScript.
Make a film drawn in code
Describe it in a sentence. The agent plans the shots, draws every frame in JavaScript and writes the music, with no terminal and no files.
Try Animation in iArt →Related Concepts
Related terms: keyframe animation, motion graphics, explainer video, kinetic typography.