SVG Logo Animation mit GreenSock (GSAP) – Schritt-für-Schritt Anleitung

Was wollen wir erreichen?

Die nachstehende Animation zeigt unser pixelparker Brand Logo – und genau diese Bewegung wollen wir in unserem eigenen Projekt umsetzen.

Mit ein paar Zeilen Code erstellen wir eine flüssige SVG-Animation, bei der die Buchstaben, der Kopf und die Brille nacheinander eingeblendet werden.

Schritt 1 – Frameworks installieren

Wir nutzen GreenSock (GSAP) als Framework, um die SVG-Elemente zu animieren. Die Installation erfolgt bequem per npm:

npm i gsap

Danach binden Sie die benötigten Dateien in Ihr Projekt ein. In der Regel genügen Timeline und Tween. Die Max-Version wird nur benötigt, wenn Sie zusätzliche Komponenten einsetzen.

Eine ausführliche Dokumentation zur Nutzung über npm finden Sie auf der offiziellen GreenSock Webseite.

Schritt 2 – SVG in HTML integrieren

Kopieren Sie den SVG-Code direkt in Ihre HTML-Datei. So können Sie einzelne Elemente gezielt mit CSS-Klassen versehen und über GSAP ansteuern. Beispiel:

<svg viewBox="0 0 500 200">
  <g>
    <path class="head" d="..." />
    <path class="glasses" d="..." />
    <rect class="letter" x="..." y="..." />
    <rect class="letter" x="..." y="..." />
  </g>
</svg>

Wichtig: Verwenden Sie eindeutige Klassennamen (head, glasses, letter), um später gezielt animieren zu können.

Schritt 3 – JavaScript vorbereiten

Im nächsten Schritt holen wir uns die SVG-Elemente per JavaScript und speichern sie in Variablen:

let head = document.getElementsByClassName("head");
let glasses = document.getElementsByClassName("glasses");
let letters = document.getElementsByClassName("letter");

Nun erstellen wir eine neue Timeline, um mehrere Animationen hintereinander zu steuern:

let tlLetters = new TimelineMax();

Als Erstes setzen wir die Startwerte der Elemente – beispielsweise die Opazität:

tlLetters.set(letters, { opacity: 0 });

Schritt 4 – Animation mit Stagger-Effekt

Jetzt definieren wir die Animation für die Buchstaben. Die Funktion staggerFromTo() ermöglicht es uns, alle Elemente der NodeList (in diesem Fall letters) mit einem leichten Versatz nacheinander zu animieren:

tlLetters.staggerFromTo(
  letters,
  0.15,               // Dauer der Animation
  {
    transformOrigin: "50% 50%",
    scale: 1.25,
    opacity: 0
  },
  {
    scale: 1,
    opacity: 1
  },
  0.2                 // Zeitversatz zwischen den Animationen
);

Mit transformOrigin stellen wir sicher, dass die Skalierung aus der Mitte erfolgt – so bleibt die Animation visuell ausgeglichen.

Schritt 5 – Kopf und Brille animieren

Für den Kopf und die Brille definieren wir eine separate Timeline und fügen eine Verzögerung hinzu:

let tlHead = new TimelineMax();

tlHead.set(head, { opacity: 0, scale: 1.3 });
tlHead.set(glasses, { opacity: 0, scale: 1.3 });

tlHead.delay(1.5);

tlHead.to(head, 0.5, { opacity: 1, scale: 1 });
tlHead.to(glasses, 0.5, { opacity: 1, scale: 1 });

Die Methode delay() sorgt dafür, dass Kopf und Brille erst starten, wenn die Buchstabenanimation abgeschlossen ist. Das ergibt einen harmonischen, professionellen Effekt.

Schritt 6 – Kompatibilität und ES5

Damit Ihre Animation auf allen Browsern läuft, empfiehlt es sich, den Code nach ES5 zu parsen (z. B. über Babel). Das erhöht die Kompatibilität insbesondere bei älteren Browsern.

Kompletter Code auf einen Blick

// Elemente abrufen
let head = document.getElementsByClassName("head");
let glasses = document.getElementsByClassName("glasses");
let letters = document.getElementsByClassName("letter");

// Timeline für Buchstaben
let tlLetters = new TimelineMax();
tlLetters.set(letters, { opacity: 0 });
tlLetters.staggerFromTo(
  letters, 0.15,
  { transformOrigin: "50% 50%", scale: 1.25, opacity: 0 },
  { scale: 1, opacity: 1 },
  0.2
);

// Timeline für Kopf & Brille
let tlHead = new TimelineMax();
tlHead.set(head, { opacity: 0, scale: 1.3 });
tlHead.set(glasses, { opacity: 0, scale: 1.3 });
tlHead.delay(1.5);
tlHead.to(head, 0.5, { opacity: 1, scale: 1 });
tlHead.to(glasses, 0.5, { opacity: 1, scale: 1 });

Fazit

Mit nur wenigen Zeilen JavaScript und der GreenSock Library können Sie komplexe SVG-Animationen leicht umsetzen. Die Kombination aus TimelineMax, Tween und staggerFromTo() ermöglicht fließende Übergänge, die auch bei komplexeren Logos beeindruckend wirken.

Ein besonderer Vorteil von GSAP: Die Performance bleibt selbst bei mehreren parallelen Animationen stabil – perfekt für interaktive Webseiten und Brand-Motion-Projekte.

FAQs zur SVG Logo Animation

Was ist GSAP?

GSAP steht für GreenSock Animation Platform – eine leistungsstarke JS-Bibliothek für performante Webanimationen, ideal für SVG, Canvas und DOM-Elemente.

Brauche ich für GSAP jQuery?

Nein. GSAP ist vollständig unabhängig von jQuery und kann direkt mit reinem JavaScript verwendet werden.

Ist GSAP kostenlos?

Ja, der Kern von GSAP ist kostenlos und Open Source. Nur spezielle Plugins wie MorphSVG oder SplitText benötigen eine Club-Mitgliedschaft.

Wie kann ich die Animation beim Scrollen starten?

Verwenden Sie das Plugin ScrollTrigger von GreenSock, um Animationen beim Erreichen bestimmter Scrollpunkte auszulösen.

Kann ich GSAP auch mit React oder Vue nutzen?

Ja – GSAP lässt sich problemlos in moderne Frameworks integrieren. Die Nutzung erfolgt meist über Hooks oder Lifecycle-Methoden.