Ist keine SVG-Animation, sondern nur span-Tags die SVG-Inhalte enthalten und mit HTML CSS Javascript animiert werden.
Siehst du ganz gut wenn du das Element untersuchst: <div id="intro__illustration-platform" class="will--animate is--animated">
Du musst es beim Laden der Seite initialisieren. Google Suchwort: "check if website is loaded"
Code:
$(document).ready( function() {
// do stuff
})
oder
Code:
window.onload = function() {
// do stuff
}
etc. Kommt etwas darauf an womit du arbeitest. Angular z Bsp kannst es direkt daran hängen.
Man kann es auch ohne Javascript animieren, da es nur ein einziges mal abgespielt wird. Könnte aber dazu führen dass die Animation durch ist bevor die Seite endgültig geladen wurde.
Um genau das zu umgehen solltest du via Javascript abfragen ob die Seite geladen wurde, spuckst eine Klasse aus die als Start deiner Animation fungiert. Rest ist CSS Animation: @keyframes animationname {}. Simple translate() + opacity mit ner angepassten cubic-bezier Zeitfunktion. Jeden einzelnen div-Tag(in dem Beispiel sind es span-Tags, warum auch immer) ein wenig zeitversetzt, also mit nem animation-delay. Fertig. Kein Hexenwerk, sieht aber nett aus. Kannst dir sogar aus der CSS ziehen wenn du nicht selber aktiv werden möchtest/kannst.
Gibt diverse Möglichkeiten:
Ich glaube ich habe dir dazu in einem deiner vorherigen Threads bereits mehrere Ressourcen und Links gegeben. Gsock, .animate() | jQuery API Documentation, Adobe Animate, HTML5 CSS3 Animation, Webanimation.
Möglich wäre es sicherlich auch via SMIL. Kommt auf den Anwendungsfall und die Anforderungen an. Viele Wege führen nach Rom, auch hier.
Ich würde es komplett selber bauen. HTML, CSS, Javascript. Ist doch ne schöne Abwechslung mal nen bissl mit animation rumzuspielen anstatt es mit Programmen via Drag'n'Drop or Click'n'Play zusammen zu schubsen.
