Animiertes Logo mit Lottie: Der komplette Guide von Export bis Website

Ein animiertes Logo bleibt hängen. Es zeigt Detailliebe, hebt dich von statischen Konkurrenten ab und fällt beim ersten Seitenaufruf sofort auf. Das Problem: Die meisten Umsetzungen sind zu schwer, zu unflexibel oder technisch schlecht eingebunden.

Lottie löst das. Die Animation ist vektorbasiert und skaliert auf jedem Display sauber. Bei richtiger Optimierung ist sie kleiner als ein vergleichbares PNG.

Warum Lottie und nicht GIF oder Video?

• GIF: Verlustbehaftete Kompression, begrenzte Farbtiefe, keine saubere Transparenz. Dateigröße schnell im Megabyte-Bereich. Für Logo-Animationen ungeeignet.
• Video (MP4/WebM): Browser-Autoplay ist eingeschränkt, keine native Transparenz bei MP4. Aufwändig zu steuern im Headerbereich.
• Lottie (JSON): Vektorbasiert, beliebig skalierbar, transparenter Hintergrund, vollständig steuerbar per JavaScript (Play, Pause, Loop, Speed). Bei sauberem Export oft unter 5 KB.

Animation im LottieFiles-Editor erstellen

Der einfachste Weg zu einer Logo-Animation führt über LottieFiles.com. Der Editor läuft komplett im Browser, du musst nichts installieren, und er exportiert saubere Lottie-Dateien.

Das Grundprinzip: Du lädst dein Logo als SVG hoch, definierst für jede Form oder Ebene die passende Bewegung (Reveal, Skalierung, Fade-In, Pfadanimation) und justierst das Timing. Die Timeline zeigt jede Änderung direkt an, du siehst sofort, was du baust.

Im Screenshot oben siehst du den finalen Export-Dialog: Frame 114 von 140 des Logo-Reveals. Rechts listet LottieFiles alle Dateiformate samt Kompression auf.

Hinweis zu After Effects: Wer sehr komplexe Vektor-Effekte oder Morphing-Pfade nutzt, kann weiterhin mit After Effects und dem Bodymovin-Plugin arbeiten. Für über 90 % der Logo-Animationen, die ich in Projekten sehe, reicht der LottieFiles-Editor aber locker aus.

Export: Welches Format für welchen Zweck?

LottieFiles bietet beim Export vier Varianten an. Hier der konkrete Vergleich an unserem Logo:

• Lottie JSON (4 KB): Universeller Standard, maximale Kompatibilität mit allen gängigen Web-Bibliotheken.
• Optimized Lottie JSON (3,3 KB): Redundanzen automatisch entfernt, 19 % schlanker bei identischer Qualität.
• dotLottie (1,5 KB): Komprimiertes Binärformat, deutlich geringerer Datenverbrauch.
• Optimized dotLottie (1,2 KB): Extrem komprimiert, 69 % kleiner als die Standard-JSON-Datei.

Die Lottie-Datei zusätzlich optimieren

Falls du deine JSON-Datei aus einer externen Quelle oder älteren Tools erhalten hast, lohnt sich der Durchlauf im kostenlosen LottieFiles Optimizer .

Einbindung in deine Website

Next.js mit lottie-react

npm install lottie-react

import Lottie from "lottie-react";
import logoAnimation from "@/public/animations/logo.json";

export function AnimatedLogo() {
  return (
    <Lottie
      animationData={logoAnimation}
      loop={false}
      autoplay={true}
      style={{ width: 160, height: 48 }}
    />
  );
}

Wichtig für Server-Side Rendering (SSR): Lottie greift auf Browser-APIs wie window zu. Binde die Komponente in Next.js deshalb clientseitig oder dynamisch ein:

import dynamic from "next/dynamic";

const AnimatedLogo = dynamic(
  () => import("@/components/AnimatedLogo"),
  { ssr: false }
);

Praxis-Einsatz: Logo-Animation im Preloader (Dark- & Light-Mode)

Der häufigste Einsatzort für animierte Lottie-Logos ist der Preloader beim Erstbesuch. Die Animation überbrückt die Zeit, bis Schriften und Haupt-Assets geladen sind, und sorgt dafür, dass der erste Eindruck nicht leer bleibt.

Da wir auf cj-media.eu ein adaptives Theme-System nutzen, wird die Lottie-Animation passend zum eingestellten Farbmodus geladen:

Performance-Checkliste vor dem Go-Live

• ✓ Lottie-Datei komprimiert (unter 30 KB, idealerweise unter 10 KB)
• ✓ loop={false} für Logos im Headerbereich gesetzt
• ✓ Client-seitiges Rendering (SSR-safe via Dynamic Import)
• ✓ SVG-Renderer für randscharfe Vektordarstellung gewählt
• ✓ prefers-reduced-motion für Barrierefreiheit berücksichtigt
• ✓ Preloader nur bei echtem Erstbesuch (z. B. via Session-Storage) triggern