Anime.js v4 : un moteur d'animation JavaScript qui a changé de paradigme

Un moteur d'animation pour qui, pour quoi faire

Anime.js résout un problème précis : animer des éléments du DOM, des attributs SVG, des propriétés CSS et même des objets JavaScript purs sans écrire des centaines de lignes de code imperatif. La bibliothèque s'adresse aux développeurs front-end qui veulent des transitions fluides, des effets de stagger (décalage progressif) et des timelines synchronisées, sans avoir à gérer manuellement les requêtes d'animation ou les calculs d'interpolation. La v4, sortie en 2026, est une réécriture complète : elle abandonne l'objet global `anime` de la v3 au profit d'imports ES modules nommés, comme `animate` et `stagger`. Ce choix vise la modularité et la réduction de la taille du bundle, mais il change radicalement la façon d'écrire du code. Si vous venez de la v3, préparez-vous à réécrire vos appels.

Le mécanisme : une API fonctionnelle et modulaire

La v4 fonctionne par importation de fonctions individuelles. L'exemple du README montre la nouvelle syntaxe : `import { animate, stagger } from 'animejs'`. On appelle ensuite `animate` avec un sélecteur CSS ou un élément, puis un objet d'options. Les propriétés animables incluent les transformations CSS comme `x` ou `rotate`, mais aussi les attributs SVG et les propriétés d'objets JavaScript. Le décalage se fait via `stagger` avec des options comme `{ from: 'center' }` pour démarrer depuis le centre d'un groupe. La gestion du temps est explicite : `duration`, `delay`, `loop`, `alternate` sont des paramètres directs. Le moteur calcule les interpolations en interne, ce qui évite d'écrire des fonctions de easing à la main. La documentation complète est disponible sur animejs.com, mais le README ne détaille pas le fonctionnement interne comme le ticker ou le calcul des keyframes. On devine que le moteur utilise `requestAnimationFrame`, mais rien ne le confirme dans les sources fournies.

Installation et scripts de développement

Pour utiliser Anime.js v4, il faut d'abord installer les dépendances avec `npm i`. Le README liste ensuite plusieurs scripts npm. Le script `dev` surveille les changements dans `src/**/*.js`, bundle la version ESM vers `lib/` et génère les déclarations de types dans `types/`. Le script `build` produit les versions ESM, UMD, CJS et IIFE, ce qui couvre la plupart des environnements : navigateur moderne, Node.js et chargement direct via script. Pour tester, `test:browser` lance un serveur local et exécute les tests navigateur, tandis que `test:node` fait de même pour Node. Enfin, `open:examples` démarre un serveur pour parcourir les exemples. Ces scripts indiquent une chaîne de build sérieuse, avec génération de types TypeScript, même si le projet est écrit en JavaScript. L'import ES module est le mode privilégié, ce qui suppose un bundler comme Vite ou Webpack pour les projets en production.

Les limites : migration v3 et documentation éparse

La principale limite est la rupture avec la v3. Le README renvoie vers un guide de migration, mais ne donne aucun détail sur les changements. Si vous avez du code existant basé sur `anime()`, vous devrez tout réécrire. De plus, le README est volontairement court : il ne documente pas les options avancées, les timelines ou la gestion des événements. La documentation complète est en ligne, mais elle n'est pas intégrée au dépôt. Cela signifie que pour évaluer la pertinence de la v4, vous devez vous rendre sur animejs.com et lire le guide de migration. Autre point faible : les tests sont présents, mais leur couverture n'est pas décrite. On ne sait pas si les animations SVG complexes ou les cas limites de performance sont testés. Enfin, le projet ne mentionne pas de support explicite des frameworks comme React ou Vue, ce qui peut nécessiter des wrappers maison.

Alternatives et différences d'approche

La concurrence principale est GSAP, une bibliothèque commerciale (avec une version gratuite) qui propose une API plus riche et une compatibilité navigateur plus large. GSAP utilise une chaîne d'outils différente : elle fonctionne par plugins et a un objet `gsap` global, contrairement aux imports modulaires d'Anime.js. GSAP est souvent considérée comme plus performante pour les animations complexes, mais elle est plus lourde. Une autre alternative est la Web Animations API (WAAPI), native dans les navigateurs. WAAPI offre des animations basées sur le DOM avec des `keyframes` et un contrôle via `play()`, `pause()`, mais elle ne gère pas les objets JavaScript ni les timelines aussi facilement qu'Anime.js. Anime.js se distingue par sa légèreté et sa simplicité d'API, mais WAAPI est une option sans dépendance si vous n'avez pas besoin de fonctionnalités avancées.

Coût de maintenance et licence

Le projet est sous licence MIT, ce qui autorise une utilisation commerciale sans restriction, à condition de conserver le copyright. Les mises à jour sont régulières : la v4.5.0 date de juin 2026, après la v4.4.1 en avril 2026. Cela suggère une maintenance active, mais le rythme exact reste inconnu. Le coût de maintenance pour un utilisateur est double : d'une part, suivre les évolutions de la v4 (qui semble stable après plusieurs correctifs), d'autre part, gérer la migration si vous venez de v3. Les scripts de build intégrés facilitent les contributions, mais ils ne remplacent pas une documentation exhaustive. Enfin, le projet dépend de sponsors pour sa pérennité, comme l'indique le README. Si le financement s'arrête, le développement pourrait ralentir. Vérifiez l'état du dépôt avant de vous engager, mais les derniers commits montrent une activité soutenue.

Un point de vue sur la v4 : la modularité a un prix

Le passage aux imports ES modules est un choix cohérent avec l'évolution du JavaScript moderne, mais il complique l'utilisation pour les débutants. La v3 était accessible avec une simple balise `<script>`, tandis que la v4 exige un environnement de build ou un import natif. C'est un compromis : on gagne en taille de bundle et en tree-shaking, mais on perd en simplicité d'installation. Le script `build` produit des versions UMD et IIFE, ce qui permet encore une inclusion directe, mais ce n'est pas le chemin recommandé. Si votre projet utilise déjà un bundler, la v4 s'intègre naturellement. Si vous écrivez une page statique sans build, préférez la v3 ou une alternative comme WAAPI. Cette décision architecturale est assumée, mais elle mérite d'être connue avant de choisir.

Conclusion éditoriale

Adoptez Anime.js v4 si vous démarrez un projet neuf et que vous voulez une bibliothèque d'animation légère, modulaire et capable de gérer des timelines complexes sans dépendance externe. Évitez-la si vous êtes déjà sur v3 et que vous ne pouvez pas assumer une migration de code, car l'API a changé en profondeur. Avant de vous engager, vérifiez que votre environnement supporte les modules ES natifs (ou que votre bundler les gère correctement) et consultez le guide de migration officiel pour estimer le travail. Enfin, testez le comportement des animations sur les navigateurs que vous ciblez, car la documentation ne précise pas les versions minimales supportées. Si vous acceptez ces conditions, Anime.js v4 est un choix solide pour des animations précises et performantes.

Sources officielles

1. Official documentation
2. Official README
3. Project repository
4. Release notes