Logos animados: formas simples de dar vida a um logo

Um logo animado é o seu logo com um movimento curto e intencional: ele se revela, desenha as próprias linhas, se monta a partir das suas partes, muda de cor ou respira suavemente em loop. Os melhores são breves, em geral de um a três segundos numa abertura, e sempre terminam exatamente no logo que as pessoas já conhecem. Pense nele como o logo chegando, e não se apresentando.

Cinco formas de animar um logo

Quase toda boa animação de logo é uma de cinco técnicas, às vezes duas combinadas. Escolha a que combina com a forma do seu logo e com o caráter da marca.

Regras que mantêm uma animação de logo de bom gosto

Uma animação de logo se repete muitas vezes: no início de cada vídeo, a cada carregamento de página, em cada evento. Qualquer coisa esperta cansa rápido. A contenção é o que permite às pessoas gostar dela pela centésima vez. Os princípios de motion design explicam o raciocínio com mais profundidade.

Combine o movimento com a marca do mesmo jeito que combina cores e tipografia. O logo de um escritório de advocacia pode surgir num fade de um segundo com uma suavização leve. O de um festival de música pode entrar num estalo, com um pequeno exagero. A personalidade da marca ajuda a nomear primeiro o caráter, e a suavização (easing) o transforma em curvas.

Como fazer uma animação de logo com traçado em SVG

O efeito de traçado usa um truque bacana do SVG. Um traço pode ser desenhado como pontilhado, e se um segmento tem o comprimento do caminho inteiro, você pode fazê-lo entrar deslizando ao animar o deslocamento. Definir pathLength="1" no caminho simplifica as contas: o caminho conta como uma unidade de comprimento, seja qual for o comprimento real.

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

Animando um logo com gradiente

Logos com gradiente já têm um movimento embutido: deixe a cor viajar. Um deslocamento lento do gradiente por um logotipo ou ícone parece luz passando pela superfície, e mantém a forma totalmente parada, o que ajuda a legibilidade. O segredo de um loop limpo é um gradiente que termina na cor em que começa, para que a repetição não tenha emenda.

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

Texto com gradiente tem regras próprias de legibilidade; veja texto com gradiente em CSS. E garanta que o logo também exista numa cor chapada só, como explicam os logos com gradiente.

Quanto tempo um logo animado deve durar

• Aberturas e encerramentos de vídeo: cerca de um a três segundos, e depois segure o logo pronto por um instante.
• Cabeçalho de site: toque uma vez, rápido, na primeira visita; nunca a cada mudança de página.
• Telas de carregamento: um loop contínuo lento, que não pareça impaciente.
• Telas de palco e transmissões: um loop bem lento, já que pode ficar horas na tela.

Em que formato exportar um logo animado

Para saber mais sobre loops e tipos de arquivo, veja GIF ou MP4. E, seja o que for que você exportar, combine com um fundo que combine: um logo animado sobre um campo calmo e parado se lê melhor do que sobre uma filmagem carregada. Colocar um logo sobre um gradiente trata de contraste e posicionamento.