Guide
- Spline
- 3D
- No-Code
Guide
- Spline
- 3D
- No-Code
Guide
- Spline
- 3D
- No-Code
How to Create a No-Code 3D Site with Spline and Framer
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.
Posted by
Nandi
Table of contents
What is Spline?
It’s this super cool tool where you can design and play around with 3D stuff, even if you don’t know a single line of code. You can create these awesome 3D scenes and literally just pop them into your website
You can browse their library for free 3D scenes, copy them into your account, and tweak them however you want, it makes starting out super easy.
You can add interactive stuff, like if you hover over a bunny or an object, it will move. Once you’re in the editor, it’s pretty user-friendly with familiar panels and toolbars.
There are bunch of files ready to remix and use and customize.
What is Spline?
It’s this super cool tool where you can design and play around with 3D stuff, even if you don’t know a single line of code. You can create these awesome 3D scenes and literally just pop them into your website
You can browse their library for free 3D scenes, copy them into your account, and tweak them however you want, it makes starting out super easy.
You can add interactive stuff, like if you hover over a bunny or an object, it will move. Once you’re in the editor, it’s pretty user-friendly with familiar panels and toolbars.
There are bunch of files ready to remix and use and customize.
What is Spline?
It’s this super cool tool where you can design and play around with 3D stuff, even if you don’t know a single line of code. You can create these awesome 3D scenes and literally just pop them into your website
You can browse their library for free 3D scenes, copy them into your account, and tweak them however you want, it makes starting out super easy.
You can add interactive stuff, like if you hover over a bunny or an object, it will move. Once you’re in the editor, it’s pretty user-friendly with familiar panels and toolbars.
There are bunch of files ready to remix and use and customize.
Spline community page.
Spline community page.
Spline community page.
Here let me show you how it’s done, I’m going to remix a community file.
Making the button interactive in Spline
Alright, first things first let’s set up a clickable button.
Pick your button:
Open your spline project and double-click on the button you want to use. Head over to the Layers panel to find the main button shape (it’s probably a cylinder or a simple rectangle).Create two states:
We’re going to make the button look like it’s being pressed.
Base state: This is the default look.
Down state: Move the button slightly down to mimic a press. It’s a small detail, but it makes a big difference!Add the click action:
With your button selected, go to the Events panel. Choose Mouse Press as the trigger. Then, set it to switch from the Base State to the Down State with a smooth easing effect.
Here let me show you how it’s done, I’m going to remix a community file.
Making the button interactive in Spline
Alright, first things first let’s set up a clickable button.
Pick your button:
Open your spline project and double-click on the button you want to use. Head over to the Layers panel to find the main button shape (it’s probably a cylinder or a simple rectangle).Create two states:
We’re going to make the button look like it’s being pressed.
Base state: This is the default look.
Down state: Move the button slightly down to mimic a press. It’s a small detail, but it makes a big difference!Add the click action:
With your button selected, go to the Events panel. Choose Mouse Press as the trigger. Then, set it to switch from the Base State to the Down State with a smooth easing effect.
Here let me show you how it’s done, I’m going to remix a community file.
Making the button interactive in Spline
Alright, first things first let’s set up a clickable button.
Pick your button:
Open your spline project and double-click on the button you want to use. Head over to the Layers panel to find the main button shape (it’s probably a cylinder or a simple rectangle).Create two states:
We’re going to make the button look like it’s being pressed.
Base state: This is the default look.
Down state: Move the button slightly down to mimic a press. It’s a small detail, but it makes a big difference!Add the click action:
With your button selected, go to the Events panel. Choose Mouse Press as the trigger. Then, set it to switch from the Base State to the Down State with a smooth easing effect.
Editing button interaction in Spline.
Editing button interaction in Spline.
Editing button interaction in Spline.
Click Play and press the button. Cool, huh? It feels like it’s really being pressed!
Making the button affect the logos
Now let’s make the button do something—like lifting some logos when you click it.
Create logo states:
Select your logos and set up two states first base state: logos stay in their original position, then up state move them slightly up, like they’re rising when you press the button.Link the action:
Go back to the button’s events panel. You’ve already got the mouse press action, so let’s add one more. Set a transition to move the logos from the base state to the up state.
Click the button again. See the logos move? It’s coming together!
Click Play and press the button. Cool, huh? It feels like it’s really being pressed!
Making the button affect the logos
Now let’s make the button do something—like lifting some logos when you click it.
Create logo states:
Select your logos and set up two states first base state: logos stay in their original position, then up state move them slightly up, like they’re rising when you press the button.Link the action:
Go back to the button’s events panel. You’ve already got the mouse press action, so let’s add one more. Set a transition to move the logos from the base state to the up state.
Click the button again. See the logos move? It’s coming together!
Click Play and press the button. Cool, huh? It feels like it’s really being pressed!
Making the button affect the logos
Now let’s make the button do something—like lifting some logos when you click it.
Create logo states:
Select your logos and set up two states first base state: logos stay in their original position, then up state move them slightly up, like they’re rising when you press the button.Link the action:
Go back to the button’s events panel. You’ve already got the mouse press action, so let’s add one more. Set a transition to move the logos from the base state to the up state.
Click the button again. See the logos move? It’s coming together!
Adding scroll animations for extra flair
Choose Your Scroll Effect:
Select the logos again. In the Events panel, add a Scroll event. This will trigger the animation when the element reaches the bottom of the canvas.Set the Transition:
Link the scroll action to the logos moving from the Base State to the Up State. Adjust the scroll length so it moves smoothly.Fix the View:
To keep the scene locked while scrolling, go to Play Settings and disable Orbit, Pan, and Zoom. This way, users focus on the animation.
Adding scroll animations for extra flair
Choose Your Scroll Effect:
Select the logos again. In the Events panel, add a Scroll event. This will trigger the animation when the element reaches the bottom of the canvas.Set the Transition:
Link the scroll action to the logos moving from the Base State to the Up State. Adjust the scroll length so it moves smoothly.Fix the View:
To keep the scene locked while scrolling, go to Play Settings and disable Orbit, Pan, and Zoom. This way, users focus on the animation.
Adding scroll animations for extra flair
Choose Your Scroll Effect:
Select the logos again. In the Events panel, add a Scroll event. This will trigger the animation when the element reaches the bottom of the canvas.Set the Transition:
Link the scroll action to the logos moving from the Base State to the Up State. Adjust the scroll length so it moves smoothly.Fix the View:
To keep the scene locked while scrolling, go to Play Settings and disable Orbit, Pan, and Zoom. This way, users focus on the animation.
Editing base state of button in Spline.
Editing base state of button in Spline.
Editing base state of button in Spline.
Bringing it into Framer
Time to bring everything into Framer and make it a real website!
Export from Spline:
Click Export and choose Viewer. Copy the embed code.Embed in Framer:
Open your Framer project and drag an Embed component onto the canvas. Paste in your Spline code. Place it in your Hero Section and set it to absolute positioning to fill the space.
Bringing it into Framer
Time to bring everything into Framer and make it a real website!
Export from Spline:
Click Export and choose Viewer. Copy the embed code.Embed in Framer:
Open your Framer project and drag an Embed component onto the canvas. Paste in your Spline code. Place it in your Hero Section and set it to absolute positioning to fill the space.
Bringing it into Framer
Time to bring everything into Framer and make it a real website!
Export from Spline:
Click Export and choose Viewer. Copy the embed code.Embed in Framer:
Open your Framer project and drag an Embed component onto the canvas. Paste in your Spline code. Place it in your Hero Section and set it to absolute positioning to fill the space.
Copying embed for Framer export.
Copying embed for Framer export.
Copying embed for Framer export.
Check it out: Preview your site and see how the 3D interaction fits perfectly into your design.
Making It mobile-friendly
Let’s make sure it looks awesome on mobile too.
Create a mobile state in spline:
Select all your objects and add a screen resize event. Set a breakpoint (like 810px) and scale everything down for smaller screens.
Update the embed:
Replace the old embed code in Framer with this new responsive version. Resize the viewport—everything should adjust smoothly!
Check it out: Preview your site and see how the 3D interaction fits perfectly into your design.
Making It mobile-friendly
Let’s make sure it looks awesome on mobile too.
Create a mobile state in spline:
Select all your objects and add a screen resize event. Set a breakpoint (like 810px) and scale everything down for smaller screens.
Update the embed:
Replace the old embed code in Framer with this new responsive version. Resize the viewport—everything should adjust smoothly!
Check it out: Preview your site and see how the 3D interaction fits perfectly into your design.
Making It mobile-friendly
Let’s make sure it looks awesome on mobile too.
Create a mobile state in spline:
Select all your objects and add a screen resize event. Set a breakpoint (like 810px) and scale everything down for smaller screens.
Update the embed:
Replace the old embed code in Framer with this new responsive version. Resize the viewport—everything should adjust smoothly!
Publish your masterpiece
You’re almost there! Let’s go live.
Set up a Framer subdomain:
In Framer, head to settings > domains and grab a free subdomain (likeyourproject.framer.website).Publish:
Click publish, check that everything works (button clicks, scroll animations, responsiveness), and boom—you’re live!
And just like that, you’ve built an interactive 3D website with zero code!
Publish your masterpiece
You’re almost there! Let’s go live.
Set up a Framer subdomain:
In Framer, head to settings > domains and grab a free subdomain (likeyourproject.framer.website).Publish:
Click publish, check that everything works (button clicks, scroll animations, responsiveness), and boom—you’re live!
And just like that, you’ve built an interactive 3D website with zero code!
Publish your masterpiece
You’re almost there! Let’s go live.
Set up a Framer subdomain:
In Framer, head to settings > domains and grab a free subdomain (likeyourproject.framer.website).Publish:
Click publish, check that everything works (button clicks, scroll animations, responsiveness), and boom—you’re live!
And just like that, you’ve built an interactive 3D website with zero code!
Wrapping up
Look at you, creating a slick, interactive 3D site using Spline and Framer!
Keep it up bud!
Wrapping up
Look at you, creating a slick, interactive 3D site using Spline and Framer!
Keep it up bud!
Wrapping up
Look at you, creating a slick, interactive 3D site using Spline and Framer!
Keep it up bud!
