Animation JavaScript

Qu'est-ce que l'animation JavaScript ?

L'animation JavaScript désigne le mouvement créé par du code qui s'exécute dans un navigateur web : un script fait évoluer ce qui s'affiche à l'écran au fil du temps, soit en déplaçant des éléments de la page (HTML, SVG), soit en dessinant chaque image sur un <canvas>. Elle anime les interfaces des sites web, et elle peut aussi produire des films d'animation complets, sans aucun fichier image ni vidéo, lorsque le code dessine lui-même chaque image.

Le terme recouvre deux choses assez différentes :

• Animer les éléments d'une page. Des bibliothèques comme GSAP et anime.js, ou la Web Animations API intégrée au navigateur, déplacent, font apparaître en fondu et transforment des boutons, du texte et des formes SVG sur une timeline. C'est ainsi que sont construites la plupart des animations de sites web.
• Dessiner chaque image sur un canvas. Une fonction peint l'image complète pour un instant donné, et le navigateur l'appelle image après image. Rien n'existe à l'écran en dehors de ce que dessine le code. C'est ce type d'animation qui s'est répandu après le lancement de Claude Opus 5.5, décrit comme « every frame drawn in JavaScript » (chaque image dessinée en JavaScript).

Comment fonctionne l'animation JavaScript dessinée en code

Dans l'approche canvas, un film est une fonction pure du temps, draw(ctx, t) : le même t donne toujours la même image. C'est cette propriété qui permet le rendu. Un navigateur headless se place sur chaque image, la capture et écrit un MP4, à l'image près, quel que soit le temps nécessaire pour dessiner une image. Trois techniques donnent à ces films leur aspect fait main :

• Un aléatoire à graine fixe pour des traits qui tremblent et des aplats encrés, identiques à chaque rendu au lieu de scintiller.
• Une musique synthétisée avec la Web Audio API dans la même page, rendue hors ligne puis mixée dans la vidéo.
• Une seule timeline partagée (tempo, plans, événements), lue à la fois par le code de dessin et par la musique, pour que les sons tombent sur les actions et les coupes sur le temps.

Animation JavaScript vs animation par images clés vs vidéo IA

Pour en savoir plus sur la colonne du milieu, voir animation par images clés, et sur ce que l'IA y change, animation IA vs animation par images clés.

Cas d'usage courants

• Vidéos explicatives : comment un paiement par carte est validé, pourquoi le ciel est bleu, comment fonctionne la réduction de bruit. Schémas, étiquettes et mouvements de caméra, tout est dessiné en code.
• Génériques de chaîne et boucles pour YouTube, TikTok et Instagram, y compris pour les chaînes faceless.
• Histoires courtes et livres illustrés : un personnage dessiné à partir d'une photo de référence, une histoire du soir, un court métrage sans paroles.
• Animation de sites et de produits : animations d'interface, boucles de hero, graphiques interactifs (généralement du type éléments de page).

Comment créer une animation JavaScript avec l'IA

Plus besoin d'écrire le code de dessin vous-même. Claude Opus 5.5 peut planifier un film sous forme de grille rythmique et de liste de plans, écrire le code de dessin sur canvas et la partition Web Audio, puis vérifier ses propres images sur une planche contact. Il y a deux façons de le faire tourner : dans Claude Code avec les skills javascript-animation, gratuits et open source, ou dans le mode Animation d'iArt, où vous tapez un prompt dans le navigateur et le film se construit ; pour un film plus long, demandez-lui de continuer. Le guide pas à pas, avec de vrais prompts et de vrais films : créer une animation dont chaque image est dessinée en JavaScript.

Concepts associés

Termes associés : animation par images clés, motion graphics, vidéo explicative, typographie cinétique.