3D Scroll Interactions in Webflow

[@stylesraw]

EXACTLY what I was looking for, and concisely put with no fluff. Well done!

[@hoaithuong8088]

Finally found a video talking about scroll trigger for Spline x Webflow instead of Framer. Love it so much, thank you 🥰

[@timothyricks]

So glad to hear this! Thank you!

[@pedrinhosari]

and I can't find the framer version

[@davdfranzen]

This video was a real work of art! You managed to pack so much content into just 5 minutes. I would love to see more of these shorter videos from you. Keep up the great work.

[@juankarlomorales4523]

this video is not beginner friendly💀 but its a 5mins tutorial so its justifiable

[@tshmn]

Oh my god, I was looking for this for a long time, thank you

[@christhedon420]

based TRicks your videos are always so clear and concise. thank you again!

[@timothyricks]

Thanks so much! I’m really glad these help

[@3dkiwi920]

Spline/Webflow would be cool if you could output raw html/css/java, this dependencies bullcrap is out of hand; it's like every website is built like a house of cards.

[@Joilsonday]

Thanks a lot for all the information on this tutorial! I always wanted build something like this, but I never knewd how to start without be a great developer! No-code tools are the bridge in these days.

[@timothyricks]

It’s amazing how easy no code makes this!

[@problemimentali]

amazing tutorial as usual

[@jelenajovanovic1472]

Amazing Timothy !

[@timothyricks]

Thanks so much!

[@ralfsbanders6108]

Thanks Timothy!

[@manuelherk3236]

absollutley sick buddy

[@vasu9760]

Simple, short, on point tutorial, Thanks 🫡👍🏻🙌

[@davidkathrein9644]

Great as always!!!

[@elizabethfreeman1323]

Is there an adjustment I need to make to the code to make the scroll work on mobile?

[@jeronimoserna]

Damn that was cool 👏

[@matheusbelt]

Awesome video and very easy to follow along! I've never used spline and I noticed that to remove the logo it's a monthly subscription, if I only want to use it once for a specific website is there an option to purchase the file or something?

[@andresochoa3040]

Incredible! How did you learn to use spline so fast!? It looks amazing!

[@timothyricks]

Thank you! I’ve been watching their official tutorials which really help. The learning curve isn’t huge

[@Fingfog]

This absolute content man! Are able to do something like this with the same embed file on figma?

[@manuelherk3236]

Timothy I've been trying this with a sphere (wooden ball) but the scroll triggered spin animation is super edgy end not smooth at all and I tried pretty much every setting there is. Do you know how to make it smooth?

[@chermalina]

Good tutorial) But how to make scroll animation duration not in pixels but in % of page or vh? Now you have to make individual animations with different durations for different width of screen, right?

[@timothyricks]

We can use the page or the canvas as the start trigger, but the end offset can only be set in PX currently. Hopefully, Spline adds other unit types in the future. From what I tested though, the px offset seemed to work well for most screen sizes.

[@TheFlamingCookie]

I heard that webflow working on a feature where you can upload 3 object files that you can then animate with interactions, that would be 1000% better, but we always appreciate the content Timothy 🔥 @@timothyricks

[@jjfgh12]

I need some help, how did you manage to have the text float above the spline scene?

[@beta_byte]

Hey Tim could you make a video about how to set lottie animations as a full-width background with other elements on top and make it scale the same way an image does when set to "cover" please? I could not figure it out after spending the whole day searching online although there's many people with the same issue, I'd really appreciate it, thanks!

[@solomonadlam8083]

I need help hiding the background colour it still showing black when i put it onto webflow?

[@ddeenniizz0]

@Timothy Ricks ? How do you learn these things ? Why do you know all the Background information about these Programms.

[@timothyricks]

I watched some of Spline's own tutorials which helped a lot, did some research on Google, and a bit of testing things on my own.

[@Anayaadhikencana]

how do you test the scroll in play mode?

[@timothyricks]

We can’t with this old method, but Webflow released a native spline integration now that works with Webflow interactions and play mode. kzbin.info/www/bejne/hJnXf5afqsiIhacsi=lRo4RwjBSIXoQz6w

[@erhankip1332]

can the samething be done in squarespace? Please help :)!!!

[@GetBack2023Now]

Is it possible to remove the "built with Spline" watermark? I have the most expensive version (Teams) so..

[@dickyjiang]

Hi Timothy, was wondering when bringing the spline object to webflow, what's the advantage of using this route instead of used spline - scene native component, to animate?

[@timothyricks]

Hi, this tutorial was made before Webflow released the spline element natively. The Spline element offers more control by allowing us to animate the element using Webflow interactions.

[@dickyjiang]

@@timothyricks ahh I see, OK then . Thank you 🙌🏼

[@ilya9011]

Amazing tutorial as usual, do you have any suggestions for optimizing this for Safari? Spline behaves really poor there, sometimes it doesn't load the scene at all, sometimes lags insanely

[@TheMezmeriZe]

that's really good, but that 3d element weights a lot

[@Layquins]

Thank you for the tutorial. I want to clarify something. I'm currently using the free plan on Webflow for learning purposes. I plan to create a portfolio for my website using Webflow, which will require embedding some code that requires a paid plan. Once I've paid for the plan and successfully built my website, do I need to keep paying for the plan to ensure my website continues to function with the embedded code, or will it still work even after my plan has expired? Thanks in advance

[@timothyricks]

I think once the code is in the site, it will stay there even after the plan ends. You just can’t edit it anymore. I could be wrong about that, but I know when cloning a cloneable with custom code in it, the custom code still runs on the free plan

[@Layquins]

@@timothyricks Thank you!

[@SugarTouch]

How about change to state 3 after 500px ? :) I mean : how to map page scroll position to different _STATES_ so they change accordingly ? :)

[@מיטליימר]

we need this in framer

[@blasty3661]

How about responsivity? I insterted the embed in Webflow and it looks fine on desktop, but on smaller devices it does not scale like an image. I've tried to set the camera to Perspective and size to Responsive in Spline, did not help either:( Anyone know if it's possible to make it responsive in Webflow?

[@timothyricks]

Good question! Under events, Spline has a resize event where we can adjust the camera for each breakpoint.

[@blasty3661]

@@timothyricks Didn't know about this one. Thanks!

[@vlastimilslechta8927]

@@blasty3661 did it work? I wasnt able to do it with the laptop from Spline library.

[@000SilaS000]

this is spline and it takes 2 hours to load a website like that

[@akodiaemmanuel6157]

Niceee

[@adnanahmedkalyar]

😮