Eigene Website Page Load Animation in Webflow erstellen

Eine Page-Load-Animation (eine Animation, die abgefeuert wird, sobald eine Seite anfängt zu laden) ist eine sehr gute Methode, um deine Website langsam animiert aufzubauen und nicht zu „hart” wirken zu lassen. In diesem Webflow Tutorial zeige ich dir, wie du ganz individuell Elemente nacheinander laden kannst und damit den ersten Eindruck deiner Website bestimmst.

Gerade die Startseite oder auch andere Hauptseiten besitzen oftmals eine Bühne, die nach dem Laden einer Seite im Sichtbaren Bereich des Seitenbesuchers zuerst vorkommt. Dafür erstelle ich in Webflow eigentlich bei jedem Projekt eine individuelle Seiten-Lade-Animation, um selbst festzulegen, wie die Elemente zuerst erscheinen. Damit kann man auch sehr gut längere Ladezeiten überbrücken.

Der einzige Nachteil, der heutzutage leider vorkommen kann, ist, dass durch die lästigen Cookie-Banner, die man mittlerweile in jede Website integrieren muss, Die Page-Load Interaktion ggf. nicht gesehen werden kann. Trotzdem kommt der Seitenbesucher eventuell nach einer Auswahl von einer Unterseite mal wieder auf die Hauptseite und sieht die Page-Load Animation dann in vollem Umfang.

Kapitel

00:00 – Intro
01:13 – Animation für Video anlegen
04:52 – Animation für Texte anlegen
10:04 – Animation optimieren
12:10 – Tipp: Overflow-Hidden Box ergänzen
15:50 – Endergebnis
16:16 – Webflow Online-Kurs