Animeret logo: enkle måder at give et logo liv

Et animeret logo er dit logo med én kort, målrettet bevægelse: det toner frem, tegner sine egne linjer, samles af sine dele, skifter farve eller trækker blidt vejret i en løkke. De bedste er korte, som regel et til tre sekunder til et intro, og de ender altid på det præcise logo, folk allerede kender. Tænk på det som logoet, der ankommer, ikke som logoet, der optræder.

Fem måder at animere et logo på

Næsten alle gode logoanimationer er én af fem teknikker, somme tider to kombineret. Vælg den, der passer til dit logos form og brandets karakter.

Regler, der holder en logoanimation smagfuld

En logoanimation gentages mange gange: i starten af hver video, ved hver sideindlæsning, til hvert event. Alt for snedigt bliver hurtigt slidt. Det er tilbageholdenhed, der gør, at folk kan nyde den for hundrede gang. Principper for motion design gennemgår begrundelsen mere indgående.

Tilpas bevægelsen til brandet på samme måde, som du tilpasser farver og skrift. Et advokatfirmas logo kan tone frem over et sekund med en blød easing. En musikfestivals kan snappe på plads med lidt overshoot. Brandpersonlighed hjælper dig med først at sætte ord på karakteren, og easing gør den til kurver.

Sådan laver du en optegnet logoanimation i SVG

Optegningseffekten bruger et snedigt trick i SVG. En streg kan tegnes som streger med mellemrum, og hvis én streg er lige så lang som hele stien, kan du glide den ind i billedet ved at animere dens forskydning. Sætter du pathLength="1" på stien, bliver regnestykket enkelt: stien tæller som én enhed lang, uanset dens rigtige længde.

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

Sådan animerer du et gradientlogo

Gradientlogoer har en bevægelse indbygget: lad farven vandre. Et langsomt skift af gradienten gennem et ordmærke eller ikon virker som lys, der glider hen over overfladen, og det holder formen helt stille, hvilket er godt for læsbarheden. Tricket til en ren løkke er en gradient, der slutter på den farve, den starter med, så gentagelsen ikke har nogen sammensyning.

.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 læsbarhed; se gradienttekst i CSS. Og sørg for, at logoet også findes i én flad farve, som gradientlogoer forklarer.

Hvor langt et animeret logo bør være

• Videoens intro og outro: cirka et til tre sekunder, og hold så det færdige logo et øjeblik.
• Websitets header: afspil én gang, hurtigt, ved første besøg; aldrig ved hvert sideskift.
• Indlæsningsskærme: en langsom hviløkke, der ikke ser utålmodig ud.
• Scenens skærme og streams: en meget langsom løkke, da den kan være på skærmen i timevis.

Hvilket format du skal eksportere et animeret logo i

Mere om løkker og filtyper finder du i GIF eller MP4. Og uanset hvad du eksporterer, så par det med en baggrund, der passer til det: et animeret logo over et stille, roligt felt læses bedre end et over urolige optagelser. Sådan lægger du et logo på en gradient handler om kontrast og placering.