February 2021

Dropdown Rand (Border) animieren

Level:

Fortgeschritten đź‘Ť

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.

Vorschau:

‍https://webflow-lernen.webflow.io/rand-animieren

Projekt klonen:

Direkt in Webflow öffnen

Kapitel:

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

‍