Building 3D Websites With Spline and Framer (No-Code)
Рет қаралды 40,181
Күн бұрын🎁 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 7 ай бұрын
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 7 ай бұрын
It's time to learn! :))
@DennisUvokeke 7 ай бұрын
Perfect Tutorial, because I have wanted to start learning Spline because 3D is the future. Great work mate!
@framer.university 7 ай бұрын
Glad to hear that! Thanks :)
@lydiawere 7 ай бұрын
Thank you Nandi great tutorial as always! 🙏
@framer.university 7 ай бұрын
Thank you so much! I am glad you found it helpful:)
@shubhanshmahawar9175 4 ай бұрын
Just finished up with the video, you absolutely deserved a subscribe. Well done buddy ! Waiting for more useful content
@framer.university 4 ай бұрын
Awesome, thank you! 🙏
@Lysergicme 7 ай бұрын
Awesome stuff as always, thanks Nandi!
@framer.university 7 ай бұрын
Thanks for the constant support! :))
@Lysergicme 7 ай бұрын
@@framer.university ay it's my pleasure!
@alxstudent Ай бұрын
Am happy to finally seen a correct spline 3D tutorial.. thanks
@framer.university Ай бұрын
Glad you like this :)
@tonjrv 7 ай бұрын
Amazing video Nandi! 🔥
@framer.university 7 ай бұрын
Thank you 🙌
@designerscave738 7 ай бұрын
Great Tutorial Bro 😎❤
@framer.university 7 ай бұрын
Thanks 🔥 Glad you liked it :)
@nameislee 3 ай бұрын
Very great and detailed explain tutorial. Thank you 🙏 ❤
@framer.university 3 ай бұрын
You’re welcome 😊
@hadiskhalili8915 7 ай бұрын
Your videos are super useful😍🙏
@framer.university 7 ай бұрын
Glad you think so!
@mrblack3163 7 ай бұрын
best tutorial. thank sir
@framer.university 7 ай бұрын
Most welcome! 🫶
@AndreeMarkefors 5 ай бұрын
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 5 ай бұрын
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.
@hadiskhalili8915 7 ай бұрын
Thank you dear nandi❤
@framer.university 7 ай бұрын
My pleasure! :)
@gaborszalay6669 7 ай бұрын
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 7 ай бұрын
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-anum702 7 ай бұрын
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 7 ай бұрын
Thanks! Of course! I’m always open for great suggestions. Can you share an example?
@user-ke1jb5fz6g 2 ай бұрын
Hi ,is it possible to make video on how to create tracing animation on letters(like ABC Learning kids app), using spline or framer?
@DanielColeman-ct8qu 3 ай бұрын
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 3 ай бұрын
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.
@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. 🫶
@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...
@dhamithkumara6452 Ай бұрын
🤩🤩
@ChronicleContent 7 ай бұрын
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 7 ай бұрын
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
@mashukkhan9033 5 ай бұрын
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 5 ай бұрын
Can’t say anything certain. I haven’t used WP. What I know is that it works in Framer perfectly.
@omoyemihassan3835 2 ай бұрын
Is it advisable to use framer to buil a wen agency website
@framer.university 2 ай бұрын
Yes! 👌
@vitomansilla 18 күн бұрын
Spline tutorial and how to embed in on framer lol
@framer.university 17 күн бұрын
Yep
@georgezorbas9036 7 ай бұрын
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 7 ай бұрын
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 2 ай бұрын
Great tutorial! The only problem I have in integrating Spline 3D into Framer is the responsiveness.
@framer.university 2 ай бұрын
It is definitely a tricky part. The best you can do is use the in built feature in Spline.
@apexdigital.studio 2 ай бұрын
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 2 ай бұрын
@@apexdigital.studio thanks for the insights!
Toni Järvinen - Design Tutorials
Рет қаралды 11 М.