2023 Award Winner
By clicking “Accept”, you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts. View our Privacy Policy for more information.
February 23, 2024

How To Create 3D Website Designs With Webflow and Spline

Well guys, Webflow has absolutely changed the game when it comes to 3D websites. You no longer need to be a genius to pull these off. In this article, I'm going to show you how I created something as simple as this site with a very cool hovering animation and scroll animation. So, we're going to take a look at how we can accomplish this using the new spline feature.

Alright, let's break it down into bite-sized steps so you can start slinging some seriously slick 3D magic on your own sites.

1) Open up Spline and Select Your Object

Now, if you dive into spline with a completely free account, you have all of these elements inside the library. I picked this weird bubble to create my own scene, but I've dived into it before, so spline is a little more natural to me due to my background with 3D design. If you're not familiar with it, no need to fear because it's quite a simple program to learn and be decently good at without mastering it.

Free 3D Objects in Spline.Design

2) Familiarize Yourself with the Interface

The first thing we're going to look at is that there are all these different elements on the left side, which are our layers or different objects in the scene. On the right side, we have the actual scene itself with elements like light, play camera, and background color. You can change the color to whatever you want, but in this case, we won't need one because this can be exported without any backgrounds.

3) Tweak the Scene Settings

Let's take a look at the object itself. It's just a weird shape with a point light and directional lighting. When you go into export and check the play settings, there are a few different things to toggle to get this kind of effect. Getting rid of the logo and background color allows you to achieve a PNG feeling. Enabling or disabling page scroll is another option. Cursor as well, default orbit, and here comes the cool part.

Learn More Designer Insights From Macu

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

4) Export with Style

When you hit export, ensure that you toggle the right settings to get that clean, PNG look without the background—cause let's be honest, sometimes less is more. By default, the canvas size is set to 1920 x 1080 which could be perfect for exporting this scene as a wallpaper for your computer or phone.

Export settings

5) Interactive Elements

Get those objects dancing on your screen by adjusting Mouse events to Global. This lets your site visitors interact with the objects, putting them in the web-designer's seat.

6) Embed into Webflow

Copy the link of your beautifully edited scene, and simply paste it into Webflow's new layout UI. Type spline command K and drop in that URL like it's hot.

7) Watch the Reaction

Once you publish, sit back, and watch people interact with your creation. It's like throwing a rock into a pond and watching the ripples—only way cooler because it's 3D.

There you have it. You're now armed and ready to jump into the world of Webflow and Spline, creating interactive sites that'll have everyone talking.