Designing a 3D website with Spline and Framer

Hi! In this tutorial, you will learn how to create a 3D website using a 3D glass scene made in Spline and integrate it into Framer (web builder) to create and publish a fully functional website.

0:00 Introduction
0:33 Creating the spheres
1:40 Adding the materials
2:52 Making the glass
7:50 Exporting the 3D scene from Spline
8:26 Importing the 3D scene into Framer
10:00 Adjusting the website composition
11:30 Adding Orbit on hover
12:25 Final adjustments

[zunairahmed]

Wow! I used to think adding 3d interactive elements to a website was as hard as it seems, but after I became familiar with Spline, I was amazed how easily you can add 3d interactive objects to any website! Thank you for this video!

[DataJuggler]

I've never heard of Framer. Off to find out more about it.

[krashvash]

Sooo cool, just what I was looking for so I can embed my 3D models in a website.

[fedetanga]

Awesome, I'll try it in my next web project ⚡

[opeyemiadewusi]

Thanks for the tutorial I will try my best to make one

[mneypit]

With my experiments with using glass like transparencies, you have to have the background color visible when exporting. However, when you preview the spline in the mock up of the webpage there is a difference in the color between the website background color and the spline embed background color. (Even thought they are set as the same color). Can this be taken away when the site is developed? (It is very noticeable when using Anima with Figma for example).

[jakubhladik]

Can you export as a Lottie animation?

Many websites visitors have over 50% traffic from mobile. The using 2 fingers to make something move seems too gimicky on mobile.

I can see myself using this tool a lot if I can make these 3D animations scroll based or time based.

Either by exporting to Lottie or if Spline has scroll based controls built in that would be even better. (But since I’m already familiar with how to handle Lottie in Webflow it might be easier to learn for me.

[EntropyDiffusion]

Thank you so much! Awesome glass mat)))

[cosmosunited]

can I click on the spheres and open another page? or a html link? or a video etc.

[remonmabunay]

How did you make the orbit from the object and not the camera?

[lauren]

This tutorial was so much fun to follow along and learn thank you! ✨

[dearoren]

Can you fix mouse events on Windows? When you open tutorials library files and try to interact with them, even on Chrome, the mouse events do not work.

[design]

I am having trouble to keep the same effects when removing the background. It kind of darkens the glass inside

[gabrielegelfofx]

is it possible to interact with Spline animations and materials within Framer?

[CookieCaty]

Is there a way to dynamically adjust the radius of the sphere based on values from your website (eg. get numbers from an api and set it as the radius for one of the spheres)

[Nuuuuuk]

How can I scale the 3d scene embeds at different breakpoints just like you? In my framer its size can be edited, but internal 3d content remains the same at different breakpoints🥺

[qwerty]

But the Spline is paid ... more than 300 euro / year

[Ajay-wzcu]

When I drag the sphere from material assets "Import or Drag & Drop" pop up will appear every time 😮

[EntropyDiffusion]

Can i see a tutorial on building a simple framer-website like you have in the video?

[juanbenja]

If I work with a touchpad, no a mause, how can I move in the menus?