9 des meilleures bibliothèques d'animation pour les concepteurs d'interface utilisateur –

Cet article a été mis à jour en octobre 2019 pour refléter l'état actuel des bibliothèques d'animation. Nous allons parcourir 9 bibliothèques d'animations gratuites et bien codées, parfaitement adaptées au travail de conception d'interface utilisateur – couvrant leurs forces et leurs faiblesses et le moment de choisir chacune d'elles.

Améliorez vos compétences en CSS avec notre livre CSS Master, 2e édition de Tiffany B. Brown – couvrant les animations CSS, les transitions, les transformations et bien plus encore.

La conception Web front-end a connu une révolution au cours de la dernière décennie. À la fin des années 2000, la plupart d'entre nous concevions encore des présentations de magazines statiques. De nos jours, nous construisons des «machines numériques» avec des milliers de pièces mobiles, redimensionnées, coordonnées et bien ajustées.

Tout simplement, les grands concepteurs d'interface utilisateur doivent également être de grands animateurs – avec une solide compréhension de l'animation Web. Techniques.

N'oubliez pas que nous examinons chaque bibliothèque du point de vue d'un concepteur d'interface utilisateur expérimenté en code et non en tant que développeur «gourou du code». Certaines de ces bibliothèques sont purement CSS. D'autres sont en JavaScript, mais aucun ne nécessite plus qu'une compréhension de base du langage HTML / CSS et / ou JavaScript pour être utile.

Notre liste des 9 meilleures bibliothèques d'animation

1. Animate.css
2. Bounce.js
3. AnimeJS [19659010] GreenSock (GSAP)
4. Magic Animations
5. ZDog
6. CSShake
7. Hover.CSS
8. AniJS

Animate.css est l'un des CSS les plus petits et les plus faciles à utiliser bibliothèques d'animation disponibles. L'application de la bibliothèque Animate à votre projet est aussi simple que lier le CSS et ajouter les classes CSS requises à vos éléments HTML. Vous pouvez également utiliser jQuery pour déclencher les animations d'un événement particulier si vous préférez.

• Créateurs : Daniel Eden
• Publié le : 2013 [19659020] Version actuelle : 3.7.2
• Popularité : 62 284 étoiles sur GitHub
• Description: “Une bibliothèque multi-navigateurs d'animations CSS. Aussi facile à utiliser que facile. ”
• Taille de la bibliothèque: 56.7 ko (minifiée)
• GitHub : https://github.com/daneden/animate.css [19659019] Licence :

Au moment de la rédaction de cet article, il s'agit toujours de l'une des bibliothèques d'animation CSS les plus utilisées et les plus utilisées, et son fichier réduit est suffisamment petit pour être intégré dans les sites Web mobiles.

Animate.css est encore en développement actif. Méfiez-vous de la version 4, qui supportera les propriétés personnalisées CSS (également appelées variables CSS). C’est l’une des bibliothèques d’animation les plus simples et les plus robustes, et nous n'hésiterons pas à l'utiliser dans tous les projets.

Bounce.js est une bibliothèque d'animation JavaScript destinée à fournir une sélection de jeux amusants et amusants, Warner Brothers- Des animations sur votre site web.

• Créateurs : Tictail
• Paru le : 2014
• Version actuelle : 0.8. 2
• Popularité : 5 975 étoiles sur GitHub
• Description : “Créez de superbes animations avec CSS3 en un rien de temps.”
• Taille de la bibliothèque : 16 kB
• GitHub : https://github.com/tictail/bounce.js
• Licence :

Bounce.js est une bibliothèque d'animation soignée livrée avec une dizaine de paramètres prédéfinis, d'où la petite taille du bibliothèque. Comme avec animate.css les animations sont fluides et sans faille. Vous pouvez envisager d'utiliser cette bibliothèque si vos besoins sont centrés sur les types d'animation de type «pop et bulle» et pourraient bénéficier d'une surcharge de taille de fichier.

AnimeJS est le dernier ajout à notre liste, mais a gagné un grand nombre de convertis depuis sa création. C’est incroyablement polyvalent et puissant et il ne serait pas déplacé d’alimenter des animations de jeux HTML. La seule vraie question qui se pose est « est-ce excessif pour les applications Web simples? »

Peut-être. Mais comme il est aussi rapide, petit et relativement facile à apprendre, il est difficile d'y trouver une faute.

AnimeJS est décrit comme une «bibliothèque d'animation JavaScript légère avec une API simple mais puissante. . Il fonctionne avec les propriétés CSS, les attributs SVG, DOM et les objets JavaScript ”. Assez génial.

