Code SnippetsSVG Animation mit HTML und CSS Code Snippets

SVG Animation

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 Figma1, 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!
Datei erstellen für eine SVG Animation
Stroke für die SVG Animation
Advanced Stroke für die SVG Animation

API vorbereiten

Öffne den Code Editor deiner Wahl und lege ein neues Projekt 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>
<html lang=’en‘>
<head>
    <meta charset=“UTF-8″>
    <meta name=“viewport“ content=“width=device-width, initial-scale=1.0″>
    <meta http-equiv=“X-UA-Compatible“ content=“ie=edge“>
    <title>SVG Animation mit HTML und CSS</title>
    <link rel=“stylesheet“ href=“style.css“>
</head>
<body>
    <div class=“svg-frame“>
    <svg id=“text“ width=“100%“ height=“100%“ preserveAspectRatio=“xMinYMin meet“ viewBox=“0 0 1169 115″ fill=“none“ xmlns=“http://www.w3.org/2000/svg“>
    <!– Restlichen Inhalt der SVG-Datei hier einfügen –>
    </svg>
    </div>
    <script src=’app.js ‚></script>
</body>
</html>

CSS einrichten

Nimm folgende Basiseinstellungen 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 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.

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()}`);
}
Werte für die SVG Animation

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.

Animation programmieren

Kommen wir jetzt zum eigentlichen Programmieren der Animation. 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 wird die Animation 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.

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

TRIBOOT TECHNOLOGIES

Unsere Mission: Die Welt um uns herum ein Stück weit intelligenter zu machen, das Potenzial bestehender und zukünftiger Technologien in ganzer Breite zu nutzen und immer einen Schritt weiter zu denken.

KONTAKT

Kreuzstraße 1-3
45468 Mülheim

Tel. 0208 883 884 16
Fax. 0208 883 891 06

Email business@triboot.de

2014 © Triboot Technologies GmbH. All rights reserved. | Datenschutz | Impressum