Mein erster Podcast-Gastauftritt

Reinhören lohnt sich: Hier findest du den Podcast

Falls du jetzt neugierig geworden bist und selbst in die Welt der Lottie-Animationen eintauchen möchtest, kannst du dir die Folge des Formburg Podcasts hier anhören:

Ein nerdiger Deep Dive in die Welt der Lottie-Animationen

Vor Kurzem hatte ich das Vergnügen, mein Podcast-Debüt im Formburg Podcast von Jonas Arleth zu geben – eine großartige Gelegenheit, meine Leidenschaft für Animationen im Webdesign mit der Community zu teilen. In diesem Artikel möchte ich dir einen Blick hinter die Kulissen geben, wie es zu diesem Gespräch kam, warum Lottie-Animationen ein Gamechanger für modernes Webdesign sind und was ich dabei gelernt habe.

Warum Lottie-Animationen? Ein Thema, das bewegt

Für alle, die sich in der Webflow-Community bewegen, ist Jonas Arleth kein Unbekannter. Seine Inhalte sind eine wertvolle Quelle für Webdesignerund Developer:innen, die mehr aus ihren Projekten herausholen wollen. Auch ich gehöre zu denjenigen, die seine Podcasts und Tutorials gerne verfolgen.

Eines Tages hörte ich eine Folge, in der es um eine 3D-Animation ging. Die Animation war beeindruckend, aber mir kam eine Idee, wie sie noch besser, effizienter und benutzerfreundlicher umgesetzt werden könnte – und zwar mit einer Lottie-Animation. Aber was macht Lottie eigentlich so besonders?

Lottie-Animationen vs. 3D-Animationen: Ein Vergleich

Lottie-Files bieten gegenüber klassischen 3D-Animationen viele Vorteile, insbesondere wenn es um die Integration in Web-Projekte geht. Sie sind vektorbasiert, was bedeutet, dass sie gestochen scharf auf allen Bildschirmgrößen dargestellt werden, ohne dabei die Dateigröße in die Höhe zu treiben. Das macht sie ideal für den Einsatz in responsiven Webdesigns. Zudem können Lottie-Animationen in JSON-Dateien umgewandelt werden, was ihre Ladezeiten drastisch verkürzt.

Bei 3D-Animationen sieht die Sache etwas anders aus. Sie sind oft visuell beeindruckender und bieten mehr Flexibilität, wenn es darum geht, Tiefe und komplexe Bewegungen darzustellen. Der Nachteil? Sie sind oft größer, schwerer und können die Ladezeit der Webseite negativ beeinflussen – besonders bei mobilen Nutzern und schlechten Internetverbindungen.

Diese Gedanken und Ideen wollte ich Jonas unbedingt mitteilen, und so habe ich nicht lange gezögert. Ich habe mich direkt bei ihm gemeldet, die 3D-Animation in eine Lottie-Variante umgewandelt und ihm die Datei zugeschickt. Das Ergebnis: Er war begeistert, wie leicht sich die Animation in seine Webflow-Projekte integrieren ließ.

Vom Feedback zur Podcast-Einladung: Wie es dazu kam

Nachdem ich Jonas die Lottie-Animation geschickt hatte, schrieb er mir zurück, dass diese Variante super funktioniert. Und dann kam die Frage, die mich wirklich überraschte: Ob ich Lust hätte, eine gemeinsame Podcast-Folge zum Thema Lottie-Animationen aufzunehmen.

Für mich war das eine einmalige Chance, meine Erfahrungen mit der Webflow-Community zu teilen und in die technischen Details einzutauchen, die mich so faszinieren. Selbstverständlich sagte ich sofort zu.

Eine Stunde voller Nerd-Talk: Was du aus der Podcast-Folge mitnehmen kannst

Unsere Aufnahme dauerte schließlich über eine Stunde – eine Stunde voller tiefgehender Insights und technischer Details, die vielleicht nicht für jeden geeignet sind, aber sicherlich all jene begeistern, die sich für Animationen im Webdesign interessieren. Hier sind ein paar der wichtigsten Themen, die wir im Podcast besprochen haben:

• Wann sollte man Lottie-Animationen einsetzen und wann eignen sich 3D-Animationen besser?
  Wir diskutierten, welche Art von Animation sich in welchen Szenarien besser eignet und wie man als Webdesigner
• die richtige Entscheidung trifft. Lottie ist leicht, schnell und perfekt für kleine, wiederkehrende Animationen. 3D eignet sich besser für komplexe visuelle Effekte, die einen Wow-Faktor erzeugen sollen.
• Best Practices zur Integration von Lottie-Files in Webflow
  Lottie-Animationen in Webflow einzubauen, ist nicht schwer – aber es gibt einige Tricks, um die Performance zu optimieren. Ich teilte einige meiner persönlichen Workflows, wie ich Animationen so einbinde, dass sie auch bei langsamen Verbindungen flüssig laufen.
• Optimierung von Dateigrößen und Qualität
  Wenn es um Animationen geht, ist die Dateigröße oft der größte Feind der Ladezeit. Deshalb sprachen wir über verschiedene Tools, die ich nutze, um Lottie-Dateien und Videos so klein wie möglich zu halten, ohne an Qualität zu verlieren. Handbrake ist dabei eines meiner Lieblingstools, wenn es darum geht, Videos ohne sichtbaren Qualitätsverlust zu komprimieren.

Mein Fazit: Lottie-Animationen sind die Zukunft – aber nicht immer die Lösung

Die Aufnahme dieser Podcast-Folge war für mich nicht nur eine tolle Möglichkeit, mein Wissen zu teilen, sondern auch selbst noch einmal tief in die Materie einzutauchen. Lottie-Animationen sind ein echter Gamechanger, wenn es um schnelle Ladezeiten, responsive Animationen und leichtgewichtige Designs geht. Dennoch haben auch komplexere 3D-Animationen ihre Daseinsberechtigung – es kommt eben auf den richtigen Einsatz an.

Besonders wertvoll fand ich den Austausch mit Jonas über die kleinen, aber feinen Unterschiede in der Umsetzung und die Möglichkeit, gemeinsam Best Practices für die Community zu entwickeln. Am Ende ist es genau das, was die Webflow- und Designer:innen ausmacht: Das Teilen von Wissen und der gemeinsame Austausch über innovative Lösungen.

Ich freue mich, wenn du reinhörst und mir dein Feedback gibst – vielleicht hast auch du eine Idee, wie man Animationen noch besser umsetzen kann!