Logotipos animados: formas sencillas de dar vida a un logo

Un logotipo animado es tu logo con un movimiento breve y con propósito: aparece, dibuja sus propias líneas, se ensambla a partir de sus piezas, cambia de color o respira con suavidad en bucle. Los mejores son breves, normalmente de uno a tres segundos para una intro, y siempre terminan en el logotipo exacto que la gente ya conoce. Piensa en ello como el logo que llega, no que actúa.

Cinco formas de animar un logotipo

Casi toda buena animación de logotipo es una de cinco técnicas, a veces dos combinadas. Elige la que encaje con la forma de tu logo y el carácter de la marca.

Reglas que mantienen de buen gusto una animación de logotipo

Una animación de logotipo se repite muchas veces: al principio de cada vídeo, en cada carga de página, en cada evento. Todo lo ingenioso se desgasta rápido. La contención es lo que permite disfrutarla la centésima vez. Los principios del diseño de movimiento tratan el razonamiento con más profundidad.

Adapta el movimiento a la marca igual que adaptas los colores y la tipografía. El logo de un bufete podría aparecer con un fundido de un segundo y una suavización tenue. El de un festival de música puede encajar de golpe en su sitio con un pequeño rebote. La personalidad de marca te ayuda a nombrar antes el carácter, y la suavización del movimiento lo convierte en curvas.

Cómo hacer una animación de logotipo con trazado en SVG

El efecto de trazado usa un truco ingenioso de SVG. Un trazo puede dibujarse como guiones, y si un guion es tan largo como todo el trazado, puedes deslizarlo hasta hacerlo visible animando su desplazamiento. Poner pathLength="1" en el trazado simplifica las cuentas: el trazado cuenta como una unidad de largo, sea cual sea su longitud 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; }
}

Animar un logotipo con degradado

Los logotipos con degradado llevan un movimiento incorporado: deja que el color viaje. Un cambio lento del degradado por un logotipo tipográfico o un icono se lee como luz que cruza la superficie, y mantiene la forma completamente quieta, lo que favorece la legibilidad. El truco para un bucle limpio es un degradado que termine en el color con el que empieza, para que la repetición no tenga costura.

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

El texto con degradado tiene sus propias reglas de legibilidad; mira el texto con degradado en CSS. Y asegúrate de que el logo exista también en un solo color plano, como explican los logotipos con degradado.

Cuánto debe durar un logotipo animado

• Intros y cierres de vídeo: de uno a tres segundos, y luego mantén el logo terminado un momento.
• Cabecera de una web: se reproduce una vez, rápido, en la primera visita; nunca en cada cambio de página.
• Estados de carga: un bucle lento en reposo que no parezca impaciente.
• Pantallas de escenario y directos: un bucle muy lento, porque puede estar en pantalla durante horas.

En qué formato exportar un logotipo animado

Para saber más sobre bucles y tipos de archivo, mira GIF o MP4. Y exportes lo que exportes, combínalo con un fondo que le siente bien: un logotipo animado sobre un campo quieto y sereno se lee mejor que sobre un metraje recargado. Poner un logotipo sobre un degradado cubre el contraste y la colocación.