Scroll-Animation in Webflow: eine Weltkarte, die beim Scrollen zoomt

Eine Weltkarte, die beim Scrollen langsam bis nach Europa zoomt, während Titel ein- und ausblenden und die Standorte nacheinander aufploppen. So etwas sieht nach Video aus. Ist es aber nicht. Wir haben den Effekt für die Website von DRH Rohstoffhandel komplett in Webflow gebaut, mit Interactions with GSAP, ohne Video und ohne Lottie. In diesem Ratgeber zeigen wir dir das Prinzip dahinter, damit du den Effekt für dein eigenes Projekt nachbauen kannst. Das komplette Tutorial mit jedem Klick im Designer findest du im Video weiter unten.

Warum eine Karte, die sich beim Scrollen bewegt?

DRH ist ein international tätiger Rohstoffhändler. Beim Rebranding ging es darum, Seriosität, Präzision und genau diese internationale Rolle sichtbar zu machen. Eine statische Karte mit ein paar Punkten erzählt das nicht. Eine Karte, die beim Scrollen von der ganzen Welt auf Europa zufährt und dort die Standorte zeigt, schon. Der Besucher steuert die Bewegung selbst, und genau das macht sie greifbar.

Das ist der Kern guter Scroll-Animationen: Sie erklären etwas, statt nur zu dekorieren. Jede Bewegung hat eine Aufgabe. Hier lautet sie: Zeig, dass dieses Unternehmen weltweit handelt und trotzdem in Europa zu Hause ist. Wenn du mehr dazu lesen willst, wie wir Bewegung in Websites einsetzen, schau auf unsere Seite zu Motion Design.

Das Prinzip: drei Bausteine

Die ganze Animation besteht aus drei Teilen, die zusammenarbeiten:

1. Eine lange Scrollstrecke. Sie gibt das Tempo vor.
2. Ein Sticky Wrapper. Er hält die Karte im Bild, während du durch die Strecke scrollst.
3. Eine Timeline. Sie verknüpft jeden Scrollpunkt mit einem Zustand der Karte.

Wenn du diese drei Dinge verstanden hast, kannst du fast jede scrollgesteuerte Szene bauen, nicht nur Karten. Produktfahrten, Zahlen, die sich aufbauen, oder ein Ablauf, der Schritt für Schritt erscheint: Es ist immer dasselbe Muster.

Struktur im Navigator sauber anlegen

Bevor irgendetwas animiert wird, steht die Struktur. Ganz außen liegt eine Section. Sie ist die Bühne und gleichzeitig die Scrollstrecke. Darin sitzt der Sticky Wrapper, und in ihm liegen die einzelnen Ebenen: Weltkarte, Europa-Karte, die beiden Titel und die Standort-Pins.

Jede Ebene bekommt einen eigenen, sprechenden Klassennamen. Das klingt nach Kleinkram, spart dir aber später in der Timeline viel Sucherei. Wenn du 16 Actions zuordnest, willst du nicht raten, ob „Div Block 14“ der zweite Titel oder ein Pin ist. Im Video gehen wir den Navigator Ebene für Ebene durch und zeigen, wie wir die Layer benennen.

Styles: 700 VH als Tempo-Regler

Die Section bekommt eine Höhe von 700 VH. Das ist die Scrollstrecke, und sie ist dein Tempo-Regler: Je länger die Strecke, desto langsamer läuft die Animation pro Scrollbewegung. Wird es dir zu hektisch, machst du die Section höher. Zieht es sich, kürzt du sie. Du musst dafür keine einzige Action anfassen.

Damit die Karte nicht einfach nach oben wegscrollt, liegt sie in einem Sticky Wrapper. Er bleibt am oberen Rand kleben, solange du dich in der Section befindest. Overflow Hidden sorgt dafür, dass beim Zoomen nichts über den Rand hinausragt und keine Scrollbalken entstehen.

Ebenen mit Position absolut und Z-Index

Weltkarte, Europa-Karte, Titel und Pins liegen übereinander. Dafür bekommen sie Position absolut und einen sauberen Z-Index: Karten unten, Titel darüber, Pins ganz oben. So kannst du jede Ebene unabhängig ein- und ausblenden, ohne dass sich im Layout etwas verschiebt.

Auch die Standort-Pins sind absolut positioniert. Das ist die Voraussetzung dafür, dass sie später einzeln und nacheinander erscheinen können, ohne die Karte darunter zu beeinflussen.

