10 crazy Webflow Website Scroll Animationen | Scrollytelling Beispiele

Level:
Ergebnis anschauen
Icon für einen externen Link
Im Webflow Designer öffnen und klonen
Icon für einen externen Link
Im Webflow Designer öffnen und klonen
Icon für einen externen Link

Storytelling ist absolut angesagt. Mit der Methode werden durch den Einsatz von Geschichten Informationen an die Zielgruppe vermittelt. Und diese Informationen werden lieber konsumiert, wenn sie in einem ansprechenden Umfeld - eben als Story - präsentiert werden. Plus: Gut gemachtes Story Telling sorgt dafür, dass User länger auf einer Website verweilen.

Eine Möglichkeit, Storys nice zu verpacken, sind Scroll Animationen. Und (wie könnte es anderes sein?) solche Scroll Animationen lassen sich super smooth mit Webflow realisieren. 11 Beispiele von abgefahrenen Webflow Scroll Animationen präsentiere ich dir im heutigen Beitrag.

Übrigens: Unternehmen können Scroll Animationen hervorragend für ein temporäres Webspecial einsetzen.

Genial gemachte Webflow Scroll Animationen

Mike Murphy - Portfolio und Leben auf einer Webflow Website

Screenshot der Startseite von Mike L. Murphy
Screenshot einer Scroll Animation von Mike L. Murphy

Wenn Mike Murphy am Start ist, wird es richtig gut. Er hat bereits Animationen für legendäre Filme wie Lord of The Rings oder Iron Man realisiert - und hat nun eine immersive Story Telling Website. Entstanden ist eine Seite, die Portfolio und Lebenslauf in sich vereint. Scrolle dich jetzt durch Murphys Leben und genieße dabei Auszüge der besten Soundtracks aller Zeiten.

https://mike-murphy.webflow.io

Kalso - Lebensgeschichte zum Durchscrollen

Screenshot der Startseite von Kalso.com
Screenshot einer Scroll Animation auf kalso.com

Die Story hinter einem Produkt vorzustellen, ist immer eine nice Idee. Vor allen Dingen, wenn sie so spannend ist, wie im Fall von Kalso. Die Geschichte des Wellness Schuhs  reicht zurück bis ins Jahr 1905. In einer weich-fließenden Scroll Animation wird die Geschichte der gleichnamigen Gründerin und des Produkts mit zahlreichen Bildern und häppchenweise Text präsentiert.

https://www.kalso.com

Sakharov - Die Geschichte eines Friedensnobelpreisträgers

Screenshot einer Website über Sakharov
Webflow Scroll Animation auf einer Website über Sakharov

Diese Webflow Website über Sakharov ist ein digitales Museum, das dem Leben, der wissenschaftlichen Arbeit und dem Menschenrechtsengagement des Friedensnobelpreisträgers gewidmet ist. Für die Seite wurden unter anderem Archivbilder animiert und so die Atmosphäre eines alten Films nachempfunden. Die Website führt den User kapitelweise durch das Leben des Mannes - mit Bildern, Videos, Dokumenten und vielem mehr.

https://sakharov.webflow.io/en/chapter-1

Venus Williams - Biografie

Screenshot der Bio Startseite von venuswilliams.com
Screenshot einer Scroll Animation auf venuswilliams.com

Dass sich mit Webflow Scroll Animationen wahnsinnig tolle Biographien erstellen lassen, zeigt auch dieses Beispiel über Tennis Star Venus Williams. In die Scroll Animation sind weitere Webflow Animationen - wie etwa Slider Karusselle - eingebaut. Einfach mal anschauen!

https://www.venuswilliams.com/bio

Refokus - Full-Service Webflow Agentur

Screenshot von 2021.refokus.com
Screenshot einer Scroll Animation auf 2021.refokus.com

Richtig smart ist es, wenn eine Webdesign Agentur bereits mit ihrer Internetpräsenz zeigt, was sie drauf hat. So macht es die Webflow Agentur Refokus aus Pinneberg. Mit ihrer 2021-Website rekapitulieren die Kreativen aus Deutschlands Norden in einer schlanken Scroll Animation ihr erstes Jahr.

https://2021.refokus.com

Hard Work Club - Neu-gedachtes Design Kollektiv

Screenshot der hardworkclub.com Startseite
Screenshot einer Scroll Animation auf der hardworkclub.com Startseite

Die Wände zwischen KonsumentInnen und Marken abreißen - das ist das Ziel des Hard Work Clubs. Und noch viel mehr: Sie denken kreatives Arbeiten neu und präsentieren ihr Konzept auf einer bunten Scroll Animation Webflow Website, die einfach Spaß bringt.

https://www.hardworkclub.com

Redis Agency - ab sofort mit eigenem Webflow Team

Screenshot von webflow.redis.agency
Screenshot einer Scroll Animation auf webflow.redis.agency

In nur einem Jahr hat die Agentur Redis Dutzende von Projekten gestartet und internationale Preise gewonnen. Nun haben die Kreativen eine Webflow-Abteilung ins Leben gerufen und ihr eine eigene Webflow Website mit Scroll Animationen gewidmet. Diese Landing Page bringt die Liebe zu Webflow, zu den Kunden und zum Team zum Ausdruck. Sie zeigt außerdem die neue Corporate Identity der Redis Agency.

https://webflow.redis.agency

No Pitch Club - für eine Welt ohne Pitches

Screenshot von der No Pitch Club Website
Screenshot einer Scroll Animation auf der No Pitch Club Website

Jeder und jede Kreative, der oder die mal in einer Agentur gearbeitet hat, kennt es: den Pitch. Pitches kosten Zeit, Geld, Ressourcen, Nerven - und sind kreative Arbeit for free. Warum pitchen dennoch so viele? Weil es der (verwöhnte) Kunde so will! Der No Pitch Club möchte Schluss machen mit einer Welt, in der gepicht wird. Mit einer genial gemachten Website, die per Scroll Animation die Argumente gegen Pitches häppchenweise präsentiert. Regt definitiv zum Nachdenken an!

https://nopitchclub.webflow.io/

Alpha 10 X - Knowledge as a Service

Screenshot der Agentur Website Alpha 10 X
Screenshot einer Scroll Animation auf der Agentur Website Alpha 10 X

ALPHA10X ist eine KI-gestützte Such- und Entdeckungsplattform, die von ihren Machern als Knowledge as a Service Produkt bezeichnet wird. Was dahinter steckt, zeigt eine Landing Page, die das Konzept per Scroll Animation erklärt.

https://alpha10x.webflow.io/

Take a ride with me - Biker POV Filme

Screenshot der Startseite von takearidewith.me‍
Screenshot von takearidewith.me‍

Der dänische Videograf Nikolaj Juhlsen hat mit der Website Take a ride with me ein spannendes Videoprojekt gestartet. Filme aus dem POV eines Bikers - cool verpackt in einer Scroll Animation.

https://www.takearidewith.me