10 beeindruckende Webflow Website Animationen (2021)
Mit Webflow lassen sich die verschiedensten Websites umsetzen. Ob One Pager, Agentur Website, Unternehmens-Präsenz, Landingpages, Portfolios und und und.
Heute will ich euch zehn beeindruckende Webflow Websites vorstellen, die durch echt coole Animationen überzeugen.
Das Oreo Playful Network (Oreo Netzwerk)
Website: https://oreo-the-playful-network.webflow.io
Erstellt von: https://webflow.com/website/Oreo-The-Playful-Network
Lockdown. Social Distancing. In Zeiten der Pandemie ist uns allen bewusst geworden, wie wichtig uns unsere Mitmenschen sind. Und dass wir trotz Distanz miteinander verbunden sein können. Genau diese Erkenntnis feiert Oreo mit einem bunten One Pager, der uns in die Welt des Oreo Playful Networks entführt.
Das Oreo-Team und seine Kunden krempeln die Pyjama-Ärmel hoch und finden Freude an den kleinen Dingen wie Backen, Tanzen, Videocalls, Watchpartys und mehr. Und bei jeder neuen Verbindung ist der kleine schwarze Keks da, um zu helfen. So die Aussage des bekannten Keksproduzenten.
Beim Scrollen nach unten baut sich die Seite Stück für Stück auf und lässt einen immer tiefer in die Idee des Oreo Netzwerks eintauchen. Kekse fliegen, Bilder blenden auf, Schriften faden langsam ein. Eine tolle Seite - und wunderbare umgesetzt. Mit Webflow.
Das Moon Project (Smartphone-Licht)
Website: https://moon-project.webflow.io
Erstellt von: https://webflow.com/website/Moon-UltraLight
Ein Selfie mit der Kamera. Ein Schnappschuss am Strand. Ein Partybild mit Freunden. Das Smartphone hat für viele Menschen die klassische Kamera abgelöst. Doch mit der perfekten Ausleuchtung tun wir uns doch häufig schwer. Das Moon® UltraLight soll Abhilfe schaffen. Seine Funktionen präsentiert das Unternehmen mit einem durchdachten Webflow One Pager, der durch den geschickten Einsatz von Animationen die Effekte des Lichts am PC oder mobilen Device erlebbar macht.
Beim Scrollen erkennt der Website-Besucher, wie sich durch die Einstellung von Farbe und Helligkeit die Bilder verändern. Und auch die Bedienung und Anbringung an Smartphone, Laptop, PC und weiteren Devices wird durch übersichtliche Animationen dargestellt.
Richtig cool mit Webflow umgesetzt. Das Produkt wird digital erlebbar.
Das Star Bicycle (Schweizer Fahrradhändler)
Website: https://www.starbicycle.ch
Erstellt von: https://webflow.com/website/Star-Bicycle-Bike-Shop
Auch die Europäer können beeindruckende Webflow Websites mit Animationen erstellen. Das beweist das Team von Starbycicle. Die Website mit den imposanten Scroll Animationen wurde unter anderem zur Website of the Day gekürt, bekam einen Preis für das Best UI Design und Best UX Design und wurde auch mit dem Best Innovation Award gekürt.
Die Unternehmens-Präsenz ist einfach stark umgesetzt - und überzeugt vor allen Dingen in Sachen Storytelling.
Johor Design (Designer Portfolio)
Website: https://www.jomor.design
Erstellt von: https://webflow.com/website/jodesign
Sein Können bereits mit der eigenen Website unter Beweis stellen. Wieso nicht? So tat es Jonathan Morin - Webdesigner. Er präsentiert seine Arbeiten auf einer animierten Portfolio Website, die beim Scrollen verschiedenste Animationen abfeuert, ohne überladen zu wirken.
A piece of genius, wie viele User ehrfürchtig anerkennen. Und ich übrigens auch.
Der Stellar Skipgrip (Gripband für Sportler)
Website: https://stellar-skipgrip.webflow.io
Erstellt von: https://webflow.com/website/Foudamour
Stück für Stück in eine Welt eintauchen lassen. Das Problem nennen. Und dann mit der passenden Lösung um die Ecke kommen. Das macht Stellar auf seiner Webflow Produktpage, auf der das Unternehmen seinen Skipgrip für Sportler vorstellt.
Nicht nur sind die Scroll Animationen der Hammer. Die füllen auch noch selbst große Bildschirme komplett aus. Chapeau.
Foudamour (Wedding Planner)
Website: https://www.foudamour.ca
Erstellt von: https://webflow.com/website/Foudamour
Foudamour ist spezialisiert auf High-End-Hochzeiten mit einer Aura von Raffinesse und Schönheit. Zumindest sagen sie das. Was ihre Unternehmens-Präsenz angeht, kann man dem Weddingplanner Team auf jeden Fall glauben.
Ich liebe diese Website aufgrund der schönen Seitenübergänge. Was aber richtig beeindruckend ist, ist die Slideshow direkt am Beginn der Startseite, die den Usern einen Einblick in die verschiedensten Hochzeiten gibt. Umgesetzt ist das sogar mit der nativen Webflow Slider Komponente.
Weglot for Webflow (Tool für mehrsprachige Websites)
Website: https://www.translate-wf.com
Erstellt von: https://webflow.com/website/Translate-Webflow-Website
Storytelling next level. Wenn kann durch die Website von Weglot scrollt, wird man nicht nur portionsweise mit Fakten gefüttert. Es wird außerdem ein Problem aufgezeigt - und gelöst.
Die Produkte-Website wurde erstellt, um zu zeigen, wie einfach es ist, eine mehrsprachige Webflow-Website ohne Code oder doppelte Seiten einzurichten.
Ein gutes Beispiel, wie eine Scroll-Interaktion den Seitenbesucher halten kann, da die Animation einen einfach fesselt.
Plink Website (Webflow Klon)
Website: https://plink-rebuild.webflow.io
Erstellt von: https://webflow.com/website/Plink-Webflow-Rebuild
Da hat sich ein Web-Designer mal krass Gedanken gemacht. Andreea Encutescu aus Rumänien hat die Website von Plink in Webflow neu erstellt, weil ihm die Interaktionen auf der Orgininalseite (useplink.com) so gut gefielen.
Die Idee: Mal schauen, wie man so eine Website in Webflow erstellen kann. Das Ergebnis: Ein echt guter Klon mit 3D Objekten. Tolle Ideen für Interaktionen sind ebenfalls enthalten - etwa die QR Code Scanner Section (scan and go).
- Es wurde ein bisschen custom Code verwendet. Hier findest du was nützliches dazu im Webflow Forum: Lottie-Files einbinden und dabei das Seitenverhältnis beibehalten
- Einen weiteren Code um den Cursor bei bestimmten Elementen mit einem Blend-Mode zu invertiere: Zum Forum-Eintrag mit benutzerdefiniertem Cursor
Apple iPhone 11 (Tutorial Projekt unabhängig von Apple)
Website: https://iphone-11-pro.webflow.io
Erstellt von: https://webflow.com/website/iPhone-11-Pro-Website
Bei dieser coolen Marketing Website handelt es sich um einen iPhone 11 Seiten-Rebuild, der zu Schulungswecken von Moritz Petersen erstellt wurde. Erstaunlich, welche Funktionen Webflow bereithält, um selbst die starken Websites von globalen Playern wie Apple nachbauen zu können.
Natürlich kannst du die Seite klonen, um die brillante Arbeit von Moritz nachzuvollziehen.
The Goonies (just for fun)
Website: https://the-goonies.webflow.io
Ein Spaßprojekt von: https://webflow.com/website/The-Goonies
Award-prämiert und einfach genial. Das Spaßprojekt The Goonies wurde von dem Londoner Joseph Berry erstellt und ist seine persönliche Hommage an den Abenteuerfilm aus den 1980ern.
Mit seiner Webflow Website lässt der Webdesigner seine Erinnerungen an The Goonies wieder aufleben und entführt den User in die magische Welt.
Die Seite ist vollgepackt mit erstaunlichen Animationen und Interaktionen. Da lohnt sich ein Erkundungstrip!
Du willst selber beeindruckende Scroll-Animationen und Interaktionen erstellen?
Du findest hier auf dem Blog viele kostenlose Animations-Tutorials. Von Beginner bis Pro. Außerdem habe ich dir eine Zusammenfassung erstellt, was für Animationen in Webflow möglich sind und warum genau diese individuellen Interaktions-Möglichkeiten dieses Tool so stark machen:
→ Video: Die Zukunft von Website Animationen? Das kann Webflow!