Les meilleures librairies d'animation web pour 2019

Le développement Web a évolué, passant de sites Web statiques à des sites Web agréables. À l’heure actuelle, tout développeur ou concepteur Web sait à quel point il est crucial de créer un site Web qui fonctionne non seulement bien, mais qui soit beau.

L’animation est l’une des tendances clés pour 2019 mais il n’est pas nécessaire de réinventer la roue pour ajouter du mouvement à vos sites. Nous examinons les meilleures bibliothèques d’animation gratuites pour les projets Web.

Vous pouvez créer des choses folles avec des animations d'interface utilisateur sur le Web. Cela devient rapidement la norme pour les sites Web modernes où l'engagement des utilisateurs est un problème important.

Si vous regardez autour de vous, vous trouverez de nombreux générateurs de code et des outils personnalisés pour vous aider dans l'animation.Mais vous pouvez également trouver des bibliothèques gratuites qui vous feront gagner du temps dans le processus de codage.

Cela donne aux développeurs un flux infini d’actifs à utiliser et à tester dans leurs projets. Tous ne fonctionneront pas pour tous les projets et les bibliothèques axées sur l’animation ne prennent pas toutes en charge les mêmes interfaces utilisateur.

Mais la seule façon de trouver ce que vous voulez est de faire beaucoup de tests. C’est précisément pour cette raison que j’ai créé cette énorme liste de bibliothèques d’animation destinées aux développeurs Web.

Vous trouverez ici un bon mélange de bibliothèques CSS et de bibliothèques JavaScript, toutes avec un seul objectif: créer des animations de page géniales.

Ce sont les meilleures bibliothèques d’animation web open source. Cela comprend un bon mélange de bibliothèques JavaScript et d'animations CSS uniquement. Les deux styles sont excellents et ils présentent tous deux des avantages et des inconvénients.

Quel que soit votre niveau de compétence ou le temps que vous avez consacré au développement Web, je vous garantis qu’il existe une bibliothèque dans laquelle vous pourrez vous essayer et vous amuser vraiment.

De toute façon, je vous garantis que cette liste aura quelque chose que vous allez aimer.

1-GSAP

La bibliothèque GSAP est l’une des meilleures ressources gratuites disponibles pour les développeurs.Il fonctionne uniquement en JavaScript et l’une des bibliothèques d’animation les plus robustes que vous puissiez utiliser.

Il fonctionne avec les spécifications HTML5 et fonctionne bien avec tous les navigateurs modernes, sans oublier que l'équipe met constamment à jour cette bibliothèque avec de nouvelles fonctionnalités. Il peut fonctionner avec des SVG, des éléments de canevas ou même des objets jQuery avec d'autres bibliothèques associées telles qu'EaselJS.

Cela vaut vraiment la peine de chercher si vous avez besoin d’une puissante bibliothèque d’animation Web. Cela peut aussi gérer des tâches simples, mais vous pouvez essayer d’autres bibliothèques plus petites.

A SAVOIR :
L'agence [https://phoenix.cool/ PHOENIX] qui a remporté le prix de la [https://www.cssdesignawards.com/about CSSDA (CSS Design Awards)] en 2015 préconise comme pré-requis en tant que développeur-front cette librairie d'animation, soit :

GSAP

https://greensock.com/

Démarrer avec GSAP

https://greensock.com/get-started-js

La plate-forme d’animation GreenSock (GSAP) anime tout ce que JavaScript peut toucher (propriétés CSS, SVG, React, canvas, objets génériques, etc.) et résout d’innombrables incohérences dans les navigateurs, le tout à une vitesse fulgurante (jusqu’à 20 fois plus rapide que jQuery). Voir Pourquoi GSAP? pour savoir pourquoi il est utilisé par plus de 7 000 000 sites et toutes les grandes marques.

Accrochez-vous à travers la courbe d'apprentissage et vous découvrirez à quel point l'animation avec du code peut être addictive. Nous promettons que ça vaut la peine.

