Wissen
Updates
Kontakt
Projekt starten
Wissen
Updates
Kontakt

Was ist eigentlich Lottie und warum lieben wir es so?

Lottie
After Effects
Wuschi-Wuschi

Wer schon mal versucht hat, eine Animation sauber in eine Website oder App zu integrieren, weiss: Das kann schnell kompliziert, schwerfällig oder pixelig werden. Genau hier kommt Lottie ins Spiel: ein Open-Source-Framework, das Animationen als leichtgewichtige Vektorgrafiken darstellt und sie reibungslos auf unterschiedlichsten Plattformen laufen lässt.

Entwickelt wurde Lottie ursprünglich bei Airbnb und hat seitdem die Herzen vieler Designteams und Entwicklungsteams erobert. Statt GIFs oder Videos kommt Lottie mit schlanken JSON-Dateien aus, die mithilfe des Plugins Bodymovin aus Adobe-After-Effects-Animationen exportiert werden. Das Ergebnis: Animationen, die scharf, skalierbar, interaktiv steuerbar und blitzschnell geladen sind.

Zuletzt aktualisiert: 26. Mai 2026

Das wichtigste in Kürze

Animationen

Für Animationen empfehlen wir CSS-Animationen oder Lottie-Files. Beide sind performant, skalierbar und ideal für moderne, dezente Effekte. Du kannst uns deine Datei schicken und wir pflegen sie ein.

Möglichkeiten

Wir setzen CSS-Animationen, Lottie-Files, Parallax-Effekte und Scroll-Animationen um. Alle Animationen integrieren wir bewusst und zurückhaltend, damit Performance und Benutzerfreundlichkeit nicht leiden.

Parallax

Parallax-Effekte erzeugen räumliche Tiefe, indem sich verschiedene Ebenen beim Scrollen unterschiedlich schnell bewegen. Sie sollten sparsam eingesetzt werden, da sie die Performance beeinflussen und auf Mobilgeräten weniger wirken.

Performance

CSS-Animationen und Lottie-Files sind sehr performant und beeinflussen die Ladezeit kaum. Aufwändige JavaScript-Animationen oder grosse Videos mit Autoplay können hingegen die Performance beeinträchtigen.

Implementation

Animationen lassen sich auch nach dem Go-live problemlos ergänzen. Dank des modularen Aufbaus der cmsbox können wir zusätzliche Animationen jederzeit integrieren. Teile uns einfach mit, was du dir vorstellst.

Kontaktiere uns

Du hast Fragen, zu Animationen und wie diese vorbereitet werden?

Was Lottie so besonders macht

Lottie basiert auf Vektoranimationen. Das heisst: Egal wie gross oder klein dein Screen ist, die Animation bleibt immer gestochen scharf. Die JSON-Dateien sind im Vergleich zu Videos oder GIFs winzig, was die Ladezeiten enorm verbessert. Weil die Animationen direkt in After Effects gebaut werden, lassen sie sich flexibel gestalten, solange man sich an die Lottie-kompatiblen Features hält.

Das Beste daran: Lottie läuft plattformübergreifend. Ob Website, iOS, Android oder React Native, Lottie funktioniert zuverlässig.

Typische Einsatzgebiete: Ladeanimationen, Erfolgsmeldungen, erklärende Illustrationen oder liebevolle Mikroanimationen, die Nutzende begeistern.

Wann lohnt sich der Einsatz von Lottie-Files?

Lottie ist perfekt für dich, wenn du schlanke, skalierbare Vektoranimationen brauchst, einfache bis mittlere Animationen erstellen willst und du oder jemand im Team mit Adobe After Effects umgehen kann.

Weniger geeignet ist Lottie, wenn du extrem komplexe After-Effects-Funktionen nutzen willst, auf maximale Performance oder Barrierefreiheit angewiesen bist oder stark SEO-orientierte Inhalte animieren willst.

So entsteht deine Lottie-Animation

Schritt für Schritt erklärt

1. Design vorbereiten

Der Startpunkt ist meist ein Logo oder eine Illustration, idealerweise als .ai oder .svg. Wichtig: Alles sollte in Pfade umgewandelt sein. Keine Textebenen, keine Gruppierungen – reine Vektoren.

Tipp

In Illustrator sämtliche Gruppierungen aufheben, Schrift in Pfade umwandeln und das Aussehen reduzieren. Anschliessend kannst du die Datei als .ai speichern.

2. In After Effects importieren

Jetzt wird animiert! In After Effects importierst du die Datei als Komposition mit Ebenengrössen. Danach wandelst du jede Illustrator-Ebene in eine Formebene um. Nur so ist sie später 100 % Lottie-kompatibel.

3. Animation erstellen

Nun beginnt der kreative Teil: Bewegung, Skalierung, Trim Paths, Opazität – vieles ist möglich. Achte jedoch darauf, nur Lottie-kompatible Features zu verwenden. Das heisst z. B. kein Blur, keine Effekte, keine 3D-Ebenen.