Ce projet est disponible à l'adresse GitHub .

Très impressionnant, Anime.JS dispose d'un «document» époustouflant qui illustre HTML, JavaScript. code et exemples de travail dans un bel environnement d'application.

En bref, si vous êtes à l'aise avec une solution d'animation JavaScript, il est difficile de trouver des raisons d'ignorer AnimeJS.

GreenSock (ou GSAP – GreenSock Animation Platform) est le couteau suisse de l'animation web. GSAP est idéal pour les animations élégantes et sophistiquées qui se déroulent sans heurts. Vous pouvez animer n’importe quoi, des éléments DOM aux SVG, et son écosystème comprend des plugins incroyables qui vous permettent de faire toutes sortes de choses amusantes, par exemple, des SVG morphing, des traits SVG, des fonctionnalités de défilement, du brouillage du texte, etc. C’est rapide, compatible avec tous les navigateurs et sa syntaxe est simple et intuitive.

• Version actuelle : 2.1.3
• Popularité pour GitHub : 9 709 étoiles sur GitHub
• Description : «Une animation ultra performante de niveau professionnel pour le Web moderne."
• Taille de la bibliothèque : 313 kB (dossier réduit contenant la légèreté téléchargement de la bibliothèque)
• GitHub : https://github.com/greensock/GreenSock-JS/
• Licence : licence standard sans frais, mélangée à un modèle payant pour un usage spécifique fonctionnalités et plugins. Pour plus de détails, reportez-vous à la page de licence .

GSAP étant modulaire, vous pouvez choisir les parties de la bibliothèque dont vous avez besoin pour votre projet, ce qui est très utile pour contrôler la taille du fichier.

Si vous recherchez quelque chose de puissant mais intuitif avec une documentation impressionnante et un soutien de la part de la communauté, je vous recommande vivement de donner une chance à cette bibliothèque d’animation dans votre prochain projet. Vous serez enthousiasmés.

Magic Animations est l’une des bibliothèques d’animation les plus impressionnantes du marché. Il a beaucoup d'animations différentes, dont beaucoup sont uniques à cette bibliothèque. Comme avec Animate.css, vous pouvez implémenter Magic en important simplement le fichier CSS. Vous pouvez également implémenter les animations en utilisant jQuery. Ce projet offre une application de démonstration particulièrement intéressante.

• Version actuelle : 1.4.1
• Popularité : 6 074 étoiles sur GitHub
• Description ]: “Animations CSS3 avec effets spéciaux”
• Taille de la bibliothèque : 54,9 ko (min.)
• GitHub : https://github.com/miniMAC/magic
• Licence : Licence MIT

La taille du fichier de Magic Animation est modérée par rapport à Animate.css et elle est connue pour ses animations signature, telles que les effets magiques, les effets fous et les effets de bombe.

pour quelque chose d'un peu hors de l'ordinaire, foncez. Vous ne serez pas déçu.

Zdog est une bibliothèque JavaScript permettant de créer des dessins et des animations 3D par David DeSandro. Avec son aide, vous pouvez dessiner vos motifs à l'aide de l'élément ou des SVG et les animer sous forme d'animations fluides avec un effet 3D épuré.

• Version actuelle : 1.1.0
• Popularité : 6 940 étoiles sur GitHub
• Description : “Moteur pseudo-3D rond et plat pour designer
  pour toile et SVG”
• Taille de la bibliothèque : 28 kB (minifiée)
• GitHub : https://github.com/metafizzy/zdog
• Licence : Licence MIT

Si vous connaissez bien JavaScript, vous apprendrez rapidement les bases du logiciel Zdog : il possède une API déclarative simple, une excellente documentation et de nombreuses ressources d’apprentissage. Découvrez mon intro de Zdog sur SitePoint.

CSShake fournit exactement ce qu'il est indiqué dans la boîte: une bibliothèque CSS conçue spécifiquement pour modifier les éléments de votre page Web. Comme vous pouvez vous en douter, de nombreuses variantes sont disponibles pour secouer vos composants Web.

Apple a popularisé le trope d'interface utilisateur consistant à secouer vigoureusement un élément UI dialogue, modal ou zone de texte) lorsqu'un utilisateur entre une réponse incorrecte – imitant une personne en secouant la tête. CSShake propose toute une gamme d’animations intéressantes «shake» et cette bibliothèque ne manque pas de variation.