Pourquoi GSAP les animations HTML5 ?

https://greensock.com/why-gsap

GSAP est devenu un standard dans l'industrie, la plupart des sites primés l'utilisent et Google recommande GSAP pour les animations JavaScript. Plus de 4 millions de sites utilisent GSAP!

DEMO : Exemples et vitrines

Inspirez-vous en consultant ces exemples et vitrines.

https://greensock.com/examples-showcases

Quelques sites exemples :
* https://gus-trans.com
* https://vintage.agency/

* http://www.oatthegoat.co.nz/

Documentation :

https://greensock.com/docs

Cours : Vidéo et Ebook :

https://www.nobledesktop.com/html5-greensock-video-class-gsap?a=ox7

2-Anime.js

Quand j'ai trouvé la bibliothèque Anime.js pour la première fois, j'étais terrassé. Cette chose est incroyablement puissante et va au-delà des simples animations UI / UX.

Avec Anime.js, vous pouvez concevoir des animations esthétiques avec des logos, des boutons, des images. Cela prend en charge tous les déclencheurs utilisateur typiques tels que clics / survols / balayages et vous avez accès à de nombreuses animations personnalisées.

Si vous consultez la documentation, vous pourrez trouver de nombreux exemples incorporés directement dans la page. De plus, une collection sur CodePen regorge d’exemples d’Anime.js à parcourir.

Anime.js :

https://animejs.com/

DOC

https://animejs.com/documentation/

Examples

https://codepen.io/collection/XLebem/

3-Wicked CSS

Voici l'une des bibliothèques les plus récentes, axée sur le code CSS pur. Wicked CSS fonctionne au-dessus des propriétés CSS3 pour offrir des résultats assez incroyables.

Vous trouverez sur la page principale de nombreuses démonstrations en direct que vous pourrez tester directement dans le navigateur. Celles-ci incluent les rotations d'objet, les retournements, les diapositives et bien d'autres effets d'animation similaires.

Certaines d'entre elles peuvent être assez simples pour que vous puissiez les construire vous-même. Mais d’autres deviennent très complexes et c’est ce qui rend la bibliothèque CSS de Wicked si amusante à jouer.

Wicked.css : 

http://kristofferandreasen.github.io/wickedCSS/

Exemples:

http://kristofferandreasen.github.io/wickedCSS/examples.html

DOC

http://kristofferandreasen.github.io/wickedCSS/documentation.html

4-Animate CSS

Peut-être que la ressource définitive pour l'animation Web est Animate.css. Cette bibliothèque open source a été publiée il y a quelques années et elle est toujours plus pertinente que jamais.

Le développeur Daniel Eden a créé ce projet comme moyen simplifié d'ajouter des animations CSS3 personnalisées sur une page Web. Au fil des ans, il est devenu une bibliothèque d'animation à part entière avec suffisamment de puissance pour fonctionner sur n'importe quel projet majeur.

La page d'accueil propose de nombreuses démos afin que vous puissiez tester les styles d'animation et voir ce que vous pensez. De plus, il existe une documentation de qualité sur GitHub, notamment une liste de classes et des exemples de fragments de code.

Animate.css :

https://daneden.github.io/animate.css/

GitHub

https://github.com/daneden/animate.css

5-Tuesday

La chose que j'aime le plus à propos de mardi est la simplicité de ces animations. Avec cette bibliothèque, vous contrôlez la façon dont les éléments apparaissent et disparaissent de la page.

Mais ces animations ne sont ni exagérées ni super glamour. Au lieu de cela, ils offrent un joli coup de poing subtil qui améliore réellement l’esthétique de la page, mais ne nuit pas au contenu ni à l’expérience utilisateur.

Je n’ai pas vu beaucoup de sites Web utiliser mardi, mais c’est peut-être la bibliothèque la plus propre qui existe.

Il fonctionne sur du CSS pur et les styles d’animation sont vraiment raisonnables. Ils peuvent s’intégrer à n’importe quel site et vous disposez de plus d’une douzaine de styles de fondu enchaîné.

