SVG Logo Animation
Arc

SVG Logo Animation

Mit Greensock zum Erfolg

Was wollen wir machen?

Die nachstehende Animation bildet unser Logo ab und das wollen wir nun ganz simple animieren.

pixelparker brand animation

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!

Pixelparker Logo
Autor
pixelparker
Weitere Artikel die Sie interessieren könnten
Silverstripe Tipps und Tricks
Silverstripe Tipps und Tricks
Hier schreiben wir eine nützliche Informationen zur Entwicklung mit dem Silverstripe Framework / CMS.
Browsermarktanteile
Browsermarktanteile
Chrome, Firefox, Internet Explorer, Safari, Edge, Opera und wie sie Alle heißen. Für welchen Browser sollen wir unsere Webseite testen?
Docker bundled Information
Docker bundled Information
In diesem Beitrag sind einige wichtige Docker Informationen gebündelt. Eine Art Cheatsheet oder zur Auffrischung.
SVG Logo Animation
SVG Logo Animation
Wir zeigen euch wie man einfach und schnell ein SVG Logo oder Icon animieren kann. Dafür arbeiten wir mit dem bekannten Animations-Tool Greensock (GSAP).
Bald geht ohne PHP 7 nichts mehr
Bald geht ohne PHP 7 nichts mehr
WARNUNG: Möglicherweise ist ihr Handeln jetzt gefragt um eine Abschaltung zu verhindern. Die Unterstützung für PHP 5.6 läuft am 31.12.2018 aus, das ist die letzte Version von PHP 5. Auch für die erste PHP 7.0 Version ist bereits am 03.12.20...
Html5 Tag <picture>
Html5 Tag <picture>
Mit dem Html5 Element <picture> bekommen <img> Tags einen Container. Dadurch können Bilder für unterschiedliche Displaygrößen optimiert werden. Weder CSS noch JS ist dafür notwendig!
macOS Cheatsheet
macOS Cheatsheet
In diesem Artikel fassen wir nützliche Mac Tastaturkurzbefehle zusammen. Zudem Listen wir einige häufig verwendete Sonderzeichen Kombinationen auf.
Kein HTTP ohne S!
Kein HTTP ohne S!
Eine moderne Webseite ist kein statisches Produkt und sollte neben aktuellen Inhalt auch schnell und vor allem sicher und fehlerfrei sein. Diese Eigenschaften sind nebenbei die wichtigsten um bei Google ein entsprechend gutes Ranking zu erh...
Google Maps API Key Error
Google Maps API Key Error
Die integrierte Google Karte zeigt "For development purposes only". Das ist leider kein Fehler am API Key sondern eine beabsichtigte und neue Einschränkung seitens Google. Die Angabe einer Kreditkarte ist Notwendig. Google beschränkt den Fr...
GitLab SSH
GitLab SSH
Eine kurze Erklärung zum erstellen einer SSH Verbindung zu GitLab.
Composer macOS
Composer macOS
Schnell und einfach kurz mal composer am mac installieren. Der PHP Pakermanager wird in vielen unterschiedlichen Projekten verwendet.
macOS tree Command
macOS tree Command
Mit tree können wir uns Verzeichnisse in einer übersichtlichen Baumform anzeigen lassen. Wir zeigen euch wie ihr schnell und einfach tree auf euren Mac bekommt.
Git - Häufige Task und Cheatsheet
Git - Häufige Task und Cheatsheet
Git die freie Software zur verteilten Versionsverwaltung von Dateien. Hier notieren wir uns einige häufig verwendeten Tasks als Cheatsheet.
Google Suchkonsole
Google Suchkonsole