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

[@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! :))

[@diminishedreturn]

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.

[@GrowWithDennis]

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! 🙏

[@Sefko1995]

I love this and I love you for sharing bro. Subscribed 🎉

[@framer.university]

Thank u so much for the support:) more to come!

[@alxstudent]

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

[@framer.university]

Glad you like this :)

[@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.

[@tonjrv]

Amazing video Nandi! 🔥

[@framer.university]

Thank you 🙌

[@BoringKidsTv-jf8hg]

What camera and lens do you use? + what screen recording software do you use post that?

[@nameislee]

Very great and detailed explain tutorial. Thank you 🙏 ❤

[@framer.university]

You’re welcome 😊

[@javeilu133]

Is there a way to use scroll to trigger an animation I exported from Blender and imported into spline?

[@framer.university]

Watch my recent video about “play video on scroll”. It will show you what i’d do in your case.

[@hadiskhalili8915]

Thank you dear nandi❤

[@framer.university]

My pleasure! :)

[@beckystreet7756]

i for some reason can't interact with my spline scene when trying this myself? the scroll event works but i'm unable to trigger any hover or click events and i can't figure out why!

[@Yuki_Blooming]

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]

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...

[@designerscave738]

Great Tutorial Bro 😎❤

[@framer.university]

Thanks 🔥 Glad you liked it :)

[@hadiskhalili8915]

Your videos are super useful😍🙏

[@framer.university]

Glad you think so!

[@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?

[@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. 🫶

[@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?

[@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.

[@mrblack3163]

best tutorial. thank sir

[@framer.university]

Most welcome! 🫶

[@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.

[@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

[@omoyemihassan3835]

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

[@framer.university]

Yes! 👌

[@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?

[@dhamithkumara6452]

🤩🤩

[@terjupi1726]

Spline is now $30 per month. Not so affordable anymore...

[@framer.university]

Times change :(

[@DavidMartens]

spline increased to $24 a month now. 😑 on top of adobe / framer / etc. things are not affordable nowadays lol

[@framer.university]

Uhh :(

[@mulanciani]

you don't talk much about mobile optimization

[@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?

[@vitomansilla]

Spline tutorial and how to embed in on framer lol

[@framer.university]

Yep

[@sillyleo]

Yep

[@johnr39]

oh yes, " BUT I CAN CLICK HERE AND JUST DELETE IT" NO F>>G WAY!! YOU SO SMART! !! OMG! SO WHAT'S THE POINT OF THIS TUTORIAL? TO TELL US THAT YOU CAN BUILD THIS MODEL WITHOUT SHOWING US HOW? holy sh.. all these sheeps like this geek in this video. it's out of this world

[@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!