Hover.css est une bibliothèque d’animation CSS conçue pour être utilisée avec des boutons et d’autres éléments de l’interface utilisateur de votre site Web. Il a vraiment de belles transitions 2D, avec une foule d'autres animations bien conçues.

• Version actuelle : 2.3.2
• Popularité : 21 818 étoiles sur GitHub
• Description : “Appliquez-vous facilement à vos propres éléments, modifiez ou utilisez simplement pour vous inspirer.”
• Taille de la bibliothèque : 93.0 kB (minifié)
• GitHub : https://github.com/IanLunn/Hover
• Licence : licence personnelle / à code ouvert gratuite et licence commerciale payante, selon les besoins. Pour plus de détails, lisez la section de licences sur GitHub .

Hover.css convient parfaitement à l'animation d'éléments de page discrets tels que des boutons, des logos, des composants SVG ou des images en vedette, plutôt que des animations de page plus grandes et complexes. On peut soutenir que ses effets d'animation les plus remarquables sont ses bulles et ses boucles distinctives.

Notre dernière bibliothèque est intéressante pour son approche unique. AniJS est une bibliothèque d’animations qui vous permet d’ajouter des animations à des éléments dans une structure simple ressemblant à une phrase. Prenez le format suivant:

Si cliquez, sur Square, Ne vacille animé à .container-box

If vous n’êtes pas très familiarisé avec JavaScript, c’est peut-être un excellent moyen d’entrer dans les mouvements chorégraphiés en JS.

• Creator : Dariel Noel
• Paru le [1599019]: 2014
• Version actuelle : 0.9.3
• Popularité : 3.524 étoiles sur GitHub
• Description : “Une bibliothèque pour augmenter votre design Web sans codage.” [19659020] Taille de la bibliothèque : 10.5 kB
• GitHub : https://github.com/anijs/anijs
• Licence :

AniJS est une bibliothèque avec une taille très raisonnable prenant en compte ses fonctionnalités. Le format utilisé pour la mise en œuvre est assez original et différent de celui des autres bibliothèques d'animation (que beaucoup d'autres pourraient trouver non conventionnelles).

Néanmoins, cette bibliothèque vaut la peine d'être essayée, au moins une fois pour vos projets.

Quelle bibliothèque choisir?

De nombreuses bibliothèques d'animation sont prêtes et attendent d'être implémentées dans votre projet. Parmi les solutions énumérées ci-dessus, certaines offrent la meilleure combinaison de sophistication et de stabilité.

Si vous recherchez une solution CSS simple à utiliser et robuste, Animate.css est probablement la plus polyvalente, Option "bang-for-buck" disponible.

Si vous recherchez une option JavaScript plus complète et plus puissante, GreenSock et AnimeJS sont très difficiles à séparer. [19659004] Bien que l’utilisation d’une bibliothèque d’animation dans votre application Web puisse certainement améliorer l’interactivité, en faire un usage excessif va à l’encontre du but recherché et déroute souvent l’utilisateur. Soyez prudent et utilisez les animations avec discernement.

Utilisez-vous des bibliothèques d'animation pour vos projets? Quelles sont vos bibliothèques d'animation préférées?

Améliorez vos compétences en CSS avec notre livre CSS Master, 2e édition de Tiffany B. Brown – couvrant les animations CSS, les transitions, transformations et bien plus encore.

Alex fait des choses cruelles et inhabituelles à CSS depuis 2001. Il est le principal concepteur et développeur pour SitePoint et l'ancien éditeur de DesignPoint et UX de SitePoint avec plus de Plus de 150 lettres écrites. Aujourd'hui, Alex participe à la planification, au développement, à la production et à la commercialisation d'une vaste gamme de produits et de références imprimés et en ligne. Il a conçu plus de 40 couvertures d'ouvrages de SitePoint.

Tanay Pant est un auteur, hacker, développeur et passionné d'informatique indien. Il est connu pour son travail sur Learning Learning OS Development Development publié par Packt . Il est également représentant officiel de Mozilla et figure dans la liste relative à: crédits du navigateur Web Firefox. Son site Web personnel est tanaypant.com .

Maria Antonietta Perna est co -Éditeur du canal HTML / CSS de SitePoint et développeur Web front-end. Elle aime bricoler avec les normes CSS rigoureuses et est curieuse d’apprendre des approches pédagogiques du code frontal. Lorsqu'elle ne code pas pour le Web ou n'écrit pas pour le Web, elle aime les livres de philosophie, les longues promenades et la bonne nourriture.