SVG Animationen

See the Pen Hello World SVG Animation by Issa Pourgholam (@triboot) on CodePen.

Schwierigkeitsgrad: Fortgeschritten
Zeit: ca. 15 Min.

Dieser coole Effekt lässt sich nicht nur auf Texte, sondern Formen aller Art anwenden. Der Fantasie sind dabei keine Grenzen gesetzt.

Zunächst einmal benötigt man eine geeignete SVG-Datei. SVG steht für Scalable Vector Graphics. SVG-Dateien benötigen wenig Speicherplatz und sind unendlich hoch skalierbar, ohne dass es zu einem Qualitätsverlust, wie bei pixelbasierten Bildern, kommt.

Zum Erstellen einer SVG-Datei gibt es eine Vielzahl geeigneter Apps auf dem Markt. Wir empfehlen das für Privatanwender frei nutzbare Programm Figma¹, welches als Desktop-App oder direkt im Browser betrieben werden kann.

Erstellen einer SVG-Datei mit Figma

Programm öffnen, neue Datei erstellen, Frame und Desktop 1440×1024 auswählen
Etwas herauszoomen (Strg und Mausrad nach unten)
Rectangle erstellen, so groß wie die Desktop-Fläche aufziehen und beliebig einfärben
Textebene erzeugen und gewünschten Text eingeben (die Textebene muss sich über der Rectangle-Ebene befinden)
Den gesamten Text markieren (Strg + A) und Schriftart sowie Größe einstellen
Den Text mit den Positionierhilfen mittig an der Desktop-Fläche ausrichten
Rechtsklick auf den Text und Outline Stroke wählen
Stroke + anklicken, als Farbe Weiß (FFFFFF) und Strichstärke 5px auswählen
Fill mit – löschen
Stroke Outside auf Center stellen
Advanced Stroke: Cap auf Square und Join auf Miter stellen
Rechtsklick auf den Text, Copy/Paste, Copy as SVG, fertig!

API vorbereiten

Öffne den Code Editor deiner Wahl und lege ein neues Projekt (SVG Animationen) mit index.html, style.css und app.js an. Wir empfehlen den frei erhältlichen Quelltext-Editor Visual Studio Code®. In den Body-Tag der index.html fügst du nun den Inhalt der SVG-Datei ein. Erweitere den SVG-Tag noch mit id=“text“.

<!DOCTYPE html>

<head>

<title>SVG Animation mit HTML und CSS</title>

</head>

<body>

<!– Restlichen Inhalt der SVG-Datei hier einfügen –>

</svg>

</div>

</body>

</html>

SVG Animationen - CSS einrichten

Nimm folgende Basiseinstellungen (SVG Animationen) in der style.css Datei vor und aktiviere anschließend mit Rechtsklick auf die index.html Datei Open with Live Server. Der Text sollte nun in der Mitte des neuen Browserfensters sichtbar sein.

body {

width: 100%;

height: 100vh;

background-color: #bada64;

display: flex;

justify-content: center;

align-items: center;

}

.svg-frame {

width: 90%;

}

#text {

}

In der SVG Animationen index.html Datei steht jeder einzelne Buchstabe des Textes in einem eigenen Path-Tag. Mit der Pseudoklasse nth-child() können diese mit CSS einzeln bearbeitet werden. Da in unserem Beispiel jeder Buchstabe animiert werden soll, brauchst du so viele Pseudoklassen, wie dein Text Buchstaben hat. Diese werden, beginnend bei eins, aufsteigend durchnummeriert. Mit stroke-dasharray werden, entsprechend der eingegebenen Pixelzahl, Lücken im Pfad erzeugt, mit stroke-dashoffset werden diese um einen bestimmten Wert verschoben. Experimentiere ruhig ein wenig mit den Werten der beiden Einstellungen, um ein Gefühl für deren Wirkung zu bekommen.

#text path:nth-child(1) {

stroke-dasharray: 0px;

stroke-dashoffset: 0px;

}

#text path:nth-child(2) {

stroke-dasharray: 0px;

stroke-dashoffset: 0px;

}

#text path:nth-child(3) {

