75 outils d'animation Web à essayer
L’animation est l’une de ces tendances qui a fait la une des interfaces web. Sa popularité fluctue, mais elle est toujours présente quelque part, en tant que composante essentielle de tout site Web.
De minuscules, à peine visibles, chargeant des fileuses, à des transitions de pages entières comme une expérience de film, l'animation atteint tous les domaines de nos designs.
Pour les concepteurs qui cherchent à intégrer l’animation, de nombreuses options sont disponibles. Depuis les transitions purement décoratives qui ne font que parfaire les interfaces, en passant par les effets significatifs qui améliorent les expériences des utilisateurs, notre collection couvre des outils qui vous permettent de créer des animations à différentes échelles et à des fins différentes. Voici 75 plugins et librairies que vous souhaitez extraire; vous ne les utiliserez pas tous à chaque fois, mais chacun a un cas d'utilisation idéal, et certains que vous utiliserez encore et encore ...
1. Animate.css
Animate.css est une bibliothèque fondamentale d’animations multi-navigateurs soignées qui sous-tend de nombreuses solutions. Qu'il s'agisse de sauts et de fadings classiques, de rebondissements modernes ou d'effets uniques, il est capable de répondre aux besoins de presque tous les projets.
2. Animations magiques
Animations Magiques se concentre sur les effets exceptionnels qui donnent à une interface un zeste particulier. Bien que la bibliothèque ne puisse pas se targuer d’une immense diversité, elle suffit à enrichir l’expérience utilisateur.
3. Bounce.js
Bounce.js est une petite aire de jeux où vous pouvez mener des expériences avec des animations CSS. Ajoutez simplement un composant et réglez les paramètres pour que tout soit vivant. Et à la fin, exportez le fichier css.
4. AnijS
AnijS aide à gérer l'animation de manière intuitive en utilisant des instructions simples telles que If, On, Do, To. La bonne chose est que vous êtes invités à utiliser vos propres classes ou même Animate.css (mentionné plus haut) pour créer quelque chose de génial.
5. Snabbt.js
Snabbt.js est célèbre pour son approche minimale qui entraîne des animations rapides. Il ne pèse que 5kb; Cependant, il est capable de donner une impulsion visible à n'importe quel composant en traduisant, en faisant pivoter, en inclinant, en redimensionnant ou en redimensionnant sa forme.
6. Kute.js
Kute.js est un moteur d’animation qui offre une excellente performance. Il est rapide et compatible entre différents navigateurs grâce à un ensemble de solutions de remplacement viables qui gèrent les navigateurs existants. Il est livré avec de nombreux plugins pour fournir un environnement de travail efficace.
7. Velocity.js
Velocity.js est un moteur d'animation qui, à première vue, peut ne pas être représentatif. Cependant, son arsenal comprend tous les types d’animation tels que le morphing, la boucle, l’accélération, le défilement, etc. Il est rapide et indépendant de jQuery.
8. Peintre en lignes paresseuses
Les animations de chemin SVG sont faciles avec Lazy Line Painter . Prenez votre dessin au trait à partir d'Illustrator au format SVG et chargez-le dans le convertisseur. Ce dernier va générer un fichier jQuery qui gère le processus d'animation. Si nécessaire, vous pouvez apporter des modifications directement dans le code.
9. SVG.js
SVG.js vous offre un environnement intuitif où vous pouvez manipuler et animer des SVG. Il est petit et indépendant avec une syntaxe propre et une API unifiée. Faites ce que vous voulez: animer la taille, la couleur, la position, les chemins de texte; transformer des composants; relier des événements etc.
10. Motion UI
Contrairement aux exemples précédents, Motion UI profite de SASS pour créer des animations CSS intrigantes. Il y a toute une série de transitions et d'effets prédéfinis qui peuvent être appliqués à n'importe quel composant HTML. Tout fonctionne dans tous les navigateurs populaires, sauf pour IE9.
11. Attendez! Animer
Attendez! Animer vous permet d'opérer des retards et d'attendre dans les animations d'une manière simple. Calculez tous les intervalles de temps requis dans le petit panneau et créez une animation naturelle sans agitation.
12. Dynamics.js
Dynamics.js est une bibliothèque JavaScript qui offre 9 effets standard avec lesquels jouer. Vous pouvez spécifier la durée, la fréquence, la friction, la taille de l'anticipation et la force d'anticipation pour réaliser des animations réelles basées sur la physique.
13. Choreographer.js
Avec Choreographer.js au bout des doigts, vous ne devriez pas avoir peur d'animations complexes, car cette bibliothèque JavaScript ne ménage pas ses efforts. Bien qu'il ne soit doté que d'un nombre limité d'animations, il vous permet de travailler avec des fonctions personnalisées pour créer vos propres chefs-d'œuvre.
14. Anime.js
Livré avec un ensemble impressionnant de fonctionnalités qui permet de chaîner plusieurs animations, de synchroniser différentes instances, de tracer des lignes, de transformer des objets, de créer des animations individuelles, etc. Moteur d'animation JavaScript vous surprendra avec son potentiel.
15. Mo.js
Mo.js représente le mouvement pour le Web. Il est incroyablement rapide et à la fois intuitif et simple. Créez des parcours attrayants, des transitions de dialogue modales inattendues, des dispositions de bulles, des animations éclatantes et bien plus encore.
16. Sequence.js
Sequence.js est un framework piloté par CSS pour la création d'animations évolutives tactiles et réactives. Il est idéal pour créer des curseurs, des présentations, des bannières et d'autres types de composants dynamiques. Parmi les nombreux plans premium, vous trouverez un programme gratuit qui vous accorde une licence open source personnelle.
17. Shifty
Sournois est un moteur d'interpolation axé sur l'optimisation, les performances rapides, la flexibilité et l'extensibilité. Il est considéré comme une alternative viable à GreenSock avec une interface beaucoup plus simple.
18. C'est mardi
Mardi est une bibliothèque d'animation autonome pouvant être utilisée conjointement avec d'autres bibliothèques. Il rend les entrées et les sorties lisses, subtiles et élégantes. Il offre une variété d'effets standard tels que des fades-in, des extensions, des rétrécissements, des drop-ins, etc.
19. CSS Animate
CSS Animate est un terrain de jeu primitif qui génère un code valide et sans encombrement pour toute animation régulière. Définir le nom, la classe, les propriétés de l'animation, les propriétés du cadre; manipuler la chronologie et ajouter des marqueurs: en un mot, ajustez tout ce dont vous avez besoin pour produire une animation basée sur des images clés.
20. Vivus.js
Envoi avec trois types d'animation: retarder, synchroniser et révéler un par un, Vivus.js dessine un SVG d'une manière douce et naturelle faisant de l'émergence du composant une expérience agréable. Vous pouvez opter pour des animations prédéfinies ou utiliser vos propres fonctions personnalisées.
21. Bonsai.js
Bonsaï.js est une bibliothèque JavaScript pour les manipulations graphiques avancées. Il a un moteur de rendu API et SVG assez simple. Utilisez son éditeur en ligne pour effectuer un test, se familiariser avec la syntaxe et même télécharger des exemples pour commencer.
22. GSAP par GreenSock
GSAP est une puissante plateforme d'animation ciblée sur les animations professionnelles. Il dispose de nombreux plugins et utilitaires responsables de différents types d'animations. Il se compose de BezierPlugin, CSSPlugin, DrawSVGPlugin, MorphSVGPlugin, Physics2DPlugin, TweenLite, etc.
23. Popmotion
Popmotion est une autre alternative légère et pratique à Greensock dans notre collection. C'est un moteur de mouvement avec un contrôle total sur chaque image. Il possède une interpolation avancée, un mélange de couleurs et un ensemble de fonctions et d’actions pour créer des solutions complexes.
24. Tween.js
Beaucoup de choses incroyables sont faites avec l'aide de Tween.js . C'est un moteur d'interpolation de pointe avec de nombreux paramètres pour contrôler l'animation. C'est aussi une excellente solution pour améliorer les projets pilotés par Three.js.
25. Hover.css
Hover.css La bibliothèque peut être divisée en plusieurs catégories de base: transitions 2D, transitions d'arrière-plan, animations d'icônes, transitions de bordures, transitions d'ombres et de lueurs, bulles et boucles. Appliquez ces effets à n'importe quel élément de votre conception sans restrictions.
26. Transit
La liste des fonctionnalités de Transit est assez court mais comprend les éléments les plus importants pour la création de transformations 2D et 3D. Par exemple, vous pouvez spécifier des délais et des durées, ajouter une fonction d'accélération, utiliser des valeurs relatives, etc.
27. fusée
Fusée est une solution permettant de donner un aspect plus précis au mouvement d'un objet d'un point à un autre. Il y a 8 effets spéciaux, comme la pulsation ou la rotation, qui donnent à ce voyage un charme fou .
28. Animo.js
Animo.js est un outil relativement petit pour maîtriser les transitions et les animations. Il possède un ensemble de plug-ins supplémentaires tels que le compte à rebours, la rotation et l'animation qui enrichissent la bibliothèque et facilitent grandement l'obtention de l'effet souhaité.
29. Shift.css
Shift.css est un framework pour créer des animations dans un conteneur qui affecte à la fois les éléments imbriqués et adaptatifs. Il existe 15 types d’animations standard, dont le déplacement, la saisie, la sortie, la suppression et d’autres.
30. le CSShake
CSShake vient avec 11 classes qui forcent les éléments de votre DOM à secouer. Vous pouvez choisir la direction (horizontale ou verticale), le type (fixe, fou, constant, bloc), l'intensité (lente ou dure) ou opter pour une option par défaut.
31. Safran
Si vous préférez utiliser les mixins pour manipuler facilement et rapidement les animations et les transitions, Safran est certainement pour vous. C'est une compilation de méthodes réutilisables écrites dans Sass où vous pouvez définir des variables et des paramètres.
32. CSSynth
CSSynth est un petit éditeur où vous pouvez apprécier la beauté de la synchronisation. L'animation est basée sur une plage de carrés dont vous pouvez spécifier le nombre sur le panneau de gauche. Sélectionnez un effet, définissez le délai et choisissez si vous souhaitez télécharger le code de résultat au format CSS ou SCSS.
33. Ceaser
Ceaser est un outil ancien et éprouvé pour mener des expériences avec l'animation classique d'accélération. Il existe un certain nombre de variantes à partir de linéaires et se terminant par celles personnalisées. Deux paramètres supplémentaires (durée et effet) aideront à parfaire le résultat.
34. Morf.js
Pour prendre l’outil susmentionné un peu plus loin, vous pouvez essayer de Morf.js . Il propose des transitions basées sur des fonctions d'accélération personnalisées. Il existe près de 40 options prédéfinies que vous pouvez rapidement adapter à votre projet.
35. Voxel.css
Voxel.css a été créé spécifiquement pour les rendus 3D. Sa simple implémentation permet même aux débutants de comprendre le CSS 3D. La bibliothèque dispose de 4 classes importantes: Scene, World, Editor et Voxel qui aident à créer des jeux et à apprécier l'action.
36. Repaintless.css
Repaintless.css utilise la technique FLIP pour rendre l'animation rapide et fluide. Bien que cela nécessite des améliorations; néanmoins, c'est un début parfait pour ceux qui portent une attention particulière à la performance.
37. MixItUp
Mélanger est une bibliothèque pour embellir le filtrage, le tri, l'insertion et autres actions par défaut inhérentes aux interfaces majoritaires telles que les portefeuilles, les galeries, etc. C'est une dépendance sans faille et promet de fournir un haut niveau de performance.
38. Wallop
Comme le titre l'indique, Coup est pour montrer et cacher les choses d'une manière agréable; de manière prévisible, son utilisation générale réside dans la construction de curseurs. Cependant, personne ne vous empêche d'exploiter son potentiel et de créer quelque chose d'intéressant et de fascinant.
39. Ramjet
Jet d'air transforme un élément en un autre avec l'illusion du mouvement qui se réalise grâce à une fonction d'assouplissement. Il est capable de travailler avec des éléments DOM, des fichiers SVG, des images statiques ou des images animées.
40. jQuery DrawSVG
Basé sur un puissant moteur d'animation jQuery, il dessine efficacement tous les chemins du SVG, donnant à l'image une entrée à la fois spectaculaire et élégante. La procédure est simple: ajouter le plugin à la page, l'initialiser et lancer l'animation.
41. Animatic.js
Animatic.js est une excellente solution multi-navigateurs avec des règles de physique intégrées qui utilisent des transformations CSS, des transformations 3D et du JavaScript pour donner vie à tout. Sa tâche principale est de réduire vos efforts pour animer de nombreux objets à la fois. Vous pouvez créer des animations parallèles et séquentielles en ajustant soigneusement la durée, le délai et la fonction d'accélération.
42. Move.js
Move.js est un outil simplifié pour créer des animations régulières telles que la mise à l'échelle, l'inclinaison, le déplacement ou la traduction. Chaque animation peut être améliorée avec la fonction d'aisance classique.
43. Eg.js
Eg.js est une collection soigneusement assemblée de divers effets et éléments dynamiques visant à améliorer les interactions dans les interfaces. Il y a 8 composants puissants qui trient les tâches de base et 6 méthodes et événements principaux à d'autres fins.
44. GFX
GFX est une bibliothèque d'animation 3D convaincante pour la création d'animations CSS3 de manière programmatique. Il fonctionne avec jQuery, ce qui facilite grandement la production du résultat souhaité. Vous pouvez jouer avec la mise à l'échelle, la rotation, la traduction, l'inclinaison, etc.
45. Stylie
Bien qu'il soit dit que Stylie est un outil amusant, mais il vous impressionnera certainement par ses capacités. Le centre de contrôle comprend 4 onglets qui vous permettent d’optimiser les images clés, d’accélérer, d’exporter les options et le code HTML, ce qui simplifie les animations complexes.
46. Iconate.js
Iconate.js injecte de la vie dans les transformations des icônes, améliorant ainsi la transition entre deux éléments par un effet d'accompagnement agréable. Cela fonctionne très bien non seulement avec Font Awesome, mais aussi avec les Glyphicons et même votre propre ensemble de pictogrammes.
47. AnimateMate
AnimateMate est un petit outil pour produire et exporter des animations à petite échelle à partir de votre environnement Sketch. Ce n'est pas quelque chose de sophistiqué, mais il vous permet de jouer avec des images clés, d'ajouter des fonctions d'accélération, des séquences de contrôle et bien plus encore.
48. CAAT
CAAT (qui signifie Canvas Advanced Animation Toolkit) est un cadre exceptionnel qui forme un tandem puissant avec JavaScript. Ses outils comprennent des scènes, des technologies de multi-rendu, des masques de découpage, un ensemble standard de comportements, etc.
49. Granim.js
Granim.js est une minuscule bibliothèque JavaScript pour améliorer les interfaces avec des centres de table interactifs basés sur un dégradé. Il peut s'agir d'une animation de dégradé radial standard, de dégradés dynamiques appliqués au-dessus de la toile de fond de l'image ou de dégradés mobiles associés à des masques d'image.
50. Animista
Créé par Ana Travas, Animista est un terrain de jeu pour effectuer des expériences avec un tas d'animations CSS prédéfinies conventionnelles et peu communes. Choisissez la durée, la fonction de synchronisation, le délai, le nombre d'itérations et quelques autres options pour examiner le résultat.
51. Obnoxious.css
Obnoxious.css est livré avec 5 animations CSS uniques qui forcent les éléments de l'interface à secouer, tordre, agrandir, imiter l'effet stroboscopique ou à modifier le poids de la police. Tout ce que vous devez faire est d'appliquer la classe préférée à la div désirée.
52. Animatelo
Animatelo comprend une tonne d'effets dynamiques accrocheurs qui ont été empruntés au célèbre et puissant Animate.css, offrant un moyen plus facile de les appliquer. Grâce à l’API Web Animations polyfill, elle est supportée par tous les navigateurs modernes.
53. Porte-Fox
Porte-Fox est un paquet de 15 jolis petits effets créés spécialement pour améliorer les interactions de l'utilisateur avec le formulaire. Chaque méthode met l'accent sur le champ de saisie à sa manière: elle peut rendre les frontières plus lumineuses, ajouter des indices visuels, définir un texte en mouvement et bien plus encore.
54. Rhythm.js
Rhythm.js est tout au sujet des animations minuscules inspirées par disco. Cette bibliothèque JavaScript comprend des effets qui imitent certains mouvements de danse. Il y a près de 20 options qui ajouteront boogie-woogie à votre site Web.
55. Colorido.js
Tout comme les Granim.js, ce plugin alimenté par JavaScript a été créé pour manipuler la propriété de couleur. Il permet de modifier dynamiquement les tons et l'opacité de l'arrière-plan et du texte, ainsi que de créer des dégradés radiaux, linéaires, diagonaux et horizontaux non statiques.
56. Barba.js
Barba.js exploite PJAX (une technique basée sur ajax) pour soulager les utilisateurs de ce que l'on appelle la commutation de rafraîchissement dur entre les pages. Il cache simplement le vieux conteneur et montre le nouveau conteneur d'une manière subtile et agréable.
57. ScrollReveal.js
ScrollReveal.js est un outil populaire pour créer des animations de défilement. Grâce à sa méthode principale révéler (), vous pouvez gérer différentes animations et contrôler tous leurs aspects standard. La grande chose est que cela fonctionne bien avec les navigateurs Web et mobiles.
58. Scrollanim
Scrollanim est un outil moins sophistiqué mais plus pratique et plus simple à utiliser que l'exemple précédent. Bien qu'il favorise CSS3, il vous permet d'ajouter des animations à l'aide de l'API JavaScript pour produire des animations déclenchées par un défilement. Il dispose d'un certain nombre de solutions prédéfinies que vous pouvez rapidement présenter dans votre projet.
59. ScrollTrigger
Alors que les deux solutions précédentes se concentrent principalement sur le défilement vertical traditionnel, celui-là est pour la construction de longs sites Web horizontaux. Il vous permet de construire des interfaces dynamiques dans le plan de l’axe des x, rempli de superbes animations CSS3 en utilisant une syntaxe plutôt primitive.
60. Force.js
Force.js est une petite solution dépourvue d'énormes fonctionnalités et de richesse d'options. Cependant, il est idéal pour les tâches régulières telles que la définition d'objets en mouvements subtils ou le défilement de détails. Comme d’habitude, l’assouplissement réside dans son cœur, rendant l’animation propre et nette.
61. AOS
AOS signifie animate sur le défilement. Il fait ce qu'il dit - vous fournir un tas d'effets prédéfinis animés qui sont déclenchés par un événement de défilement. Si vous voulez donner aux sections une entrée dramatique sans creuser profondément dans le code, alors c'est certainement pour vous.
62. Rellax
Rellax est pour une belle parallaxe. Il s'agit d'une bibliothèque JavaScript légère à la vanille permettant de donner une touche subtile de dimension 3D aux interfaces.
63. Tilt.js
Tilt.js produit un effet d'inclinaison intriguant axé sur la parallaxe. Il déplacera les objets dans une position inclinée imitant la 3D dans un plan 2D de base. Vous pouvez fixer un axe pour rendre l'effet plus attrayant et intéressant, ou recréer une sorte d'éblouissement ou une sensation de flottement.
64. Transformer-quand
Transformer-quand est une excellente solution pour concevoir des expériences de storytelling avec un support natif et performant pour les appareils mobiles. Il parie sur deux paramètres essentiels: le temps et la position de défilement, ce qui rend l'aventure de l'utilisateur à travers l'interface contrôlée de manière vigilante par vos côtés. Il fonctionne avec les éléments HTML et SVG.
65. Animation CSS3
Ce est un générateur old school avec un aperçu en direct pour créer des animations CSS3 de base. Il y a un centre de contrôle standard où vous pouvez ajuster la durée de la transition, le nombre d'itérations, les fonctions de chronométrage, etc.
66. Curve.js
Curve.js insuffle la vie dans les lignes en les faisant "danser" et en tournant comme une vague. Utilisez-le pour créer des arrière-plans ou des pièces maîtresses élégants et géométriques.
67. Animator.js
Animator.js est dit flexible, efficace et léger. Il offre le moyen le plus simple de gérer les images clés et de générer des animations CSS de différentes échelles. C'est aussi sans dépendance.
68. Cel-animation
Cel-animation est un mix Sass qui vous permet de contrôler les images clés traditionnelles. Vous pouvez définir en mouvement SVG ou tout type d'éléments HTML.
69. Scrollissimo
Scrollismo a été créé pour travailler en partenariat avec Greensock en animant habilement et en douceur les objets sur le défilement des utilisateurs. Avec un plug-in JavaScript supplémentaire pour les gadgets à écran tactile, il couvre de nombreux appareils.
70. jqClouds
jqClouds est un plugin primitif qui génère et alimente un design avec des nuages en mouvement qui survolent l'interface. Vous pouvez changer le concept, en remplaçant les nuages par tout autre objet, pour donner à une interface statique une saveur dynamique particulière.
71. Animation couleur
Comme vous l'avez deviné, cet outil est pour animer le ton et la transparence de l'arrière-plan, de la bordure ou du texte. En fait, cela fonctionne avec la couleur de tout objet qui l'a comme propriété.
72. Flubber
Pour exclure les sauts soudains et les métamorphoses drastiques qui peuvent se produire lorsqu'un objet se convertit en un autre, vous pouvez utiliser Flubber . Le plugin offre des interpolations régulières entre les deux formes. Le seul inconvénient est qu'il ne fonctionne qu'avec des graphiques 2D.
73. Particles.js
Si vous êtes à l'animation de particules ludiques - un choix populaire de nos jours - vous pouvez utiliser ce générateur pratique . Il est basé sur une bibliothèque JavaScript viable qui fait tout le travail. Définissez des préférences comme la couleur, le nombre, la forme, la taille, l'opacité, etc. et exportez simplement le résultat.
74. Animation de lignes 3D avec Three.js
Ceci est un petit script qui ne possède pas toutes les capacités des plugins mentionnés ci-dessus. Néanmoins, il ajoute à votre interface un magnifique arrière-plan animé rempli d’animation de particules. Vous pouvez configurer la couleur, les lignes, l’opacité et d’autres options pour qu’elles se fondent dans votre environnement.
75. Three.js
Enfin et surtout, Three.js - une bibliothèque puissante et polyvalente qui se cache derrière de nombreux sites Web impressionnants. Il convient aux projets simples et complexes. Il vous permet de travailler avec
