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

Пікірлер: 54

  • @wata1991
    @wata19916 ай бұрын

    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

    @framer.university

    6 ай бұрын

    It's time to learn! :))

  • @Lysergicme
    @Lysergicme6 ай бұрын

    Awesome stuff as always, thanks Nandi!

  • @framer.university

    @framer.university

    6 ай бұрын

    Thanks for the constant support! :))

  • @Lysergicme

    @Lysergicme

    6 ай бұрын

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

  • @DennisUvokeke
    @DennisUvokeke6 ай бұрын

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

  • @framer.university

    @framer.university

    6 ай бұрын

    Glad to hear that! Thanks :)

  • @lydiawere
    @lydiawere6 ай бұрын

    Thank you Nandi great tutorial as always! 🙏

  • @framer.university

    @framer.university

    6 ай бұрын

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

  • @shubhanshmahawar9175
    @shubhanshmahawar91753 ай бұрын

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

  • @framer.university

    @framer.university

    3 ай бұрын

    Awesome, thank you! 🙏

  • @tonjrv
    @tonjrv6 ай бұрын

    Amazing video Nandi! 🔥

  • @framer.university

    @framer.university

    6 ай бұрын

    Thank you 🙌

  • @alxstudent
    @alxstudent21 күн бұрын

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

  • @framer.university

    @framer.university

    21 күн бұрын

    Glad you like this :)

  • @nameislee
    @nameislee3 ай бұрын

    Very great and detailed explain tutorial. Thank you 🙏 ❤

  • @framer.university

    @framer.university

    3 ай бұрын

    You’re welcome 😊

  • @designerscave738
    @designerscave7386 ай бұрын

    Great Tutorial Bro 😎❤

  • @framer.university

    @framer.university

    6 ай бұрын

    Thanks 🔥 Glad you liked it :)

  • @hadiskhalili8915
    @hadiskhalili89156 ай бұрын

    Your videos are super useful😍🙏

  • @framer.university

    @framer.university

    6 ай бұрын

    Glad you think so!

  • @hadiskhalili8915
    @hadiskhalili89156 ай бұрын

    Thank you dear nandi❤

  • @framer.university

    @framer.university

    6 ай бұрын

    My pleasure! :)

  • @mrblack3163
    @mrblack31636 ай бұрын

    best tutorial. thank sir

  • @framer.university

    @framer.university

    6 ай бұрын

    Most welcome! 🫶

  • @user-anum702
    @user-anum7026 ай бұрын

    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

    @framer.university

    6 ай бұрын

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

  • @AndreeMarkefors
    @AndreeMarkefors4 ай бұрын

    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

    @framer.university

    4 ай бұрын

    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.

  • @gaborszalay6669
    @gaborszalay66696 ай бұрын

    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

    @framer.university

    6 ай бұрын

    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
    @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
    @eunicezn73811 күн бұрын

    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
    @eunicezn73811 күн бұрын

    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
    @DanielColeman-ct8qu2 ай бұрын

    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

    @framer.university

    2 ай бұрын

    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.

  • @mashukkhan9033
    @mashukkhan90334 ай бұрын

    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

    @framer.university

    4 ай бұрын

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

  • @ChronicleContent
    @ChronicleContent6 ай бұрын

    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

    @framer.university

    6 ай бұрын

    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
    @MiDoUx9113 күн бұрын

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

  • @framer.university

    @framer.university

    13 күн бұрын

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

  • @dhamithkumara6452
    @dhamithkumara645212 күн бұрын

    🤩🤩

  • @omoyemihassan3835
    @omoyemihassan3835Ай бұрын

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

  • @framer.university

    @framer.university

    Ай бұрын

    Yes! 👌

  • @georgezorbas9036
    @georgezorbas90366 ай бұрын

    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

    @framer.university

    6 ай бұрын

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

  • @memesctm
    @memesctm26 күн бұрын

    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

    @framer.university

    26 күн бұрын

    Pay for what?

  • @apexdigital.studio
    @apexdigital.studio2 ай бұрын

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

  • @framer.university

    @framer.university

    Ай бұрын

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

  • @apexdigital.studio

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

    @framer.university

    Ай бұрын

    @@apexdigital.studio thanks for the insights!