Webflow Tabs animieren (Anleitung mit Vorlage)

Wir bauen zusammen die native Webflow Tab-Komponente etwas um, so dass wir eine bewegliche Navigations-Hintergrundfläche haben, die sich bei Klick von einem Tab Navigationspunkt zum nächsten bewegt. Diese Art von Animation sieht man auch häufig beim Material Design von Google mit einem sich bewegenden Unterstrich.

Im Tutorial bauen wir die Interaktion mit einer Button Fläche. In der Webflow Vorlage (Cloneable) habe ich dir aber noch die Unterstrich Variante wie bei Google Material Design mit rein gepackt.  

Wichtig als Info: Wenn du für deinen Auftrag weitere Tabs hinzufügen musst, musst du auch entsprechend eine weitere Interaktion für jeden Tab hinzufügen, damit der Hintergrund sich auch dort hin bewegt.

Webflow Tabs Content animieren – 4 Tricks damit es funktioniert

Es gibt bei der Webflow Tabs Komponente Möglichkeiten den Inhalt zu animieren, sobald jemand den Tab wechselt. Als Standard hat Webflow hier einen Fade in / out gesetzt, aber tatsächlich lassen sich damit weitaus spannendere Animationen integrieren. Bei mir hat das allerdings nicht auf Anhieb geklappt und vermutlich triffst du auf gleiche Probleme bei der Umsetzung. Deshalb hier für dich meine Anleitung mit den 4 Regeln, die du befolgen solltest, wenn du Webflow Tabs animieren möchtest.

‍