Website Lottie Files erstellen – Best Practices und wie du Videos zu Lotties umwandelst
Level:
Einfach 👌
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