stroke-dasharray: 0px;

stroke-dashoffset: 0px;

}

etc.

SVG Animationen - JavaScript

Da wir unsere Buchstaben so aussehen lassen wollen, als wenn sie aus dem Nichts auf den Bildschirm gezeichnet werden, benötigen wir die genaue Größe jedes einzelnen Pfades. Um diesen zu ermitteln, nutzen wir eine for-Schleife in JavaScript, welche uns die exakten Werte in der Konsole ausgibt. Gehe in die Browseransicht und drücke F12, um in den Entwicklermodus zu wechseln. Anschließend klickst du auf Console: Hier wird nun von jedem einzelnen Buchstaben die genaue Länge in Pixeln angezeigt.

const text = document.querySelectorAll(‚#text path‘);

for (let i = 0; i < text.length; i++) {

console.log(`Letter ${i} is ${text[i].getTotalLength()}`);

}

CSS erweitern

Du musst diese Werte nun, auf ganze Zahlen aufgerundet, in die stroke-dasharray und stroke-dashoffset Felder der CSS-Datei übertragen. Danach sollte von den Buchstaben im Browser nichts mehr zu sehen sein.

#text path:nth-child(1) {

stroke-dasharray: 567px;

stroke-dashoffset: 567px;

}

#text path:nth-child(2) {

stroke-dasharray: 550px;

stroke-dashoffset: 550px;

}

#text path:nth-child(3) {

stroke-dasharray: 361px;

stroke-dashoffset: 361px;

}

etc.

SVG Animationen programmieren

Kommen wir jetzt zum eigentlichen Programmieren der SVG Animationen. Dafür erweitern wir die CSS-Datei mit folgendem Code.

#text {

animation: fill 0.5s ease forwards 3.0s;

}

@keyframes line-anim {

to {

stroke-dashoffset: 0;

}

@keyframes dash {

to {

stroke-dashoffset: 0;

}

Für jeden Buchstaben wird eine Verzögerung von 0.3 Sekunden eingestellt, so dass sich der Schriftzug nach und nach dynamisch aufbaut.

#text path:nth-child(1) {

stroke-dasharray: 567px;

stroke-dashoffset: 567px;

animation: line-anim 2s ease forwards;

}

#text path:nth-child(2) {

stroke-dasharray: 550px;

stroke-dashoffset: 550px;

animation: line-anim 2s ease forwards 0.3s;

}

#text path:nth-child(3) {

stroke-dasharray: 361px;

stroke-dashoffset: 361px;

animation: line-anim 2s ease forwards 0.6s;

}

etc.

Mit der Füllung der Outline werden die SVG Animationen effektvoll beendet. Damit dies erst dann passiert, wenn alle Buchstaben fertig gezeichnet wurden, musst du den ease forwards Wert in der animation der text Klasse ggf. noch etwas anpassen.

@keyframes fill {

from {

fill: transparent;

}

to {

fill: white;

}

#text {

animation: fill 0.5s ease forwards 4.0s;

}

Tipp

Sollte es bei der Animation zu einer unvollständigen Darstellung des Textes kommen, achte darauf, dass beim Erstellen der SVG-Datei Cap auf Square und Join auf Miter steht. Einstellen kannst du dies unter Advanced Stroke, wenn du bei Stroke auf die drei kleinen Punkte klickst. Ggf. muss bei einigen Buchstaben Cap auf Round gesetzt werden. Dies machst du am besten direkt in der HTML-Datei.

¹Figma ist kein Produkt der Triboot Technologies GmbH. Preismodelle für eine gewerbliche Nutzung entnehmen Sie bitte der Homepage des Herstellers.

Sie möchten mehr über Preise, Möglichkeiten und die Umsetzung von App Anwendungen in Ihrem Unternehmen erfahren? Dann sind Sie bei uns genau richtig.

Jetzt kostenlose Beratung sichern

Sie möchten mehr über Preise, Möglichkeiten und die Umsetzung von App Anwendungen in Ihrem Unternehmen erfahren? Dann sind Sie bei uns genau richtig.

Jetzt kostenlose Beratung sichern