Verschiedenste Elemente einer Website sind ja durch das Medium der ‹bewegten Gestaltung› (Motion Design) schon seit langer Zeit sehr beweglich geworden. Dadurch kann über eine rein statisch erstellte Seite hinaus nochmal in vielfältigster Weise gestalterisch Einfluss, auf beispielsweise Informationen, Aussagen oder auch die Benutzerführung, genommen werden.

Eine kleine Linienanimation wollte ich jetzt einfach mal nativ in Webflow umsetzen. Dafür habe ich die nachfolgend kurz beschriebene Art der Umsetzung gewählt:

Das Design ist praktisch aus zwei übereinanderliegenden Linienelementen aufgebaut. Die untere rote Linie wird durch eine direkt darüberliegende weiße Linie, in gleicher Größe, komplett überdeckt und ist aufgrund der identischen Farbe von oberer Linie und Seitenhintergrund damit ersteinmal quasi unsichtbar.

Die eigentliche Animation wird jetzt auf das weiße obere Linienelement angewendet.
Über eine auswählbare Transformationsfunktion lässt sich die Linie in eine gewünschte Richtung verschieben. Im Beispiel wird sie, zeitlich gesteuert, horizontal auf der x-Achse um einhundert Prozent der Elementlänge nach rechts bewegt/animiert. So entsteht jetzt der Eindruck einer Bewegung der unteren roten Linie, die sich von links nach rechts der Länge nach aufbaut. Dieser Bewegungsablauf lässt sich über verschiedene Easing-Funktionen verfeinern. Das Starten der Animation kann über unterschiedliche, ebenfalls auswählbare, Trigger-Funktionen hergestellt werden. Im Beispiel startet sie automatisch mit dem Laden der Seite.

Die kleine Animation kann nachfolgend in Ruhe angeschaut werden: Simple Line Animation