How to make a responsive 3D illustration for Web - Spline tutorial

In this video, I'll show you how to build a 3D scene that can adapt to different screen sizes (desktop - mobile) with the new Screen Resize feature and collaborate with other team members with Team Library.
---
Try Spline for free:
👉 spline.design/
Join Spline community:
👉 Instagram: / splinetool
👉 Twitter: / splinetool
👉 TikTok: / splinedesign
👉 Discord Community: / discord
---
0:00 Intro
0:15 Get started with Spline library
0:48 Modify the scene design
4:10 Set up breakpoints for various screen sizes
8:33 Export
9:14 Web integration
9:33 Collaborate using Team library
---
Other Spline tutorial
• How to design a 3D web...
• How to make a real-tim...
• Design an animated 3D ...

[@LinhLe-ko7yd]

I didn't even know Spline has so many customization features in its lib! incredible!

[@denniswolzak]

Oohh 😲Did not see this feature possible. Thanks for sharing! Good to know

[@Magneticsea]

Thanks mate that looks so fun :)

[@Kimoartcave]

Responsive 3D scene was cool concept. nice and easy in Spline, thank you ❤❤❤

[@cartoonfive]

Super useful walk-through, thanks!

[@achtungachter2581]

I like this video, because its not an indepth tutorial but just a presentation of a tool. I would like to see more of just tool presentations, because my main issue is, that I cannot keep up with all the new tools and sites that offer such services. When Iam hooked, I will then watch the indepth tutorials but not vice versa :)

[@saralagab4036]

thank you so much that was excatly what i was looking for

[@bethechange2024]

Thank you for a brilliant channel on Spline with engagingly informative and comprehensive tutorials. You have a monthly subscriber now🤩🤩❣️

[@fukreybd]

?

[@mrgeni13]

awsome!!

[@mh_kohansal]

that's awesomeeeeee............

[@SAMSAM-ur7kn]

you are awesome !

[@PsychoDude]

Hey. I did this like 2 weeks ago or a bit less. The problem is that it only works when resizing. For example if I am on PC and I scale the window size it works. But if I open on mobile it opens the PC version because I have never resized.

[@zeminem35]

Maybe you should have two separate scenes for the mobile and desktop versions of yor page.

[@feelcollins4358]

@@zeminem35 er I don't know if that's possible, since the 3d scene would overlap in Framer. Once you resize it in Framer from desktop to mobile, the animation in theory should not work anymore since it's switched with the separate mobile version scene you're talking about, it's no longer that desktop 3d animation scene

[@Shane_the_Realtor]

Struggling with the same problem.
Did you find a solution yet?

[@PsychoDude]

@@Shane_the_Realtor no solution at all. they just need to do something for that

[@fatjay9402]

❤

[@sushantossarkar]

Hey, this is a lovely tutorial! I'm facing a problem where after embedding it on my website (made on Squarespace), It was not responsive on the mobile version. Could you tell us how to integrate a separate scene for on a mobile screen (instead of camera breakpoints)?

[@supedup8831]

did you find out how to solve the problem?

[@EnesKab]

Please !!!! We need a full spline course for beginners. Maybe a paid Udemy course?

[@latiolaisgradnigo]

Agree

[@Theorium]

M'azing

[@samagramishra5885]

Very demanding idea - tutorial for a 3d scrolling website using framer/Webflow
just like they do on Dora

[@kaustik185]

You can do that. Theres also a tutorial on youtube. did it yesterday, worked (you mean scrolling interactions, right)

[@cesarerecchioni1046]

is this also possible in webflow now?

[@dasbasl]

yes just use the Spline scene instead of an embed

[@Tusdang]

og la nguoi Viet Nam a