Animerte logoer: enkle måter å gi en logo liv

En animert logo er logoen din med én kort, målrettet bevegelse: den avsløres, tegner sine egne linjer, settes sammen av delene sine, skifter farge eller puster mildt i en loop. De beste er korte, som regel ett til tre sekunder til en intro, og de ender alltid på den eksakte logoen folk allerede kjenner. Tenk på det som at logoen ankommer, ikke opptrer.

Fem måter å animere en logo på

Nesten alle gode logoanimasjoner er én av fem teknikker, av og til to kombinert. Velg den som passer formen på logoen og karakteren til merkevaren.

Regler som holder en logoanimasjon smakfull

En logoanimasjon gjentas mange ganger: i starten av hver video, ved hver sidelasting, på hvert arrangement. Alt som er smart, slites raskt ut. Måtehold er det som lar folk glede seg over den for hundrede gang. Prinsipper for bevegelsesdesign tar for seg resonnementet i dybden.

Tilpass bevegelsen til merkevaren på samme måte som du tilpasser farger og typografi. Logoen til et advokatfirma kan tones inn over ett sekund med en myk ease. En musikkfestivals logo kan smekke på plass med litt overskyting. Merkevarepersonlighet hjelper deg å navngi karakteren først, og easing gjør den om til kurver.

Slik lager du en logoanimasjon med tegning i SVG

Tegneeffekten bruker et pent triks i SVG. En strek kan tegnes som streker og mellomrom, og hvis én strek er like lang som hele banen, kan du skyve den inn i bildet ved å animere forskyvningen. Å sette pathLength="1" på banen gjør regnestykket enkelt: banen regnes som én enhet lang, uansett hvor lang den egentlig er.

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

Å animere en gradientlogo

Gradientlogoer har en bevegelse innebygd: la fargen vandre. Et langsomt skifte av gradienten gjennom et ordmerke eller et ikon virker som lys som beveger seg over overflaten, og det holder formen helt stille, noe som er skånsomt for lesbarheten. Trikset til en ren loop er en gradient som ender på fargen den starter med, så gjentakelsen ikke har noen søm.

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

Gradienttekst har sine egne regler for lesbarhet. Se gradienttekst i CSS. Og sørg for at logoen også finnes i én flat farge, slik gradientlogoer forklarer.

Hvor lang en animert logo bør være

• Videointroer og -outroer: omtrent ett til tre sekunder, og hold så den ferdige logoen et øyeblikk.
• Nettsidens topp: spill den én gang, raskt, ved første besøk, aldri ved hvert sidebytte.
• Innlastingstilstander: en langsom tomgangsloop som ikke ser utålmodig ut.
• Sceneskjermer og direktesendinger: en veldig langsom loop, siden den kan stå på skjermen i timevis.

Hvilket format du eksporterer en animert logo i

For mer om looper og filtyper, se GIF mot MP4. Og uansett hva du eksporterer, kombiner det med en bakgrunn som passer: en animert logo over en rolig, stille flate leser bedre enn over travelt opptak. Å legge en logo på en gradient tar for seg kontrast og plassering.