Building 3D Websites With Spline and Framer (No-Code)

🎁 Apply the code "FramerU" when upgrading your Spline account to Super. You'll receive a 30% discount on your Yearly subscription.
Check Spline 👉 spline.design/
Discover, remix and showcase 3D creations #MadeInSpline at community.spline.design/
-------------------------
🎓 Framer University: framer.university
👉 Create a free Framer account: framer.university/free-account
In this tutorial, you'll learn how to create an interactive 3D website using Spline and Framer.
I'll show you how to use the Spline library to get free 3D assets for your website, then we're gonna learn how to customize and add interactions to these 3D scenes, and then at the end we're going to integrate our interactive 3D scene into Framer.
With the help of this video, you'll be able to create your 3D website without any coding.
→ Unedited Spline File: dub.sh/unedited
→ Edited Spline File: dub.sh/edited
→ Framer Project Remixes: framer.university/resources/i...
0:00 - Introduction
1:10 - What is Spline?
1:46 - Using the Spline library
2:28 - Spline basics
3:37 - Customizing the 3D scene
9:18 - Specifying a custom camera
12:23 - Adding a cursor follow interaction
15:30 - Adding button press interaction
18:55 - Adding 3D scroll animation
20:25 - Exporting the scene into Framer
25:35 - Making the 3D scene responsive
27:50 - Publishing the website
28:45 - Closing thoughts
Join the Spline community:
Instagram: / splinetool
Twitter / X : / splinetool
TikTok: / splinedesign
Discord Community: / discord
Follow me on:
X: x.com/learnframer
Instagram: / framer.university

[@wata1991]

framer and spline are the two tools I would love to spend more time to learn. I guess I have no choice but to watch this :)

[@framer.university]

It's time to learn! :))

[@DennisUvokeke]

Perfect Tutorial, because I have wanted to start learning Spline because 3D is the future. Great work mate!

[@framer.university]

Glad to hear that! Thanks :)

[@lydiawere]

Thank you Nandi great tutorial as always! 🙏

[@framer.university]

Thank you so much! I am glad you found it helpful:)

[@Lysergicme]

Awesome stuff as always, thanks Nandi!

[@framer.university]

Thanks for the constant support! :))

[@Lysergicme]

@@framer.university ay it's my pleasure!

[@shubhanshmahawar9175]

Just finished up with the video, you absolutely deserved a subscribe. Well done buddy ! Waiting for more useful content

[@framer.university]

Awesome, thank you! 🙏

[@alxstudent]

Am happy to finally seen a correct spline 3D tutorial.. thanks

[@framer.university]

Glad you like this :)

[@nameislee]

Very great and detailed explain tutorial. Thank you 🙏 ❤

[@framer.university]

You’re welcome 😊

[@tonjrv]

Amazing video Nandi! 🔥

[@framer.university]

Thank you 🙌

[@hadiskhalili8915]

Your videos are super useful😍🙏

[@framer.university]

Glad you think so!

[@designerscave738]

Great Tutorial Bro 😎❤

[@framer.university]

Thanks 🔥 Glad you liked it :)

[@AndreeMarkefors]

When setting up "responsive sizing", the button 'auto zoom' stood out to me. I have a feeling with that option on, you wouldn't have to go through the last step of "optimizing" for mobile? Auto zooming sounds like the scene would auto-resize when embedded as responsive.

[@framer.university]

I am not sure! Maybe! But even then, you can make more customizations with the custom breakpoint setup, and you have full control over how your scene changes on different screen sizes.

[@mrblack3163]

best tutorial. thank sir

[@framer.university]

Most welcome! 🫶

[@hadiskhalili8915]

Thank you dear nandi❤

[@framer.university]

My pleasure! :)

[@user-anum702]

Thank you so much for this awesome content. Here is a request, can you please make a tutorial on overlapping cards effect. Would be a great help. Thanks😊

[@framer.university]

Thanks! Of course! I’m always open for great suggestions. Can you share an example?

[@gaborszalay6669]

