30 superbes animations SVG pour votre inspiration

Les concepteurs avaient l'habitude de créer des animations dans des éléments HTML à l'aide de CSS. Cependant, en raison des limitations des éléments HTML lors de la création de modèles, de formes et autres, ils se tournent naturellement vers le SVG, qui offre des fonctionnalités plus intéressantes..

En travaillant avec SVG, nous bénéficions d’un bon supprot de navigateur pour l’animation SVG et nous avons plus de moyens de créer de nouvelles animations. Vous pouvez utiliser à la fois la fonctionnalité d'animation SVG intégrée ou l'animation CSS3 (notez que CSS ne peut pas tout faire, donc JavaScript est toujours nécessaire). Vous pouvez également utiliser des moteurs JavaScript tels que GSAP ou Snap. JS est une bonne pratique pour créer une animation.

Ici, j'ai compilé des SVG animés étonnants. Certains utilisent l'animation SVG, d'autres utilisent la transformation CSS pour l'animation de base et le reste utilise l'aide de JavaScript..

Animation à la frontière par Sean McCaffery

Fait uniquement avec CSS, une bordure se forme doucement autour du texte, lorsque vous passez la souris sur la “FLOTTER” instruction.

Elastic SVG Sidebar de Nikolay Talanov

La barre latérale devient élastique lorsque vous essayez de l'éloigner du côté. Un joli concept appliqué sur une barre latérale d'application inspirée par Material Design.

Tirez pour rafraîchir par Nikolay Talanov

La plupart des pages vous permettent de “tirer vers le bas” sur la page à rafraîchir. Avec cette animation, quand vous “Libération” la page, l’icône Envoyer se transforme en icône de plan et est relâchée dans les airs.

Gradient animé sur un texte de Patrick Young

Voici un dégradé de texte en mouvement subtil mais difficile à oublier que les amateurs de typographie adoreront.

Animation de coeur par Nikolay Talanov

Cette animation montre comment une icône en forme de cœur se compose de deux cercles et d’un carré. La transformation est faite avec une animation CSS.

Let's Travel de jjperezaguinaga

Une animation illustrant des villes et des destinations touristiques populaires dans le monde. Les mouvements et transformations sont créés en utilisant une animation CSS.

Menu bascule animation par Tamino Martinius

Une animation de morphing de l'icône de hamburger se transformant en une icône en croix. Voir à quel point la transition est lisse entre les deux objets.

Infographie Animée par Sdras

Une superbe animation de Sarah Drasner, optimisée par la chronologie GSAP. C'est une infographie qui prend vie, faite d'animation. Utilisez le curseur pour accéder aux cadres de n'importe quel point.

Rain-Bros n'aime pas JS par cihadturhan

Une animation en boucle unique et amusante illustrant la promenade des personnages. Le mouvement des objets dans cette démo est une combinaison d'animation SVG et CSS3. Les jambes utilisent l'animation SVG alors que d'autres parties utilisent l'animation CSS3.

Horloge par Mohamad Mohebifar

Regardez le mouvement en douceur de l'aiguille des secondes dans cette horloge indiquant l'heure actuelle. L'animation est entièrement réalisée à l'aide de la fonctionnalité d'animation SVG..

Rainbow Rocket Man de Chris Gannon

Un astronaute filant dans l'espace avec son jet pack à propulsion arc-en-ciel (?). Belle animation réalisée avec le plugin GSAP Tweenmax.

Icône animée par Luigi De Rosa

Cependant, ces icônes animées SVG permettent de vérifier ce qu’elles peuvent faire. Le créateur a fait cela en utilisant GSAP.

Espace de travail plat de Hoàng Nhật

L'animation illustre un espace de travail dans un style plat. Le créateur a utilisé GSAP pour créer cette superbe animation d’un poste de travail.

L'icône animée cliquable de Hamish Williams

Cette animation sympa utilise la bibliothèque snap.svg. Cliquez pour voir le courrier étant “envoyé”.

Plongée par Chris Gannon

Avez-vous déjà sauté des pierres à la surface d'un lac? Voici une simple animation de chemin SVG illustrant cela mais sans pierres ni lac.

Motion pour le web par LegoMushroom

Il y a de l'animation, une belle mélodie, une entrée super cool pour le texte, pourquoi ne pas aimer? Ceci est construit avec mo.js, une bibliothèque JavaScript graphique de mouvement.

Police d'écriture animée par Lee Porter

En plus d'utiliser SVG pour faire de l'animation de tracé une forme, vous pouvez également l'utiliser sur une typographie similaire à celle créée par ce créateur. L'effet de flou le rend plus impressionnant.

Menu Gooey de Lucas Bebber

Amusez-vous avec l'effet gluant de cette conception réalisée à l'aide d'un filtre SVG et en ajoutant une animation CSS. Le résultat est réaliste et vraiment cool, et vous pouvez jouer avec quatre versions différentes.

Nouveau gâteau de Marco Barría

Comment faire un gâteau d'anniversaire en couches avec animation SVG et CSS.

Merci par Rachel Smith

Il suffit de voir cette animation géniale d’une simple note de remerciement. Il est créé à l'aide de la bibliothèque SVG et GSAP TweenMax.

CSS vs SVG par Mario Sanchez Maselli

Regardons maintenant la comparaison entre l'animation CSS et SVG, voyez-vous la différence??

Chien marche par Mark Nelson

Une autre façon d’animer SVG consiste à utiliser des images sprites, comme ce créateur l’a fait..

Chargeur Sablier de Leela

Un travail de création réalisé à l'aide d'animation SVG pure (SMIL); pas de CSS ni de JS pour animer les choses ici.

Animation de logo par Adem ilter

Voici une belle introduction au logo animé utilisant l'animation SVG en ligne. Pas de CSS ou JS a été utilisé pour tout faire fonctionner.

Animation des statistiques par Jonas Badalic

Un beau graphique de statistiques avec animation SVG optimisé par la bibliothèque Snap.SVG.

Ouroboros par Noel Delgado

Un chemin d'animation SVG incroyable. Tout d'abord, le créateur a tracé un chemin sur SVG, avant d'utiliser tween.js pour ajouter une animation..

Effets créatifs gluants de Lucas Bebber

Voici sept utilisations créatives du filtre SVG pour créer un effet gluant. Le visualiseur de musique est mon préféré, l'animation est très jolie.

Jeter la vache par Sarah Drasner

Celui-ci est une animation SVG optimisée par TweenMax mais faite juste pour le plaisir. Tenez et faites glisser la vache autour de la planète. Il va tourner en "orbite".

Logo animé par Ali

L'animation pourrait être un bon ajout au logo de la bière bouillonnante. Les jolies petites bulles flottantes sont construites uniquement avec la syntaxe d'animation native SVG.