Animerad logotyp: enkla sätt att väcka en logga till liv

En animerad logotyp är din logga med en enda kort, genomtänkt rörelse: den avslöjar sig själv, ritar sina egna linjer, sätts ihop av sina delar, skiftar färg eller andas mjukt i en loop. De bästa är korta, oftast en till tre sekunder för ett intro, och de slutar alltid på exakt den logga folk redan känner igen. Tänk på det som att loggan anländer, inte uppträder.

Fem sätt att animera en logga

Nästan varje bra logoanimation är en av fem tekniker, ibland två i kombination. Välj den som passar din loggas form och varumärkets karaktär.

Regler som håller en logoanimation smakfull

En logoanimation upprepas många gånger: i början av varje video, vid varje sidladdning, vid varje event. Allt som är lite för fyndigt blir snabbt tröttsamt. Återhållsamheten gör att folk kan njuta av den för hundrade gången. Principer för motion design går djupare in på resonemanget.

Anpassa rörelsen efter varumärket på samma sätt som du anpassar färger och typsnitt. En advokatbyrås logga kan tona in under en sekund med en mjuk acceleration. En musikfestivals kan snappa på plats med lite överskjut. Varumärkets personlighet hjälper dig att sätta ord på karaktären först, och easing förvandlar den till kurvor.

Så gör du en logoanimation som ritas fram i SVG

Effekten där loggan ritas fram bygger på ett smart knep i SVG. Ett streck kan ritas som streckade segment, och om ett segment är lika långt som hela banan kan du glida in det i bild genom att animera dess förskjutning. Sätter du pathLength="1" på banan blir matematiken enkel: banan räknas som en enhet lång, oavsett hur lång den egentligen är.

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

Att animera en gradientlogotyp

Gradientloggor har en rörelse inbyggd: låt färgen vandra. Ett långsamt skifte av gradienten genom ett ordmärke eller en ikon upplevs som ljus som rör sig över ytan, och formen står helt stilla, vilket är skonsamt för läsbarheten. Knepet för en ren loop är en gradient som slutar på den färg den börjar med, så att upprepningen inte får någon 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; }
}

Gradienttext har sina egna regler för läsbarhet, se gradienttext i CSS. Och se till att loggan också finns i en enda platt färg, som gradientloggor förklarar.

Hur lång en animerad logotyp ska vara

• Videointron och outron: ungefär en till tre sekunder, och håll sedan den färdiga loggan kvar en stund.
• Webbplatsens sidhuvud: spela en gång, snabbt, vid första besöket, aldrig vid varje sidbyte.
• Laddningslägen: ett långsamt viloloop som inte ser otåligt ut.
• Scenskärmar och sändningar: en mycket långsam loop, eftersom det kan vara i bild i timmar.

Vilket format du exporterar en animerad logotyp i

Mer om loopar och filtyper finns i GIF eller MP4. Och vad du än exporterar, para ihop den med en bakgrund som passar: en animerad logotyp över ett stilla, lugnt fält syns bättre än över rörigt material. Att lägga en logotyp på en gradient tar upp kontrast och placering.