Thesday

http://shakrmedia.github.io/tuesday/

6-CSShake

Je n’ai pas encore vu de bibliothèque CSS aussi amusante ou étrange que CSShake. C’est une partie folle et une partie unique, ce qui ne va probablement pas avec tous les sites Web.

La liste a été créée à cause de l'impossibilité de trouver une bibliothèque similaire offrant ces fonctionnalités. Avec CSShake, vous pouvez créer des animations en survol avec des effets de tous types de styles, le tout en CSS pur.

Qu'il s'agisse de mouvements légers ou de secousses vigoureuses et tout ce qui se trouve entre les deux, cette bibliothèque a tout cela avec une configuration assez facile à démarrer.

CSShake

https://elrumordelaluz.github.io/csshake/

7-Mo.js

Parmi les nombreuses bibliothèques JavaScript détaillées pour l'animation, je dois dire que Mo.js est l'un des meilleurs. Cette bibliothèque est massive et elle est vraiment conçue pour les graphiques animés sur des animations UI / UX.

Mais vous pouvez l'utiliser pour n'importe quoi si vous apprenez comment cela fonctionne. Les codes sont assez simples à manipuler et vous pouvez suivre plusieurs didacticiels pour vous simplifier la vie.

Est-ce la bibliothèque d'animation parfaite? À peine.

Cependant, il a beaucoup de fonctionnalités étonnantes et il simplifie vraiment le processus d’animation, que vous animiez une barre de navigation, un logo ou un autre objet complexe.

Une introduction to mo.js

https://css-tricks.com/introduction-mo-js/

Démarrer avec  Mo.js pour créer des animations web

https://www.youtube.com/watch?v=D9S2SU1TMng

Introduction aux MoJs: Motion pour le Web

https://webdesign.tutsplus.com/fr/tutorials/introduction-to-mojs-motion-for-the-web--cms-28389

S'amuser avec Mo.js

https://blog.codepen.io/2017/09/22/fun-mo-js/https://blog.codepen.io/2017/09/22/fun-mo-js/

Codepen

https://codepen.io/tag/mojs/

8-Animate Plus

Pour une bibliothèque d’animation ultra légère et facile à utiliser, consultez Animate Plus. Cela ne pèse que 2 Ko une fois minifiés et vous offre toutes les fonctionnalités de base auxquelles vous vous attendiez avec une animation JavaScript personnalisée.

C'est facile à installer avec npm et vous pouvez le configurer en suivant les extraits de code sur GitHub. La plupart d’entre elles ne sont que des démos de base, elles ne sont donc pas très complexes, mais vous pouvez également trouver toutes les options et méthodes de rappel directement sur GitHub.

