Logo animé : des façons simples de donner vie à un logo

Un logo animé est votre logo avec un seul mouvement bref et voulu : il se révèle, dessine ses propres traits, s’assemble à partir de ses éléments, change de couleur ou respire doucement en boucle. Les meilleurs sont brefs, en général une à trois secondes pour une intro, et finissent toujours sur le logo exact que les gens connaissent déjà. Pensez à un logo qui arrive, pas à un logo qui se produit sur scène.

Cinq façons d’animer un logo

Presque toute bonne animation de logo est l’une de cinq techniques, parfois deux combinées. Choisissez celle qui convient à la forme de votre logo et au caractère de la marque.

Les règles qui gardent une animation de logo de bon goût

Une animation de logo est répétée de nombreuses fois : au début de chaque vidéo, à chaque chargement de page, à chaque événement. Tout ce qui est astucieux s’use vite. C’est la retenue qui permet d’y prendre plaisir la centième fois. Les principes du motion design détaillent le raisonnement.

Accordez le mouvement à la marque comme vous accordez les couleurs et la typo. Le logo d’un cabinet d’avocats pourrait apparaître en fondu sur une seconde avec une douce accélération. Celui d’un festival de musique peut s’enclencher avec un léger dépassement. La personnalité de marque aide à nommer d’abord le caractère, et l’accélération et décélération le traduit en courbes.

Créer une animation de logo en tracé avec SVG

L’effet de tracé repose sur une astuce SVG. Un contour peut être dessiné en tirets, et si un tiret est aussi long que tout le chemin, on peut le faire glisser dans la vue en animant son décalage. Régler pathLength="1" sur le chemin simplifie le calcul : le chemin compte pour une unité de long, quelle que soit sa vraie longueur.

<svg viewBox="0 0 120 120" width="120" height="120" role="img" aria-label="Northlight">
  <path class="draw" d="M20 100 L20 20 L100 100 L100 20" pathLength="1"
        fill="none" stroke="#1e1b4b" stroke-width="10"
        stroke-linecap="round" stroke-linejoin="round" />
</svg>

.draw {
  stroke-dasharray: 1;
  stroke-dashoffset: 1; /* hidden: the dash starts one full length away */
  animation: draw 1.2s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

@keyframes draw {
  to { stroke-dashoffset: 0; } /* drawn */
}

@media (prefers-reduced-motion: reduce) {
  .draw { animation: none; stroke-dashoffset: 0; }
}

Animer un logo en dégradé

Les logos en dégradé ont un mouvement intégré : laissez la couleur voyager. Un lent glissement du dégradé à travers un logotype ou une icône se lit comme de la lumière qui passe sur la surface, et il garde la forme parfaitement immobile, ce qui ménage la lisibilité. L’astuce d’une boucle nette est un dégradé qui finit sur la couleur par laquelle il commence, pour que la répétition n’ait pas de raccord.

.wordmark {
  background: linear-gradient(90deg, #6d28d9 0%, #db2777 50%, #6d28d9 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 6s linear infinite;
}

@keyframes shimmer {
  to { background-position: 200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .wordmark { animation: none; }
}

Le texte en dégradé a ses propres règles de lisibilité ; voyez le texte en dégradé en CSS. Et assurez-vous que le logo existe aussi en une seule couleur unie, comme l’expliquent les logos en dégradé.

Quelle durée pour un logo animé

• Intros et outros vidéo : environ une à trois secondes, puis tenir un instant le logo terminé.
• En-tête de site web : une seule lecture, rapide, à la première visite ; jamais à chaque changement de page.
• États de chargement : une boucle de veille lente qui n’a pas l’air impatient.
• Écrans de scène et diffusions : une boucle très lente, car elle peut rester à l’écran pendant des heures.

Dans quel format exporter un logo animé

Pour en savoir plus sur les boucles et les types de fichiers, voyez GIF ou MP4. Et quel que soit l’export, associez-le à un arrière-plan qui lui convient : un logo animé sur un champ fixe et calme se lit mieux que sur une séquence chargée. Placer un logo sur un dégradé traite du contraste et du placement.