You can now create 3D orbit animations in Webflow using GSAP (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!

How to Create a 3D Scroll Animation in Webflow with Just 2 GSAP Steps

Setting the Stage with Sticky Elements

The foundation of this scroll animation lies in the clever use of sticky positioning. The Mars image is nested within wrappers to separate page load animations from scroll interactions. A container set to 350vh allows a long scroll experience, anchoring orbit elements in place.

Building the Orbit Structure

Multiple orbit circles are created using divs set to absolute positioning, circular dimensions, and variable-based border widths. Each orbit circle has its own size and class, giving a layered, realistic space effect.

To simulate a 3D environment, the wrapper uses 2D/3D transforms with specific X-axis rotation and a manipulated perspective. This technique makes the orbit space visually dynamic.

Animating with GSAP

The animation starts with a page-load sequence: titles and descriptions fade and stagger into view. Then, Mars slides into place using a mix of x translation and rotation.

When scrolling begins, GSAP takes control:

• Mars moves and shrinks in the X-axis
• The orbit circles rotate from an angled to top-down view
• The perspective shifts dynamically to enhance depth
• Earth fades in and scales up to double the size of Mars

Each action step is precisely timed to create a seamless animation flow.

Why This Is Game-Changing

Previously, creating this level of detail and 3D space interaction required heavy custom code or external tools. Now, with GSAP fully integrated into Webflow, it's accessible and intuitive.

If you're building immersive web experiences for clients, this approach saves time and delivers standout results.

👉 Want to learn more? Take a look at my complete Webflow Expert course on — filled to the brim with advanced layout techniques and animations.