Anime.js - Une bibliothèque d'animations JavaScript légère

Animation Web a parcouru un long chemin. Les développeurs peuvent non seulement créer une animation en utilisant une combinaison de CSS / SVG / JS, mais aussi des dizaines de bibliothèques gratuites gagner du temps dans le processus.

Un de mes favoris est Anime.js, un open source totalement gratuit Bibliothèque d'animation JavaScript.

Cette bibliothèque peut fait tout. Ses construit sur JavaScript mais aussi s'appuie fortement sur les animations CSS. Vous pouvez cibler des éléments de page individuels via le DOM ou vous pouvez même cibler SVG personnalisés.

Toute la documentation est auto-hébergé sur GitHub, il vous faudra donc peut-être faire défiler l'écran pour trouver exactement ce que vous cherchez. Mais chaque fonctionnalité d'animation vient avec quelques paramètres tels que le retard, la durée et l’atténuation.

Notez cette bibliothèque ne vient pas avec de nombreux styles d'animation par défaut. Anime.js est fait pour les développeurs qui veulent personnaliser leurs animations sans écrire de code verbeux.

Pour un exemple en direct, Découvrez le stylo Codepen ci-dessous. Le code est extrêmement simple mais vous obtenez une animation crédible avec squash et stretch plus anticipation, les deux fondamentaux de l'animation.

Un avertissement juste: la bibliothèque Anime.js est dense. Ce n'est pas si difficile de créer une animation personnalisée, mais vous devez comprendre quelques bases comme easing et la syntaxe JavaScript commune pour les callbacks et les options.

Mais Toutes les informations dont vous avez besoin est sur le page de repo, comprenant beaucoup d'échantillons de code et tableaux de documentation détaillés. Et vous pouvez parcourir les rapports de bogues ouverts ou vérifier le support du navigateur qui inclut actuellement tous les principaux navigateurs et IE 10+.

C’est facilement l’une des meilleures bibliothèques d’animation pour les développeurs Web et ce devrait être votre solution idéale pour toute animation web complexe.

Pour voir un tas de exemples vivants, Découvrez cette collection de démos Anime.js hébergées sur CodePen. Ci-dessous, j'ai intégré mon favori qui anime tout le logo à partir de zéro, avec une réelle vivacité.