Die Interaction: Scroll-Trigger mit Scrub und Smooth

Jetzt kommt Interactions with GSAP ins Spiel. Der Trigger ist das Scrollen durch die Section. Zwei Einstellungen machen den Unterschied:

• Scrub koppelt die Animation direkt an die Scrollposition. Scrollst du zurück, läuft sie rückwärts.
• Smooth glättet die Bewegung, damit sie nicht ruckelt, wenn jemand schnell scrollt.

Mit Scrub wird aus einer Animation, die einfach abläuft, eine Szene, die der Besucher selbst steuert. Genau das macht den Effekt so angenehm: Er ist nie schneller als der Mensch, der scrollt.

Timeline mit 16 Actions

In einer einzigen Timeline liegen 16 Actions: das Einblenden des ersten Titels, der Wechsel von der Welt- zur Europa-Karte, der Zoom, der zweite Titel und die Pins, die nacheinander erscheinen. Weil alles in einer Timeline steckt, bleibt die Reihenfolge immer gleich, egal wie schnell gescrollt wird.

Unser Tipp fürs Timing: Denk in Abschnitten der Scrollstrecke, nicht in Sekunden. Jede Action bekommt ihren Platz auf der Strecke, und leichte Überlappungen lassen die Übergänge weich wirken statt abgehackt. Die genaue Reihenfolge und die Werte zeigen wir im Video direkt in der Timeline.

Kamerafahrt mit nur einem Bild

Der Zoom wirkt wie eine Kamerafahrt. Technisch ist es ein einziges Bild, das über die Timeline skaliert und verschoben wird. Das hat drei Vorteile: Die Seite bleibt leicht, die Bewegung ist gestochen scharf, weil kein komprimiertes Video dazwischen liegt, und sie reagiert ohne Verzögerung auf jede Scrollbewegung.

Danach übernimmt die Europa-Karte. Sie wird eingeblendet, während die Weltkarte verschwindet, dazu kommen der zweite Titel und die Pins. Für den Besucher sieht das aus wie ein durchgehender Flug.

Conditional Playback für Tablet und Mobile

Nicht jede Animation passt auf jedes Gerät. Mit Conditional Playback legst du fest, auf welchen Breakpoints die Interaction läuft. So kannst du für Tablet und Mobile eine eigene, ruhigere Variante bauen oder die Animation dort bewusst anders steuern. Wie wir das für DRH eingestellt haben, siehst du im Video ab Minute 11:19.

Unser Tipp: Teste die Animation immer auf einem echten Handy. Im Designer fühlt sich Scrollen anders an als mit dem Daumen.

Das Video zum Nachbauen

Im Video zeigen wir dir jeden Schritt direkt im Webflow Designer, von der Struktur bis zur fertigen Timeline. Die Kapitel helfen dir, direkt an die Stelle zu springen, die du gerade brauchst.

12:42

Du willst so eine Animation für deine eigene Website, aber nicht selbst bauen? Dann schau dir an, wie wir bei der Webentwicklung arbeiten, oder frag dein Projekt direkt an. Noch mehr Videos aus unserem Alltag findest du auf unserer YouTube-Seite, und wie wir komplexe Software in einem einzigen Website-Hero erklären, liest du im Ratgeber zum syte-Case.

FAQ

Brauche ich für so eine Animation Custom Code?

Nein. Die Weltkarten-Animation ist komplett mit den nativen Interactions with GSAP in Webflow gebaut, ohne eigenen Code, ohne Video und ohne Lottie.

Wie steuere ich, wie schnell die Animation läuft?

Über die Höhe der Section. Bei DRH sind es 700 VH. Mehr Höhe bedeutet mehr Scrollweg und damit eine langsamere Animation.

Warum bleibt die Karte beim Scrollen stehen?

Weil sie in einem Sticky Wrapper liegt. Er klebt am oberen Rand, solange du durch die Section scrollst. Overflow Hidden schneidet alles ab, was beim Zoomen über den Rand ragen würde.

Läuft die Animation auch auf dem Handy?

Mit Conditional Playback legst du pro Breakpoint fest, ob und wie die Interaction läuft. So bekommen Tablet und Mobile eine passende Variante.

Warum ein Bild statt eines Videos?

Ein einzelnes Bild, das skaliert und verschoben wird, bleibt scharf, lädt schneller und reagiert direkt auf die Scrollposition. Ein Video müsste man aufwendig an den Scroll koppeln.