SVG Logo Animation
SVG Logo Animation
Was wollen wir machen?
Die nachstehende Animation bildet unser Logo ab und das wollen wir nun ganz simple animieren.
Zuerst benötigen wir die notwendigen Frameworks:
Install GreenSock:
npm i gsap
Die Files ins Projekt einbinden. Es ist nicht immer notwendig die Max Version zu integrieren - das hängt von den Verwendeten Komponenten ab.
Wir integrieren die JavaScript Files Timeline und Tween in unser Projekt. Eine Anleitung der Verschiedenen Möglichkeiten findet ihr auf der GreenSock Webseite unter dem Reiter NPMUsage.
STEP 1 - SVG Code innerhalb HTML Code:
Den Code des SVG Files direkt in die Webseite kopieren. Und die Einzelnen SVG Bereiche mit einer Klasse versehen.
Also Beispielsweise:
<svg.. <g.. <path class="head.. <path class="glasses.. <rect class="letter.. <rect class="letter..
STEP 2 - JavaScript Code:
Wir holen uns die Elemente und teilen sie einer Variable zu.
let head = document.getElementsByClassName("head") let glasses = document.getElementsByClassName("glasses") let letters = document.getElementsByClassName("letter")
Natürlich gibt es unterschiedliche Möglichkeiten die Timeline zu aktivieren. In diesem Fall teilen wir die Timeline einer Variablen zu und arbeiten anschließend damit weiter.
let tlLetters = new TimelineMax()
Als aller erstes setzen wir die Startwerte der einzelnen Elemente.
tlLetters.set(letters, { opacity: 0 })
Anschließend definieren wir die Animation. In dem Fall für die einzelnen Buchstaben. Die Funktion "staggerFromTo" - ermöglicht es uns direkt die erstellte NodeList (letters) zu übergeben. Grundsätzlich wird der Funktion aber ein Array übergeben. Der nächste Wert (0.15) definiert die Duration in Sekunden also die Dauer wie lange die jeweilige Animation benötigen soll. Sollte die Animation Frame-basierend sein so gilt dieser Wert den verwendeten Frames.
tlLetters.staggerFromTo(letters, 0.15, {
Nun können wir die From - To styles definiere. transformOrigin zentriert die Animation damit die Skalierung der Elemente nicht einseitig erscheint. Der Abschließende Wert (0.2 in Sekunden) stellt das Zeitfenster in dem die einzelnen Animationen eines Arrays gestartet werden dar.
tlLetters.staggerFromTo(letters, 0.15, { transformOrigin: "50% 50%", scale: 1.25, opacity: 0 }, { scale: 1, opacity: 1 }, 0.2)
Eine ähnliche Animation verwenden wir für den Kopf und die Brille. Zusätzlich definieren wir eine Zeitverzögerung (in Sekunden) für diese Elemente - gleich nach dem wir die Startwerte definiert haben.
tlHead.delay(1.5)
Note: Wir parsen zur verbesserten kompatibilität den Code nach ES5!
Damit war es das eigentlich auch schon. Viel Erfolg bei der eigenen Umsetzung!