Wenn du schon einmal eine Website gebaut hast mit vielen klassischen JavaScript Animationen, dann kennst du das Problem: Die Website wird einfach langsam.
Gerade wenn man Animationen mit einem Klick einfügen kann, wie beim Elementor, dann gibt es gerne viele Zeilen JavaScript. Und die muss man ja irgendwann laden.
Seit dem Sommer 2020 kann Elementor aber auch LottieFiles einbauen und springt damit auf einen Trend auf. Aber was sind eigentlich diese LottieFiles?
Lottie ist ein Dateiformat (basiert auf JSON), welches leichte und auch interaktive Animationen ermöglicht. Erfunden haben es ein paar Mitarbeiter von Airbnb, mittlerweile nutzen es viele grosse Plattformen. Zum Beispiel Microsoft, duolingo, Uber, TikTok, Netflix und Google, aber auch Spotify und Disney.
Was sind LottieFiles?
Ganz einfach gesagt sind LottieFiles SVG-Animationen, die im JSON-Format gespeichert werden können.
Der Vorteil: Viele Tools und Plattformen können damit umgehen. Sowohl auf der Produktionsseite wie auch bei der Darstellung.
So gibt es zum Beispiel für Adobe After Effects und auch für Adobe Animate Plugins, welche den Export in ein LottieFile ermöglichen. Und eben, Elementor kann Lotties darstellen auf WordPress, für den Gutenberg Editor gibt es erst Plugins, aber auch andere CMS wie Webflow können LottieFiles einbetten.
Aber auch die Funktion auf verschiedenne Geräten ist sehr breit. Neben den gängigen Desktop-Computern kann man Lotties auch auf mobilen Geräten anzeigen und so zum Beispiel in Apps einbauen. Sogar einige Smartwatches unterstützen mittlerweile LottieFiles.
Wo finde ich LottieFiles?
Entweder, du baust dir deine eigenen Animationen, das haben wir übrigens bei unseren Team-Icons gemacht auf der neuen Website (hovere mit der Maus über die Gesichter).
Oder du bedienst dich in der reichen und vielfältigen Lottie-Sammlung auf lottiefiles.com. Da gibt es kostenfreie Animationen, aber auch kostenpflichtige. Du kannst dir auch einen eigenen Account erstellen und deine LottieFiles auf der Plattform verkaufen.
Mehr zu LottieFiles liest du auf der offiziellen Website.
Deine Meinung?
Wie machst du Animationen im Web? Hast du schon mal LottieFiles genutzt? Was denkst du dazu?
Ich freue mich über deinen Kommentar!
5 Antworten
LottieFiles können auch im gleichen Stiel aus der Animatly Library bezogen werden. Link dazu: https://animatly.io/
Ah cool, kannte ich nicht! Danke!
Richtig cool – müssen wir gleich einmal ausprobieren!
Sind Sie sich sicher, dass es Plugins für Adobe Animate gibt?
Ja, es gibt das Plugin aktuell als Early-Access Version: https://lottiefiles.com/plugins/animate