Lottie
Man kennt sie von Apple Landingpages, wenn neue Produkte beworben werden: Lottie ermöglichen hochwertige und flüssige Animationen einfach in Websites oder Apps zu integrieren, ohne dabei die Performance zu beeinträchtigen. Und sie sind erst noch super klein – perfekt für SEO.
Weshalb Lottie?
Lottie-Animationen bieten eine beeindruckende Alternative zu GIFs. Sie sind skalierbar, interaktiv und deutlich ressourcenschonender. Ob als Ladegrafik, Icon oder komplexe bewegte Animationen – mit LottieFiles lassen sich Webprojekte visuell aufwerten und Benutzer begeistern.
Beispiel einfache Animation
Was man früher mit Flash animiert hat, geht heute wunderbar mit Lottie. Diese vereinfachte Grafik des Sonnensystem habe ich mit After Effects kreiert und als Lottie exportiert. Dann mit dem Lottiefiles-Plugin für WordPress eingebettet. Ohne Nutzerinteraktion, ohne Player, aber mit Loop aktiviert.
Scroll-Interaktion
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.
Abspielen bei Sichtbarkeit des Blocks
Sobald der Block im Browser sichtbar wird, kann ein Element getriggert werden. Es sind zahlreiche Optionen bereits im Lottie-Files Plugin verfügbar. Dazu brauchst keine Programmierkenntnisse.
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- oder Lottie-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.
Willst du im Schnitt glänzen?
Unsere Kurse zu Videoschnitt & Animation machen dich fit — von der ersten Schnitt-Idee bis zum finalen Export.
Roman ist seit über 20 Jahren im Video-, Film- und TV-Business tätig. Der ausgebildete Sportlehrer ETH hat in Los Angeles Film studiert und dort auch im Bereich Visual Effects bei namhaften Hollywood-Produktionen mitgewirkt (u.a. Green Zone mit Matt Damon). Danach arbeitete er sieben Jahre bei SRF als Multimedia- und Videoproduzent. 2014 gründete er ident pictures, eine Videoagentur in Zürich, wo er als Produzent, Kameramann, Editor und Motion-Designer tätig ist. Sein breites Wissen in Film, TV und Corporate Video vermittelt Roman schon seit 2013. Als offizieller Adobe Instruktor unterrichtet er Premiere Pro, After Effects, Photoshop und Illustrator an diversen Hochschulen (u.a. FHGR, Universität Freiburg, FHNW, Universität Bern) und berät zahlreiche Firmen (u.a. Swisscom, SRF, CH Media, Ringier, REGA, MeteoSwiss, ZKB). Ende 2017 kam er zu Studio 1 und ist heute dessen Inhaber und verantwortlich für das Kurswesen.
Kommentare