Nándi, nagyon jók a videóid, sokat tanulok belőlük. Figyelmedbe ajánlom a Dora nevű 3d website készítő platformot, igaz, hogy a Framerre nincs szükség a használatához, de nagyon látványos weboldalakat lehet készíteni vele. Szívesen vennék a platormról néhány oktató videót, persze csak ha van kedved hozzá :)

[@framer.university]

Hali! Köszi szépen :) Hallottam mar a Dorarol. Eddig nem próbáltam mert feltételeztem hogy amit abban lehet, azt valószinuleg Framerben is. Ja meg persze elvegre Framer University a csatorna neve, szoval leginkabb Framer videok lesznek, de ha van valami ami szorosan kapcsolodik a Framerhez szivesen csinalok rola videot.

[@user-ke1jb5fz6g]

Hi ,is it possible to make video on how to create tracing animation on letters(like ABC Learning kids app), using spline or framer?

[@eunicezn738]

in framer when i embedded the spline scene, there's no "fit content" in my size panel, can u pls advise me how did you open up this button?

[@eunicezn738]

the scroll function doesn't work when import the spline scene into framer, only the mouse press feature works in framer when preview, do u have any idea on what's the problem is? it works when preview in spline but not in framer...

[@DanielColeman-ct8qu]

i love the tut however i still have issues optimizing the speed for mobile and lower end devices. Its either really slow on devices with poor graphics cards or it's slow without a really good internet connection. is the solution creating fallbacks or changing export options?

[@framer.university]

You can maybe create a mobile optimized version, perhaps removing the whole scene and replacing with an image. If your scene is really heavy, you can also export as video as it will be more performant.

[@dhamithkumara6452]

🤩🤩

[@mashukkhan9033]

That was good information. Thank you very much. I am just wondering is this embedded link work fine with WordPress or not ? Both framer and WP are CMS as much i kwow.

[@framer.university]

Can’t say anything certain. I haven’t used WP. What I know is that it works in Framer perfectly.

[@ChronicleContent]

can you show how to deal with backend on framer? like sign up, payments, use of openai api, use profile, internal dashboards etc.

[@framer.university]

You can’t do too complex things with Framer. You can use custom code components to create custom functionalities though. If you need user login and gated content, this is the solution i use: www.outseta.com/guides/how-to-build-a-membership-site-with-outseta-framer

[@MiDoUx91]

Spline prices have changed since :( now its starting at 30$. thank you for the video btw.

[@framer.university]

They added so many new features. This increase in price was expected, and is totally fine. 🫶

[@omoyemihassan3835]

Is it advisable to use framer to buil a wen agency website

[@framer.university]

Yes! 👌

[@vitomansilla]

Spline tutorial and how to embed in on framer lol

[@framer.university]

Yep

[@georgezorbas9036]

You should explain slower the part of making responsive the export at 26:00 and the steps to become a little more clear.. if the point of your videos are to help people that don't know coding and deep details.

[@framer.university]

What exactly wasn’t clear? Did I miss something?

[@memesctm]

Thanks, one question, from What country do you pay 💰? from I live, i pay 30 dolars for one month, and now, I can see u can pay 6 or 7 dolars 😂😂😂😂😂😂😂😂😂😂

[@framer.university]

Pay for what?

[@apexdigital.studio]

Great tutorial! The only problem I have in integrating Spline 3D into Framer is the responsiveness.

[@framer.university]

It is definitely a tricky part. The best you can do is use the in built feature in Spline.

[@apexdigital.studio]

I actually discover something and managed to make the spline 3D responsiveness works when it is not using the full width of the website. Let's say you embedded a 600x600 px 3D element within your page. In the Event, instead of putting the usual screen resolution, you need to define the actual pixel of the element. Eg. Mobile = < 301 | Desktop > 599 Then your second State, you set the element to 0.50 scale, so the element will shrink down on the page where you set 300px width like mobile.

[@framer.university]

@@apexdigital.studio thanks for the insights!