Lottie Animation in eine Navigation einbinden (Burger Icon)

Level: Einfach

Animation

Details

Level

Einfach

Datum

July 12, 2026

Autor

Lächelnder Mann mit kurzem braunem Haar und Bart vor orangem Hintergrund.

Jonas Arleth

Share

Blog Post

Mit Lottie Animationen kannst du sehr einfach und schnell bestimmte Elemente auf deiner Website aufwerten. Ich zeige dir, wie du sie in Webflow einbinden und einstellen kannst.

Gerade bei dem Mobile Navigations-Modul ist das Burger Icon dadurch schnell animiert und die Interaktion funktioniert auch bei One Pagern oder Navigationen, die zu einer bestimmten Stelle auf deiner Seite scrollen soll.

Hier kannst du kostenlos Lottie Animationen herunterladen und einbinden:
https://www.lottieflow.com
https://lottiefiles.com/popular?sort=all-time

Kapitel:

00:00 - Intro zu Lottie Animationen
01:46 - Lottie Animation einbinden
02:31 - Lottie abspielen bei Navigation öffnen/schließen

Mehr Content

Next-Level 3D Buchstaben-Animation in Webflow (NEUER GSAP Ease Visualizer)

Lerne, wie du eine 3D Bühnen-Animation in Webflow mit GSAP, Bounce Easing, Split Text und modernem Apple-like Motion Design baust.

Video

Kategorie

Animation

Skill

Fortgeschritten

Webflow CMS: Stagger Animation jedes Items pro Grid Row

Animier Webflow CMS Collection List Items nacheinander beim Scrollen mit Set Class + CSS nth-child Delays, inkl. Reduced Motion und Designer-Tipp.

Video

Kategorie

Animation

Skill

Einfach

Website Preloader mit der neuen Webflow GSAP Events Funktion

Wie du mit der neuen GSAP Timeline in Webflow über einen Event Trigger eine komplett eigene Loading Animation erstellst und diese in Custom JS Code abfeuern kannst.

Video

Kategorie

Animation

Scroll-basierte 3D-Globus-Animation aus Webflow (CSS & GSAP)

Baue eine 3D-Globus Scroll Animation direkt in Webflow mit der neuen GSAP Timeline: preserve-3d, Sticky Section, Lines-Trick & Text Reveal.

Video

Kategorie

Animation

Skill

Fortgeschritten

Typografie-Meisterwerk in Webflow gebaut: Mit Swiper JS und GSAP | Deep Dive

Ich zeige dir, wie ich eine komplexe Kursseite für Oliver Gareis mit Webflow gebaut habe – inkl. Slider, CMS, Animationen & anspruchsvoller Typografie-Layouts.

Video

Kategorie

Animation

Skill

Einfach

Navigation beim Scrollen transformieren: von zentriert zu sticky links | Webflow GSAP Animation

Lerne in diesem Tutorial, wie du eine zentrierte Navigation mit Stagger Effekt in Webflow und GSAP umsetzt – inspiriert vom Shopify Winter Edition Design.

Video

Kategorie

Animation

Skill

Fortgeschritten

Abstrakte orangefarbene Form mit verwaschenen Rändern vor schwarzem Hintergrund.

Kurse

Plattform

Socials

Sprache wechseln

German

English

Cookie Einstellungen

Diese Website wurde komplett in Webflow erstellt.

Mit * gekennzeichnete Links sind Affiliate Links

Impressum Datenschutzerklärung