Du kannst jetzt 3D-Orbit-Animationen in Webflow mit GSAP erstellen (NoCode)
In part 4 of the Mars Exploration Website series, Jonas shows how to build stunning 3D scroll animation using GSAP Interactions inside Webflow. From animating orbit shapes and the Mars image to revealing the Earth in a 3D space, this tutorial takes your scroll effects to the next level. Clone the free Webflow project and start experimenting yourself!
So erstellst du eine 3D-Scroll-Animation in Webflow – mit nur 2 GSAP-Schritten
Die Bühne bereiten mit Sticky-Elementen
Die Grundlage dieser Scroll-Animation liegt in der cleveren Verwendung von „sticky“ positionierten Elementen. Das Mars-Bild ist in mehrere Wrapper eingebettet, um Seitenlade-Animationen von Scroll-Interaktionen zu trennen. Ein Container mit einer Höhe von 350 vh ermöglicht ein langes Scroll-Erlebnis und verankert die Orbit-Elemente an Ort und Stelle.
Die Orbit-Struktur aufbauen
Mehrere Orbit-Kreise werden mit div-Elementen erstellt, die absolut positioniert, kreisförmig dimensioniert und mit variablen Border-Breiten versehen sind. Jeder Orbit-Kreis hat seine eigene Größe und Klasse, wodurch ein geschichteter, realistischer Weltraumeffekt entsteht.
Um eine 3D-Umgebung zu simulieren, verwendet der Wrapper 2D-/3D-Transformationen mit einer spezifischen Rotation entlang der X-Achse sowie einer manipulierten Perspektive. Diese Technik macht den Orbit-Raum visuell dynamisch.
Animation mit GSAP
Die Animation beginnt mit einer Page-Load-Sequenz: Titel und Beschreibungen erscheinen nacheinander mit Fade- und Stagger-Effekten. Danach gleitet Mars durch eine Kombination aus x-Translation und Rotation an seinen Platz.
Sobald das Scrollen beginnt, übernimmt GSAP die Kontrolle:
- Mars bewegt sich entlang der X-Achse und verkleinert sich
- Die Orbit-Kreise rotieren von einer schrägen in eine Aufsicht
- Die Perspektive verändert sich dynamisch und verstärkt die Tiefenwirkung
- Die Erde blendet ein und vergrößert sich auf die doppelte Größe von Mars
Jeder Animationsschritt ist exakt getimt, um einen flüssigen und nahtlosen Ablauf zu erzeugen.
Warum das bahnbrechend ist
Früher war für solch ein Detailniveau und die Interaktion im 3D-Raum aufwändiger individueller Code oder externe Tools nötig. Jetzt, mit der vollständigen Integration von GSAP in Webflow, ist es zugänglich und intuitiv.
Wenn du immersive Web-Erlebnisse für Kunden entwickelst, sparst du mit diesem Ansatz Zeit – und lieferst gleichzeitig beeindruckende Ergebnisse.
👉 Willst du mehr lernen? Schau dir meinen kompletten Webflow Expert Kurs an – randvoll mit fortgeschrittenen Layout-Techniken und Animationen.
