Transformer une animation HTML en GIF

Pour les README, les pull requests, la documentation, les messageries et tous les endroits où une vidéo ne se lit pas. Collez le code, choisissez la taille, téléchargez le GIF.

Ou partez d’un exemple :

Vous demandez le code à une IA ?

Aperçu

Votre animation s’affiche ici dès que vous la collez.

Gardez cet onglet au premier plan pendant le rendu.

Télécharger
Format
Cadre
s

Tout se passe sur votre appareil. Votre fichier n’est jamais envoyé.

Obtenir de l’IA un code prêt à exporter

Collez ce texte à la suite de votre demande, ou envoyez-le avec le code que vous avez déjà. Le résultat passera au rendu sans retouche.

Trois étapes
  1. 1
    Coller
    Collez le HTML, ou déposez un fichier .html ou .zip. L’aperçu démarre aussitôt.
  2. 2
    Vérifier
    Choisissez le cadre selon la destination de la vidéo. La durée est lue dans l’animation, et vous pouvez la modifier.
  3. 3
    Exporter
    Choisissez MP4, GIF, WebM transparent ou une image PNG, puis téléchargez le fichier.
Obtenir de l’IA un code prêt à exporter
Collez ce texte à la suite de votre demande, ou envoyez-le avec le code que vous avez déjà. Le résultat passera au rendu sans retouche.
Réécris cette animation sous la forme d’un seul fichier HTML autonome, que je puisse exporter en vidéo avec htmlto.video :
- Conçois-la pour un cadre 16:9. Elle doit remplir exactement la fenêtre du navigateur (100vw sur 100vh, sans défilement). Exprime toutes les dimensions en vw et en vh pour qu’elle s’adapte à n’importe quelle résolution.
- Elle démarre toute seule au chargement de la page et ne demande ni souris, ni clavier, ni défilement.
- Elle a une durée fixe. Indique cette durée dans un commentaire sur la première ligne, par exemple <!-- duration: 8s -->.
- Anime avec des animations CSS, la Web Animations API, GSAP, ou requestAnimationFrame en utilisant son argument timestamp. N’utilise ni vidéo, ni audio, ni iframe.
- Place tout le CSS et tout le JavaScript dans le fichier. Intègre les images en SVG inline ou en data URL. Les polices et les bibliothèques ne peuvent venir que d’un CDN qui autorise le chargement cross-origin, comme Google Fonts, cdnjs ou jsDelivr.
- Réponds avec le HTML complet dans un seul bloc de code.
Réussir son GIF
Faites court
Un GIF grossit vite. Trois à huit secondes en 480p conviennent généralement pour un README ou un message.
Des boucles sans raccord
Une animation en boucle est coupée à un cycle exactement, si bien que le GIF se répète sans saut.
Préférez les aplats
Un GIF contient 256 couleurs par image. Les formes en aplat et le texte restent nets ; les dégradés doux et les photos laissent apparaître des bandes.
Besoin de qualité ?
Exportez en MP4 à partir du même code. Le résultat est plus net et beaucoup plus léger, partout où la vidéo est acceptée.
Ce que l’outil sait rendre
  • Animations et transitions CSS
  • GSAP, anime.js, Motion et d’autres bibliothèques JavaScript
  • Canvas 2D
  • SVG animé en CSS ou en JavaScript
  • WebGL et Three.js
  • La Web Animations API et requestAnimationFrame
Ce qu’il ne sait pas encore faire
  • Safari, l’iPhone et l’iPad ne permettent pas l’export. L’aperçu y fonctionne.
  • Les vidéos, le son et les iframes présents dans la page sont ignorés.
  • Les images et les polices hébergées sur des serveurs qui bloquent la lecture cross-origin manqueront.
  • Les animations qui attendent un clic, un survol ou un défilement n’avancent pas.
  • Le SVG animé avec des balises SMIL comme <animate> n’est pas capturé.
  • Les scènes WebGL très lourdes peuvent échouer sur les ordinateurs moins rapides.