Scroll-basierte 3D-Globus-Animation aus Webflow (CSS & GSAP)

In diesem Webflow-Tutorial zeige ich dir, wie du eine scroll-getriggerte 3D-Globus-Animation mit Rotation baust – mit der neuen GSAP-Timeline-Integration direkt im Webflow Designer. Wir gehen Aufbau, Setup, Styling und die GSAP-Scroll-Animation Schritt für Schritt durch – vom Orbit-Wrapper bis hin zur Animation von Linien und Text. Das Tutorial ist ideal für Designer:innen, die fortgeschrittene, scrollbasierte Motion-Systeme in Webflow wirklich verstehen wollen.

3D-Globus Scroll Animation in Webflow mit der GSAP Timeline bauen

In diesem Beitrag zeige ich dir den Aufbau und die wichtigsten Schritte, inklusive dem entscheidenden Trick, damit die vertikalen Linien nicht „hinten“ sichtbar sind.

Das Grund-Setup: Orbit Section + Sticky Wrapper

Damit die Animation sauber über Scroll-Länge läuft, brauchst du eine eigene Section, die die Dauer definiert.

1. Füge direkt nach deiner Stage eine neue Section ein und nenne sie „Orbit Section“.
2. Gib der Section eine Höhe von 400vh. Das ist die Scroll-Strecke für deine Animation.
3. Setze den Background auf dein dunkles Seiten-Background (z. B. „background dark“).

4. Lege darin einen „Orbit Sticky Wrapper“ an:

• Breite 100%‍
• Höhe 100vh
• position: sticky und top: 0‍
• Inhalte zentrieren (z. B. per Flex)

So bleibt der Globe im Viewport, während du durch die 400vh scrollst.

Der Globe: Orbit Wrapper als Kreis mit Overflow Hidden

Im Sticky Wrapper platzierst du das Element, das den Globe definiert:

„Orbit Wrapper“

• Breite 40% und Höhe 40% (gleich groß)
• Border 1px in einer hellen Farbe
• Border Radius 50%
• overflow: hidden
• position: relative (wichtig für absolute Kinder)

Damit hast du eine saubere Kreisfläche, in der deine Linien liegen.

Vertikale Linien: der „Front only“-Trick gegen Backside-Lines

Jetzt kommt der Teil, der den Look wirklich 3D wirken lässt.

1. Lege einen „Orbit Vertical Line Wrapper“ an (100% Breite/Höhe, position: absolute, alle Kanten auf 0).
2. Lege darin die eigentliche „Orbit Vertical Line“ an und setze sie auf „Fill“ (absolute, volle Größe).

Der typische Fehler wäre jetzt: eine komplette Border rundherum. Dann sieht man die Linie vorne und hinten. Sieht auch cool aus, ist aber für unsere Scroll Animation das falsche.

Die Lösung:
Nutze bei der vertikalen Line keine Border auf allen Seiten, sondern nur links:

• Border entfernen
• Left Border auf 1–2px setzen
• Farbe: hell/bright

Damit wirkt es so, als wären die Linien nur „vorne“ sichtbar – ähnlich wie in Spotifys Umsetzung.

3D-Tiefe aktivieren: preserve-3d und Child Distance

Damit Rotationen wirklich räumlich wirken:

• Am „Orbit Wrapper“ stellst du in den 3D-Optionen die Child Distance ein (z. B. 120em).
• Setze bei „Orbit Wrapper“ transform-style auf preserve-3d.
• Das gleiche gilt für die vertikale Line, damit sie korrekt im Raum gerendert wird.

Jetzt kannst du einzelne vertikale Lines über Rotation so anordnen, dass sie sich wie ein 3D-Körper anfühlen.

Horizontale Linien für den Globe-Look

Für die horizontale Optik kannst du eine vertikale Line duplizieren und als „Orbit Horizontal Line“ separieren.

Hier brauchst du im Gegensatz zu den vertikalen Lines Border auf allen Seiten, damit die Linien als komplette Ellipsen wirken:

• Border: z. B. 1px
• Border Radius: 50%

Für mehr „Globe-Tiefe“ baust du typischerweise mehrere horizontale Linien:

• eine zentrale Linie ohne Radius, nur als dünner Strich (Background statt Border)
• eine obere und untere Ellipse mit stärkerer Krümmung (Breite/Position leicht anpassen)

So bekommt der Globe seinen typischen „Gitter“-Look.

Scroll Animation anlegen: GSAP Timeline mit Scrub on Scroll

Jetzt kommt die Animation direkt in Webflow:

1. Wähle die Orbit Section.
2. Erstelle eine neue Scroll Interaction (z. B. „3D globe scroll animation“).
3. Aktiviere Scrub on Scroll, damit die Timeline an den Scroll gekoppelt ist.

Damit wird deine Section zur „Trigger-Strecke“ – genau deshalb war 400vh am Anfang so wichtig.

Vertikale Lines sequenziell rotieren (Offset + Linear)

Du willst nicht alle Lines gleichzeitig drehen, sondern nacheinander.

• Wähle eine „Orbit Vertical Line“ im Timeline Step.
• Target auf Class setzen, damit alle Lines in der Orbit Section getroffen werden.
• Setze einen Offset (z. B. 1s oder 0,5s), damit sie step-by-step laufen.
• Easing: Linear
• Rotation: von 0 auf 180deg

Damit wandern die Lines von links nach rechts durch den Globe – und durch den Border-Trick sehen sie vorne sauber aus.

Globe-Scale wie bei Spotify: von unten rein und später größer

Der Effekt wird direkt hochwertiger, wenn der Globe nicht einfach „da ist“, sondern ins Bild kommt.

• Target: „Orbit Wrapper“ (als Class)
• Scale: z. B. von 0.05 auf 0.8
• Zusätzlich Y-Move: z. B. 20% nach unten starten, dann auf 0%

Danach kannst du den Globe über die restliche Scrollstrecke weiter skalieren, z. B. bis 2.2. Das fühlt sich extrem smooth an – vor allem mit Scrub.

Text Animation: Split by Letter/Word + Mask

Für Title und Copy kannst du in der Timeline Text Splits nutzen:

Title: Split by Letter + Mask

• Start: 100% nach unten
• End: 0%
• Optional: Stagger/Offset (z. B. 150ms)
• Easing: z. B. Power In Out

Copy: Split by Word + Mask

• ähnliche Werte, nur ohne Letter-Split

Extra Premium: Dupliziere die Text Steps am Ende und animiere sie nach oben raus (z. B. -100%), damit Ein- und Ausstieg sauber wirken.

Finishing Touch: Fade Out zum nächsten Abschnitt

Als letzter Schritt kannst du den gesamten Globe beim Übergang ausfaden:

• Orbit Wrapper Opacity von 100% auf 0%

So verschwindet das Element elegant, wenn du zur nächsten Section scrollst.

Wenn du mehr solcher Interactions direkt in Webflow bauen willst: Auf FORMBURG findest du passende Tutorials, Kurse und Produkte rund um Webflow und Animationen.