Website Lottie Files erstellen – Best Practices und wie du Videos zu Lotties umwandelst

In dieser Episode des Formburg Podcasts diskutieren Jonas Arleth und Lorenz Töpfer über die Verwendung von Lottifiles und 3D-Animationen im Webdesign. Lorenz teilt seine Erfahrungen und Herausforderungen bei der Arbeit mit Lottifiles, erklärt die Funktionsweise und Integration in Webflow und vergleicht die Vor- und Nachteile von Lottifiles und 3D-Animationen. Zudem werden Techniken zur Optimierung von Lottifiles und zur Video-Integration behandelt. Es werden verschiedene Aspekte der Video- und Animationserstellung behandelt, insbesondere die Optimierung von Videoqualität und Dateigröße, die Verwendung von Lottie-Dateien und die Herausforderungen bei der Integration von 3D-Animationen in Webflow. Die Teilnehmer teilen ihre Erfahrungen mit verschiedenen Tools und Techniken zur Kompression und zum Export von Animationen, einschließlich der Verwendung von Handbrake und der Erstellung von Lottie-Dateien aus Animationen mit transparenten Hintergründen.

Lorenz Töpfer von Lorbeer Media online

• Website: https://www.lorbeer.media
• LinkedIn: https://www.linkedin.com/in/lorenz-toepfer

Tools:

• Lotties Komprimieren zu dotlottie File: https://lottiefiles.com/tools/lottie-to-dotlottie
• Mächtiges Toole um kostenlos Video-Files zu komprimieren: https://handbrake.fr
• PNG Bilder mit transparentem Hintergrund komprimieren zu WEBP: https://picflow.com/convert/png-to-webp
• Transparenzen in Videos online Testen: https://rotato.app/tools/transparent-video
• Rotato – kostenloser Konverter um transparente Videos für alle Browser zu erstellen (Quelle muss schon transparent sein): https://rotato.app/tools/converter

Takeaways

• Lottie-Files sind eine innovative Möglichkeit, Animationen im Web zu integrieren.
• Lottie-Files ermöglichen eine einfache Integration von Animationen in Webflow.
• 3D-Animationen bieten einen modernen Ansatz, erfordern jedoch mehr technische Kenntnisse.
• Die Dateigröße von Lottie-Files kann optimiert werden, um die Ladezeiten zu verbessern.
• Videos können in Lottie Files umgewandelt werden
• Die Auswahl der richtigen Frame-Rate ist entscheidend für die Animationseffekte.
• Die Nutzung von Tools wie After Effects und Media Encoder kann den Workflow erleichtern.
• Die Integration von Lottie-Files kann Herausforderungen mit sich bringen, insbesondere bei der Komprimierung.
• Die Wahl des richtigen Formats für Animationen ist wichtig für die Performance der Website.
• Die Bitrate beeinflusst die Dateigröße und Qualität von Videos.
• Die Wahl der richtigen Kompression ist entscheidend für die Webnutzung.
• Handbrake ist ein nützliches Tool zur Video-Kompression.
• Lottie-Dateien bieten eine flexible Möglichkeit zur Animation.
• Transparente Hintergründe in Lottie-Animationen erfordern spezielle Techniken.
• Die Integration von Lottie-Dateien in Webflow ist einfach gestaltet.
• 3D-Animationen können die Ladezeiten einer Website negativ beeinflussen.
• Die Optimierung von Animationen kann die Benutzererfahrung verbessern.
• Die Wahl zwischen Video und Lottie-Animationen hängt von den Projektanforderungen ab.
• Die Nutzung von Vektor-Lotties ermöglicht Anpassungen an CI-Farben.

Fragen, die ich während des Gesprächs gestellt habe

• Was sind Lottie Animationen?
• Unterschied zu 3D Animationen?
• Ich zeige die 3D Animation, von der ich zuerst ausgegangen bin
• Ich zeige die Video-Animation, die ich zur Optimierung integriert habe
• Warum habe ich mich für die Video Animation entschieden?
• Vorteile Lottie gegenüber Videos
• Lorenz zeigt seinen Prozess, wie man Videos zu Lottie Files umwandelt
• Thema Videos komprimieren und Codecs (Möglichkeiten, Vorteile, Nachteile)
• Bildsequenz erstellen
• Wir besprechen, wann Lotties Sinn machen / wann nicht. Welche Videos gut funktionieren, welche nicht.
• Thema Lotties Komprimieren zu dotlottie file
• Wie unterscheidet sich der Prozess zu vektorbasierte 2D Lottiefile Animationen → Lorenz zeigt was in After Effects