Dropdown Rand bzw. Rahmen (Border) in Webflow animieren

Level: Fortgeschritten
Animation
Vorschaubild zum Beitrag: Dropdown Rand bzw. Rahmen (Border) in Webflow animieren
ressourcen
Live Vorschau
* AFFILIATE LINK
Details
Level
Fortgeschritten
Datum
August 19, 2026
Autor
Lächelnder Mann mit kurzem braunem Haar und Bart vor orangem Hintergrund.
Jonas Arleth
Blog Post

Maximilian hat mich in den Kommentaren gefragt, wie man in Webflow einen Rand animiert. Z.B. bei einem Dropdown welches in der Hauptnavigation integriert ist. Prinzipiell kannst du diese Technik aber bei jedem Element anwenden, bei dem du die Border oder Outline animieren möchtest.

Die Frage von Maximilian ist:
Wie animiert man einen Rand? Ich will, dass wenn man über ein Element geht (Hover) soll der Rand des Elements sich animiert einblenden, d.h. der Rand soll sich nicht komplett einblenden, sondern er soll z.b. von oben nach unten laufen. Ich will das bei einem Dropdown Menü machen, dass wenn man aufmacht, dass rechts und links der Rand von oben nach unten geht und und wenn die dann unten sind, dass sie sich dann mit einer Animation unten in der Mitte treffen.

Kapitel:

00:00 – Intro
00:37 – Aufbau des Dropdown
05:17 – Animation anlegen
10:49 – Endergebnis


Mehr Content

Blog Archiv

Kreative GSAP Hero Animation mit einem 3D Card Loop-Effekt

Lerne Schritt für Schritt, wie du in Webflow mit GSAP eine premium Hero Section animierst, inklusive Scroll Trigger, Stagger und Loop Effekt.
Video
Kategorie
Animation
Skill
Fortgeschritten

Anschauen
Beitrag anschauen
Vorschaubild zum Beitrag: Next-Level 3D Buchstaben-Animation in Webflow (NEUER GSAP Ease Visualizer)

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

Anschauen
Beitrag anschauen

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

Anschauen
Beitrag anschauen
Vorschaubild zum Beitrag: Website Preloader mit der neuen Webflow GSAP Events Funktion

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

Anschauen
Beitrag anschauen

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

Anschauen
Beitrag anschauen

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

Anschauen
Beitrag anschauen