4. Plugins installieren

Damit du Animationen aus After Effects als Lottie-Dateien exportieren und vorab in After Effects auch gleich testen kannst, benötigst du zwei Plugins:

Technisch gesehen brauchst du für den eigentlichen Export nur Bodymovin. Das LottieFiles Plugin ergänzt Bodymovin aber sehr praktisch mit Vorschau-Funktionen, Asset-Verwaltung und einem direkten Upload auf lottiefiles.com.

Beide findest du nach der Installation in After Effects unter:

Fenster > Erweiterungen > Bodymovin / LottieFiles

5. Vorschau und Export

Mit dem LottieFiles-Plugin kannst du direkt in After Effects eine Live-Vorschau anzeigen und prüfen, ob deine Animation kompatibel ist. Warnungen (z. B. zu nicht unterstützten Ebenen) helfen dir bei der Optimierung. Exportiere dann die Animation als .json-Datei. Fertig ist das Lottie!

Kontaktiere uns

Wie kann ich denn nun so ein Lottie erstellen?

Einbindung der Datei

Deine JSON-Datei ist nun fertig. Wie geht's weiter?

Sobald du deine fertige JSON-Datei hast, brauchst du uns nur Bescheid geben, wir kümmern uns um die Einbindung. Lottie-Animationen können auf deiner Website flexibel platziert werden, z. B.:

  • Im Header, als animiertes Logo.

  • Im Footer, als verspieltes Detail.

  • Mitten im Content, per Code-Element.

  • Oder als animiertes Designelement auf einem Mood-Bereich.

Sag uns auch, wie deine Animation reagieren soll, also durch welche Interaktion sie abgespielt wird.

Mögliche Animationstrigger

Je nach Anwendungsfall gibt es verschiedene Interaktionsmöglichkeiten:

Einfach

  • automatisch abspielen

  • in Dauerschleife (Loop)

  • als Standardanimation beim Seitenladen

Erweitert

  • Intro-Animation beim Laden, danach ausgeblendet

  • Animation startet erst beim Scrollen in den Sichtbereich

  • Hover-Effekt am Desktop, Autoplay auf Mobile

  • Scrollbasierte Steuerung (Animation reagiert auf Scrollrichtung)

Kontaktiere uns

Wie binde ich Lottie in meine cmsbox-Website ein?

FAQ

Häufig gestellte Fragen zu Animationen

Wie setzt ihr Animationen auf der Website um?

Für Animationen empfehlen wir CSS-Animationen oder Lottie-Files.

Lottie-Files sind leichte, vektorbasierte Animationsdateien, die aus Tools wie Adobe After Effects exportiert werden können. Sie sind performant, skalierbar und ideal für moderne, dezente Animationen. Du kannst uns deine Datei schicken und wir pflegen sie ein.

Welche Arten von Animationen sind auf meiner Website möglich?

Wir setzen verschiedene Animationsarten um: CSS-Animationen für einfache Übergänge und Hover-Effekte, Lottie-Files für komplexe vektorbasierte Animationen, Parallax-Effekte für Tiefenwirkung beim Scrollen sowie Scroll-Animationen, bei denen Elemente beim Herunterscrollen erscheinen. Alle Animationen setzen wir bewusst und zurückhaltend ein, um die Performance und Benutzerfreundlichkeit nicht zu beeinträchtigen. Hast du genaue Vorstellungen von einer Animation auf deiner Website? Kontaktiere uns, wir sagen dir was alles möglich ist.

Was sind Parallax-Effekte und wann machen sie Sinn?

Parallax-Effekte erzeugen eine räumliche Tiefe, indem sich verschiedene Ebenen beim Scrollen unterschiedlich schnell bewegen. Sie können einer Website Dynamik verleihen und visuelle Akzente setzen. Allerdings sollten sie sparsam eingesetzt werden, da sie die Performance beeinflussen und auf mobilen Geräten nicht die gleiche Wirkung haben. Wir beraten dich gerne.

Beeinflussen Animationen die Ladezeit meiner Website?

Das hängt von der Art und Menge der Animationen ab. CSS-Animationen und Lottie-Files sind sehr performant und haben kaum Einfluss auf die Ladezeit. Aufwändige JavaScript-Animationen oder grosse Video-Dateien (insbesondere mit Autoplay) können hingegen die Performance beeinträchtigen. Wir achten bei der Umsetzung immer darauf, dass Animationen die Nutzererfahrung verbessern und nicht behindern.

Können Animationen auch nachträglich hinzugefügt werden?

Ja, Animationen lassen sich auch nach dem Go-live problemlos ergänzen. Dank des modularen Aufbaus der cmsbox können wir zusätzliche Animationen, Module oder weitere Funktionen jederzeit integrieren. Teile uns einfach mit, welche Elemente du animieren möchtest, und wir erstellen dir eine Offerte für die Umsetzung.

Du möchtest ein wenig Wuschi-Wuschi auf deiner Website?

Projekt starten
Kontakt aufnehmen
Projekt starten