Lottie-Animationen (kurz: Lottie) bieten Motion Designern und Full-Stack-Developern die Möglichkeit, auf unkomplizierte Art datenarme, skalierbare und vor allem interaktive JavaScript-Animationen für Websites und Apps zu produzieren. Dabei werden sowohl die Nutzung erleichtert als auch die Anwendung für User optimiert, bspw. indem sie Feedback geben oder Handlungen miteinander verknüpfen. Früher war es so, dass eine Animation vom Designer produziert wurde und später im Webdesign noch recht umständlich von Hand nachgebaut werden musste, um sie so in eine jeweilige technische Anwendung zu bekommen. Das war schwierig, zeitaufwendig und teuer. Und nicht immer stimmte am Ende das Ergebnis.
Mit Lottie- Animationen ist es möglich, die in Bodymovin (After-Effects-Plugin) als JSON exportierte Adobe-After-Effects-Animationen zu analysieren und auf Mobilgeräten und im Web native zu rendern. Das heißt, ein Motion Designer erstellt bspw. eine Stop-Motion-Animation für ein Shoppable Video in After Effects und transportiert diese dann ganz einfach mit Lottie ins Web. Die Lottie-Files können dann sogar auch auf Messaging-Plattformen, Desktop-Apps und sogar für Uhren genutzt werden. Lottie ist ein noch recht neues Open-Source-Dateiformat im Bereich Animation. Es ist winzig, hochqualitativ sowie interaktiv und wurde von den Webexperten von Airbnb entwickelt. Der Namen Lotti stammt übrigens von der deutschen Animationskünstlerin Lotte Reiniger. Lottie wird heute von vielen Apps verwendet, um dadurch die Benutzer zum Interagieren zu bewegen und so die Benutzerfreundlichkeit und die Verweildauer zu verbessern. Das stärkt die User Experience und das Ranking der App.
Das Dateiformat Lottie basiert auf JSON und Motion Designer und Webentwickler können damit Animationen für unterschiedliche Plattformen wie Web, iOS, Android und Windows produzieren. Die Lottie-Files funktionieren also auf jedem Gerät und können wie klassische SVG-Animationen auch vergrößert und verkleinert werden – ganz ohne Qualitätsverlust. So sind Lottie-Animationen wesentlich leichter als klassische Formate wie GIFs oder PNGs. Dadurch verbrauchen sie weniger Speicherplatz. Die jeweilige Anwendung wird insgesamt agiler und spart Ressourcen, die Downloadgeschwindigkeit sinkt.
Lottie-Animationen ermöglichen zudem eine hohe Interaktivität, da sie auf Benutzeraktionen wie Klicks oder Scrollen reagieren können. Das macht sie ideal für E-Commerce-Seiten oder Produktpräsentationen, wo Nutzer durch Interaktionen mehr erfahren. Zudem können sie das User Engagement steigern und die Verweildauer auf der Seite stark erhöhen, indem sie dynamische, ansprechende Erlebnisse bieten.
Lottie ist das neue Angebot am JavaScript-Animationshimmel und bringt neben den oben genannten Features auch eine große Bibliothek mit, die Kreative gern nutzen.