Spass mit SVG Animationen
An der diesjährigen Uphill Conf besuchte ich einen Workshop zu SVG Animationen mit Sarah Drasner. Der Workshop gab einen guten Einblick in die Anatomie von SVG und in Best Practices für Animationen.
Wozu Animationen?
SVG Animationen bieten tolle Möglichkeiten, um Interfaces und Websites einnehmender zu gestalten und ihnen Leben einzuhauchen. Hier ein paar Einsatzmöglichkeiten dafür:
- Eine Custom Loading Animation kann die gefühlte Wartezeit kürzer erscheinen lassen. Die Firma viget hat ein Experiment zu Custom Loaders durchgeführt. Beim Standard Loader links haben die Benutzer durchschnittlich 12.3 Sekunden gewartet, bis sie abgebrochen haben, beim Custom Loader rechts 32.5 Sekunden.
- Transitions helfen dem Benutzer, die Hierarchie eines Interfaces besser zu verstehen. Sie nehmen den Benutzer an der Hand und erklären ihm, wie er von einem Zustand zum nächsten gelangt. Hier ein Beispiel von Sarah dazu.
- Simple Animationen können einer Website mehr Strahlkraft verleihen. Siehe zum Beispiel die kleine Bewegung des Velofahrers beim Laden von https://www.biketowork.ch/
Vorteile von SVG
Das Format SVG eignet sich super für webbasierte UI-Animationen, weil sie:
- auf allen gängigen Browsern korrekt dargestellt werden können
- in jeder Auflösung scharf sind
- die Dateigrösse kaum beeinflussen
- einfach per Javascript animiert werden können
- direkt eingebettet nicht einmal zusätzliche requests absetzen
Die richtigen Tools
Die Illustrationen werden am Besten in Illustrator oder einem vergleichbaren Grafikprogramm erstellt und exportiert. So kann sichergestellt werden, dass die Illustration im Browser auch so aussieht, wie im Grafikprogramm. Sketch ist nicht sehr gut darin , seine Grafiken als SVG zu exportieren. Oft sieht es im Browser dann anders aus, als in Sketch.
Zum Animieren arbeitet Sarah primär mit GSAP, einer Javascript Library für HTML5 Animationen. Die Library ermöglicht es, mit wenig Code Bewegungsbläufe zu animieren und stellt auch sicher, dass diese in allen gängigen Browsern identisch dargestellt werden. Hat man einmal die wichtigsten Befehle gelernt, ist es einfacher und effizienter, als mit CSS transitions zu arbeiten. Zudem bietet die Library mehr Möglichkeiten als CSS transitions.
Im Rahmen des Workshops konnte ich mit GSAP herumspielen und unter anderem das Bild ganz oben animieren. Ich freue mich, weiter mit Webbasierten Animationen zu Experimentieren und dem einen oder anderen Projekt auf diese Art Leben einhauchen zu können.
Die Slides und alle Übungen des Workshops sind übrigens Open Source und können hier konsultiert werden.