Geanimeerd logo: zo breng je een logo simpel tot leven

Een geanimeerd logo is je logo met één korte, doelgerichte beweging: het onthult zichzelf, tekent zijn eigen lijnen, zet zich in elkaar uit zijn delen, verandert van kleur of ademt zacht in een loop. De beste zijn kort, meestal een tot drie seconden voor een intro, en eindigen altijd op het exacte logo dat mensen al kennen. Zie het als het logo dat arriveert, niet dat optreedt.

Vijf manieren om een logo te animeren

Bijna elke goede logo-animatie is een van vijf technieken, soms twee gecombineerd. Kies degene die past bij de vorm van je logo en het karakter van het merk.

Regels die een logo-animatie smaakvol houden

Een logo-animatie wordt vaak herhaald: aan het begin van elke video, bij elke paginalading, op elk evenement. Alles wat slim is raakt snel versleten. Terughoudendheid zorgt dat mensen er de honderdste keer nog van kunnen genieten. Principes van bewegingsontwerp behandelt de redenering uitgebreider.

Stem de beweging op het merk af zoals je kleuren en typografie afstemt. Het logo van een advocatenkantoor kan in een seconde infaden met een zachte easing. Dat van een muziekfestival kan op zijn plek klappen met een beetje doorschieten. Merkpersoonlijkheid helpt je eerst het karakter te benoemen, en easing zet het om in curves.

Zo maak je een intekenende logo-animatie in SVG

Het intekeneffect gebruikt een handige truc in SVG. Een lijn kan als streepjes worden getekend, en als één streepje even lang is als het hele pad, kun je het in beeld schuiven door de offset te animeren. Als je pathLength="1" op het pad zet, wordt de rekensom eenvoudig: het pad telt als één eenheid lang, hoe lang het echt is.

<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; }
}

Een kleurverloop-logo animeren

Kleurverloop-logo’s hebben beweging ingebouwd: laat de kleur reizen. Een langzame verschuiving van het kleurverloop door een woordmerk of icoon leest als licht dat over het oppervlak beweegt, en het houdt de vorm volledig stil, wat goed is voor de leesbaarheid. De truc voor een schone loop is een kleurverloop dat eindigt op de kleur waarmee het begint, zodat de herhaling geen naad heeft.

.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; }
}

Kleurverlooptekst heeft eigen regels voor leesbaarheid; zie kleurverlooptekst in CSS. En zorg dat het logo ook in één egale kleur bestaat, zoals kleurverloop-logo’s uitlegt.

Hoe lang een geanimeerd logo moet duren

• Video-intro’s en -outro’s: ongeveer een tot drie seconden, en houd het afgewerkte logo dan even vast.
• Websiteheader: eenmalig en snel afspelen bij het eerste bezoek; nooit bij elke paginawissel.
• Laadstatussen: een langzame rustlus die niet ongeduldig oogt.
• Podiumschermen en streams: een zeer langzame loop, want hij kan uren in beeld zijn.

In welk formaat je een geanimeerd logo exporteert

Voor meer over loops en bestandstypen, zie GIF versus MP4. En wat je ook exporteert, combineer het met een achtergrond die erbij past: een geanimeerd logo over een stil, rustig vlak leest beter dan over druk beeldmateriaal. Een logo op een kleurverloop plaatsen behandelt contrast en plaatsing.