Consultez [http://animateplus.com/examples/getting-started/ cet exemple de démonstration] tiré directement de l'extrait de code du référentiel principal. C’est peu, mais il va vous montrer comment configurer Animate Plus et exécuter un peu de code par défaut à partir de zéro.

Animateplus

https://github.com/bendc/animateplus

'''En bas de page , une dizaine d'exemples :'''

http://animateplus.com/examples/stress-test/

http://animateplus.com/examples/burst/

...

9-Bounce.js

Avec Bounce.js, vous pouvez créer de puissantes animations CSS3 et JS en quelques clics.

Sur la page d'accueil, vous trouverez un générateur d'animation personnalisé mettant l'accent sur les modules. De cette façon, vous pouvez ajouter les fonctionnalités d'animation spécifiques souhaitées sur la page sans ajouter de code supplémentaire.

La plus grande différence avec Bounce.js est qu’il ne fonctionne pas comme une simple bibliothèque. Bien que vous puissiez trouver les informations de configuration sur GitHub, il ne s’agit pas uniquement d’un script de base. Bounce est l’une des rares bibliothèques d’animation que vous pouvez styliser dans votre navigateur.

Bounce.js

http://bouncejs.com/

GitHub

https://github.com/tictail/bounce.js

10-Magic

Des animations amusantes avec une touche d'espièglerie décrivent le mieux la bibliothèque Magic.

Toute cette collection se concentre sur les animations CSS3 tout en proposant des styles personnalisés introuvables ailleurs. C’est une très grande collection de codes CSS3 et vous y trouverez beaucoup d’astuces intéressantes. Rotations, retournements de perspective, effets de fondu, beaucoup à faire.

Si vous regardez la page de démonstration, vous pouvez découvrir certains de ces effets en action.

Certes, cette bibliothèque est encore beaucoup plus petite que d’autres bibliothèques CSS3 et ne peut donc pas concurrencer Tuesday ou Animate.css. Mais il y a beaucoup d’animations Web bien nettes que vous ne trouverez pas dans d’autres bibliothèques.

Magic

https://minimamente.com/example/magic_animations/

GitHub

https://github.com/miniMAC/magic

11-Hover.css

Hover.css est une bibliothèque d'animation CSS conçue pour être utilisée avec des boutons, des icones, des bulles d'infos et d'autres éléments d'interface utilisateur de votre site Web. Il possède de très belles transitions 2D, ainsi que de nombreuses autres animations bien conçues.

Hover.css

http://ianlunn.github.io/Hover/

12-DynCSS

DynCSS est une bibliothèque d'animation que vous aimerez peut-être utiliser sur votre site Web avec '''des effets de parallaxe'''. 

DOC

https://www.vittoriozaccaria.net/dyn-css/#api

13-Velocity.js

Velocity.js est une autre suite d’animations JavaScript sophistiquée et complète, comprenant des fonctions telles que Fade & Slide, Scroll, Stop, Finish, Reverse, etc.

Il contient une liste impressionnante d’utilisateurs renommés, tels que Tumblr, WhatsApp, MailChimp, Scribd, Gap et HTC. Vous savez donc qu’il a fait ses preuves face à de grandes bases d’utilisateurs et à des cas étranges.

Velocity.js

http://velocityjs.org/

DEMO

Quelques démos ci-après :

* https://codepen.io/julianshapiro/pen/wmtEH
* https://codepen.io/julianshapiro/pen/wlEtB
* https://codepen.io/julianshapiro/pen/kBuEi
* https://codepen.io/julianshapiro/pen/FIwfv
* https://codepen.io/julianshapiro/pen/fjbct

14-AniJS

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

Si vous n’êtes pas familiarisé avec JavaScript, c’est peut-être un excellent moyen de vous initier aux mouvements chorégraphiés par JS.

AniJS

Une bibliothèque pour élever votre conception Web sans codage

http://anijs.github.io/

CODEPEN

https://codepen.io/collection/DFmkq/

Dans un prochain billet nous continuerons la liste de ces excellentes librairies.

Liens des l'Articles source 

* 10 BEST FREE ANIMATION LIBRARIES FOR THE WEB (Janvier 2018):
https://www.webdesignerdepot.com/2018/01/10-best-free-animation-libraries-for-the-web/
* 7 Best Animation Libraries for UI Designers 2018 :
https://www.codementor.io/hayeskier/7-best-animation-libraries-for-ui-designers-2018-kmg7byy1g
* 9 of the Best Animation Libraries for UI Designers (Août 2018) :
https://www.sitepoint.com/our-top-9-animation-libraries/
* 10 JavaScript Animation Libraries to Follow in 2018
https://hackernoon.com/10-javascript-animation-libraries-to-follow-in-2018-50ff1d905f43
* 11 JavaScript Animation Libraries For 2019
https://blog.bitsrc.io/11-javascript-animation-libraries-for-2018-9d7ac93a2c59
* 16 Best Web Animation Libraries For Developers (CSS + JS) (Janvier 2019)
https://www.vandelaydesign.com/best-web-animation-libraries/

Dans ce dernier lien, découvrez ces 5 librairies ci-après non décrites dans cet article :

• Dyn CSS
• Effeckt.css
• VHS
• Animate Plus
• Wow.js