Wir bei LEANATIC sind große Fans von schönen Animationen und bewegten Spielereien. Richtig angewendet verleihen Animationen jedem Webprojekt das besondere Etwas und können außerdem die User Experience stark verbessern.
Wenn man nicht aufpasst, dann können animierte Inhalte aber auch schnell ins Gegenteil umschlagen: große Dateien lassen Seiten länger laden und viel Bewegung auf einer Seite lenken den User ab. Sie bieten keinen Mehrwert mehr.
Um das zu vermeiden nutzen wir für unsere Projekte bevorzugt das von Airbnb entwickelte Dateiformat “Lottie”.
Lottie ist eine auf JSON basierende Animations-Library, die es uns möglich macht Vektor-Animationen ganz einfach in unsere Projekte einzubinden. Da die Animationen vektor- und nicht pixelbasiert (wie z.B: GIFs oder andere Videoformate) sind, benötigen sie weitaus weniger Speicherplatz und sind außerdem verlustfrei skalierbar.
Der folgende Screenshot zeigt ganz gut die Unterschiede in den Dateigrößen. Dafür wurde unsere Astronauten-Animation (ohne Optimierung der Exporteinstellungen) jeweils als Lottie File (.json mit 173kb), als .mp4 (44,4 MB) und als .gif (stolze 380,7 MB) exportiert:
Erst einmal zum Wording. Lottie Animationen werden Lottie Files genannt. Die Erstellung von Lottie Files ist ganz einfach. Dafür benötigt ihr After Effects und das Bodymovin Plugin auf Adobe Exchange. Alles was ihr tun müsst, ist die Animation in After Effects zu erstellen und dann mit Bodymovin zu exportieren. Das Plugin exportiert die Animation als .json Datei. Die könnt ihr wie alle anderen Bild- und Videodateien in Pimcore als Assets ablegen und dann an den entsprechenden Stellen einsetzen.
Lottie kommt am Besten mit einfachen Vektor-Animationen klar. Spezielle Effekte wie Verläufe oder besondere Füllmethoden machen gerne Schwierigkeiten.
Die Library bietet uns einige Animations-Modi zur Darstellung der Lottie Files. Das gibt uns eine Menge an Möglichkeiten zur Art und Weise wie die Animationen am Ende abgespielt werden. Ein paar davon haben wir hier für euch zusammengefasst:
Eine schöne Methode um Animationen im Web zu nutzen sind Illustrationen, die sich beim Scrollen “weiterentwickeln”. Stichwort Storytelling - durch Scroll-Animationen können Inhalte von Illustrationen bildhaft begleitet werden in dem sie sich beispielsweise immer weiter aufbauen.
LottieFilesvon David Muthuswamy
Als weitere Trigger zum Auslösen der Animation, sind bei Lottie auch Cursor-Aktionen machbar. Ein Lottie File kann z.B. erst bei Hover über das Bild gestartet werden. Diese Methode lädt den User zur Interaktion mit den Inhalten ein.
LottieFiles Beispiel von David Muthuswamy
Hier ist der Name Programm. Wie bei einem klassischen Toggle Button, kann zwischen zwei angelegten Zuständen der Animation hin und her gewechselt werden. Auch das ist eine schöne Möglichkeit um den User zur Interaktion zu bringen.
LottieFiles Beispiel von David Muthuswamy
Hier wird es ein wenig spielerisch. Lottie überlässt uns nicht nur die Art der Trigger, sondern bietet auch die Möglichkeit die Abspiel-Geschwindigkeit durch die Cursor-Bewegung zu steuern. Je schneller man seinen Cursor bewegt, desto schneller die Geschwindigkeit der Animation. Außerdem kann die Animation sich an die Position des Cursors anpassen. Das gibt uns eine einfache Art Inhalte durch Gamification-Konzepte zu ergänzen. Ein User muss richtig aktiv werden, um jedes Detail der Animation zu entdecken und wird durch jede neue “Entdeckung” für seine Aktivität belohnt.
LottieFiles Beispiel von David Muthuswamy
Zusammengefasst kann man sagen, dass Lottie den Umgang mit Animationen stark vereinfacht. Wer sich ein Bild darüber machen will, welche Trigger und Möglichkeiten sich sonst noch bieten, findet eine Übersicht in den Docs von Lottiefiles.
Wir sind definitiv Fans, und zwar nicht nur wegen der einfachen Anwendung und der vielen Möglichkeiten. Sondern auch weil wir dadurch Animationen in unseren Projekten nutzen können, ohne sie unnötig aufzublähen. Das kommt unseren selbst gesetzten Standards zur Umsetzung nachhaltiger Digitalprodukte entgegen. Trotzdem muss hier der Vollständigkeit halber einmal festgehalten werden, wer mit komplexen Animationen arbeiten will, der muss auf andere Lösungen zurück greifen. Aber für einfache visuelle Darstellung ist Lottie auf jeden Fall ein echter Mehrwert.
Sie wollen mehr erfahren?
Dann schreib uns. Wir freuen uns immer über den Austausch zu unseren Lotties :)
Einfach mal sprechen?
Mein Name ist Billy Thiemann, langjähriger Entwickler, Digitalisierungsexperte und Geschäftsführer von LEANATIC.
Lassen Sie mir Ihre E-Mail-Adresse oder Telefonnummer da – Ich freue mich darauf, Sie kennenzulernen.
