Lottie
LottieFiles sind kleine, plattformübergreifende Animationsdateien, die auf JSON basieren. Sie ermöglichen es, hochwertige und flüssige Animationen einfach in Websites oder Apps zu integrieren, ohne dabei die Performance zu beeinträchtigen.
Weshalb Lottie?
Lottie-Animationen bieten eine beeindruckende Alternative zu GIFs, da sie skalierbar, interaktiv und deutlich ressourcenschonender sind. Ob als Ladeanimation, Icon oder auffälliges Element – mit LottieFiles lassen sich Webprojekte visuell aufwerten und Benutzer begeistern.
Beispiel Sonnensystem
Interaktionen
Lottie-Animationen bieten nicht nur die Möglichkeit, wie ein Video linear abgespielt zu werden, sondern erlauben auch interaktive Steuerung basierend auf Nutzereingaben. Dank ihrer JSON-Struktur können sie gezielt an bestimmte Aktionen wie Scrollen, Klicken oder Mausbewegungen gekoppelt werden.
So lässt sich beispielsweise eine Animation abspielen, sobald ein Nutzer über ein Element scrollt, oder sie kann ihren Fortschritt dynamisch an die Position des Scrollbalkens anpassen. Diese Interaktivität eröffnet völlig neue Gestaltungsmöglichkeiten für ansprechende User-Interfaces und sorgt dafür, dass Animationen nicht nur visuell begeistern, sondern auch funktional in den Kontext einer Website eingebunden werden.
Interaktives Lottie
Welche Tools benötigst du?
Um Lottie-Animationen zu erstellen, sind vor allem zwei Dinge erforderlich: die richtigen Tools und grundlegende Animationskenntnisse. Die Animationen werden in der Regel mit Adobe After Effects erstellt, einem professionellen Tool für Animation und Motion Graphics. Hierfür wird das Bodymovin-Plugin oder Lottie benötigt, das die Animationen in das JSON-Format exportiert.
Welche Skills benötigst du?
In puncto Skills sollte man mit den Grundlagen von Keyframes, Ebenen und Bewegungsabläufen vertraut sein, um präzise und ansprechende Animationen zu gestalten. Für komplexe Animationen sind zusätzlich Kenntnisse in Vektorillustrationen und gegebenenfalls ein Grundverständnis von Code hilfreich, besonders wenn es um interaktive Anwendungen oder Optimierungen geht. Auch ohne tiefgehende Erfahrung gibt es eine Vielzahl an vorgefertigten Lottie-Animationen, die individuell angepasst werden können.
Kurse
Lernen in unseren After Effects Kursen die Grundlagen für die Lottie-Animation.
