Transcript for:
Integrating 3D Animations with Spline

[Music] hello and welcome to this webful live stream my name is Aaron corbut and I'm so excited to be back with all of you you at our regular 100 p.m Eastern Wednesday time slot thank you again for coming back uh it's been a while we went on webflow comp and I met a lot of you and I'm excited to see you some of you anyway virtually here on the webflow live stream extremely excited to be back who do we have in the chat drop me a Hello in the chat if you've never joined us before you can go ahead and chat uh in the little chat dialogue if you don't have access to it uh you have to think create a YouTube channel so on the top right in the profile create a channel but but super super excited to be back we've got a Prem we've got Isabel Isabel how are you uh Hamza hello welcome to joining us on this stream where we're gonna talk about spline so we talked a lot of new features at webflow comp one of the ones that got you know you all most excited and we saw it in the chat before we joined is 3D animations on website so I am super excited uh to have Gabor W from the spime team joining us today to show us how spline Works show you how you can add 3D to your websites in webflow and how to animate those 3D scenes directly in webflow so that's our goal for today giving you you know everything you need to get started with spline and build in web flow so we got some more folks hadie welcome Silas welcome hopefully I'm saying your name right welcome from Germany appreciate you joining at this hour speaking of someone who's joining us at a late hour without further Ado I'm super excited to welcome Gabor Gabor welcome welcome to the webflow live stream how are you hey I'm doing fine thank you yeah welcome everyone yeah it's it's like a pleasure to be here I met Aaron and all the webflow team and lots of webflow creators in the conference previously in London and New York and yeah it was super exciting so yeah I'm looking forward to this session so it was great meeting you thank you for traveling with us uh to all the cities thank you to everyone who joined us in those cities and a lot of those uh in the chat so Gabor we're going to jump into what is spline we're going to start building but for folks who maybe you know aren't familiar with spline how about we start there what is spline yeah sure for so basically spline is an easy to ous 3D design tool that allows real-time collaboration directly in your browser that means that you can go into the editor through the browser and create 3D content but these 3D contents and results that are possible to make with spline are not just prototypes but they can be production ready interactive web- based experiences so you can easily integrate them into your websites like through webflow for instance which we will walk through today and there's also a huge amount of possibilities with this like you could be Building Product showcases interactive experiences you could build some fun mini games or you could just use it for your branding and we also recently launched a very fun feature called 3D Goan Splats yesterday so I recommend you to go check it out too so yeah that's it from aming I'd love to know in the chat if you've built something with spline in a webflow website already go ahead and drop it in the chat I'd love to highlight some throughout the stream right so if you've built something go ahead and drop it in the chat I know folks like Diego have been playing with spline I saw that on Twitter so thank you all to the community for kind of you know showing us what's possible so uh Gabor we're going to go through kind of the basics of spline we're going to go through integrating um where do you think we should start right so we're going to jump into web flow or spline here in a moment but set us up here where should we start and how should we go about learning spline yeah so why are we doing all of this like uh we would like to show you how you can create a very simple 3D experience that can be embedded into your website and for this P specific experience we were thinking to make a simpl to build scene that could be used for representing your brand uh you know with a very like abstract kind of shape shape so I would recommend to maybe just jump straight into the example that we have been preparing and uh just walk through it so to see what does it mean and what we could be building with it okay so let's go into the screen share you know I'm a big fan of just jumping in let's start building so I'm here yeah we've got this little uh uh little you know I don't know what we're g a hairy ball that we're going to call this so for folks who want to either follow along who want to copy this for later in the description there's a link to the Community page and that has the in web flow link to this and it has the spline so you can copy that you can start playing with it but our goal if I understand you correctly Gabor is to recreate this uh uh and we're going to call this you know the hair ball that's what that's what people are so what do you see as a spline designer when you look at this like how do you dissect this how should I think about this yeah so basically um this website is kind of like an IM website like imagine it as like a blank canvas for your kind of ideas and we try to Showcase how the integration could work and for that we used the very prominent uh like visual kind of representation of this hairy ball in the hero section we also made it interactive and this hairy B is consisting of like thousands of little hairs like simple Cube shapes basically that are cloned along the surface of the sphere and we also animated it but what we wanted to also make it a bit more immersive and for that there are some kind of mouse events and scroll events uh linked to this object so when we scroll we zoom on to the object and with that we can give like a background to our content on top of this uh object so it's more readable um yeah and um it's quite interesting you could scroll all the way uh down throughout the website um yeah and the perfect thing about like using spline and web flow is that you can actually sync up this scroll event and the spline animation to match your 2D interface and your 3D content and create like a seamless experience okay so we have a ball we have hairs we're going to kind of color those hairs bring that into webflow and then use web flow animations to line up the spline with uh you know what we want it to look like or what kind of level of Zoom or scale we want on webflow so I'm also realizing my voice is I'm losing my voice we both have a cold today so if I uh my voice sounds different that's why okay so where should we start you know we have the ball we have the hairs how do we I would recommend just to jump straight into spline to the editor and start building this scene like uh the very first thing that we could do is actually recreate this little hair object okay and then start from there okay so let me I'm here so what I did before I just went into spline I created a scene yeah and you know this is where folks would start I you know talk to me about this interface how should I think about spline yeah so in spline basically when you create a scene you have a kind of an empty viewport you have a like basic primitive shape rectangle in the middle of your scene and the directional light for you to just get started and on the very left side left side bar you can actually see this object so you could just go and remove the rectangles because that we don't need that so if you click on it yeah you can easily remove those objects and there all the objects you are creating they will be visible on the left side and when you have selected them you can see that on the right hand side on the right side bar there are all sorts of parameters that you could tweak and play around with to actually adjust your objects but you also have the possibility to directly manipulate it in the viewport itself and on the top we have like a toolbar with some basic shapes that you can use to get you started like a cube or sphere or pen tool so you can like build your objects and uh use some booing operations or some basic modeling so yeah there are plenty of like tools for you to get started and uh if you're a first-time spine user I also recommend you to get used to the camera usage right like uh eron you are using the mouse right yeah so you can use both The Mouse and the trackpad there are some gestures and hints like how you can like uh yeah easily rotate around the scene and uh kind of like translate from the 3D view even to a 2d view if you need to have like very like frontal view because you are dealing with some PR precision and some some detailed editing I'm worried about getting people kind of you know car sickness because I'm not I've been practicing but I'm not the best just yet I saw you practice and it's much quicker we have this 3D which is kind of different from working uh you know in 2D which is a little different but okay so we we've got a sense of what we look like we've got our CSS properties on the left we've got our HTML on the on the left and we've got our different uh uh elements at the top how do we go about uh um you know starting because I don't know how we get from this to you know this yeah so to be able to create that we should be creating a cube for first and then uh maybe we should be creating like a r prototype of our concept which would be just creating the little hair which is a cube and then clone it uh on the surface of a sphere and so for that I would ask you to just start with a cube object on the very to top toolbar right here Cube yeah got it so drop a cube let me drop it here okay we've got our little Cube um okay so yeah and for this one uh we use the specific size to be able to have this kind of hair effect we should be using like uh other dimensions for that one you could either like manipulate the object in the viewport itself as you have been dragging it already with the Bing boxes but we know that we need a specific size of a cube that's like 10 by 100 by 10 so at the shape property you can directly input yeah the size okay so we want it to be let me just see 100 what does that give us like that okay so that's the width on X so maybe we want a a th000 here on y maybe yeah there we go something a little higher maybe that's too high 500 just 100 yeah like 10 by 100 by 10 oh 10 okay got it got it let's SC this down so 10 by 100 by 10 okay let's zoom in I'm using yeah I'm using uh the little command oops Yeah and you can see that that by default we have uh some kind of like Corner radius applied on the cube but we don't need that for this one because we are going to clone the cube like many times and we want to make sure it's uh efficient and uh the more corate radius you have the more polygons the object will be consisting of which will be like resulting in a high resolution object uh but for now yeah we have the the cube object and I think uh if you look at the example we actually have kind of a hidden sphere in the middle of that scene I would like you to create that sphere okay roughly in the same size uh okay so at a comp to the yeah I'm a professional yeah it's it's pretty similar to creating just a cube right so you just click there or drag it in the viewport and and what kind of size do we want so if this is 10 by 100 by by 10 do we want this to be 20 by 20 by 20 oh that would be very tiny right like we would like to make uh in proportion if look at the example the the hairs are smaller and the sphere is pretty huge so we could be looking into something like thousand by thousand by thousand uh so for the X and Y and Z we can create like a uniformly scaled sphere and there we go let's zoom out Okay so we've got our sphere yeah and I've got if I hide okay it's right here right so hide that and I've got my little cube in the middle uhhuh yeah and now actually you have the cube selected and in order to be able to achieve the effect that we have on the scene right like we have more than 1,000 little hairs uh like cloned on the surface of the sphere previously you would have to actually manually go and copy paste those many objects and then place them you know one by one which would be like a very tedious work to do so but luckily we have a tool that solves for this case which is called the cloner so you can easily clone these little hairs on the surface of the sphere by actually turning out that tool yeah that one there right there so we're going to clone this little tube onto the sphere multiple times then kind of position it somehow yeah maybe for demonstration purposes you could like turn off the sphere for now and zoom in on the cube itself you can see that by default it's like applying a linear clone if you start dragging the oh right here yeah if I start doing this okay yeah so I see we're cloning Cleary cloning but we would like to have a different kind of pattern right like we would like to use the sphere so at the very top in the cloner section you have an option for that like for the type you could specify an object that you want to actually yeah that one right okay so we saying let's go ahead and take the Clone type object and then clone onto the sphere yes oh cool exactly oh pretty cool but actually um we should um I think we need to adjust it slightly if we if you look at our like final result yeah I think theere sphere is the sphere should be slightly smaller right but um we should also probably align those little clones so they actually stick out from the sphere okay so this hairy ball effect to make the sphere small let's make it let's say 250 by 250 so I went into sphere I went into size which is a property okay that feels better maybe we'll we'll adjust that and then yeah you're right we're kind of wrapping the Clones onto the sphere how do we make them stick out yeah for so for that we need to change the orientation of those cubes so just select the the cube itself and uh there's a property oh actually you can turn back on the Spheres because otherwise we won't see okay so here oh axis the axis of the Clone so that was y oh there we go ha yeah y nice and uh so in the final result we see that we have much more volume and much more objects right so we can just easily crank up the Clone amount there's a specific property for that right so yeah the count so let's do what like 500 okay I even more 1,000 yeah because these are pretty simple shapes uh yeah there we go we can we can go more crazy about it yeah if you have more complex shapes then you have to be more conservative with the Clones but these are just cubes so it's pretty fine there all right um so yeah it feels like a little that these are not as randomly placed yeah that's right how do we does that make sense like it seems like this is a little more uniform in terms of placement on the sphere how would I go about do you think like we should randomize like what do you think is the next step to kind of get this a little closer yeah so in order to be able to to randomize their position rotation or scale we have a specific tool on top of the cloner which you can find in the right side bar it's called the randomness okay and with yeah with that uh yeah you can basically just start randomizing those objects uh with different kinds of properties and I would recommend you to because you you have you you seen in the example that their their y position is actually varied right so we would like to play around with the Y position and Y scale properties in order to have this more hairy effect okay so what we want to be randomized is the sca the Y scale and the Y position so we want some of them to be a little lower and then some of them a little higher so for so do I set okay here we go so I just increase the r like the oh cool oh yeah yeah you're getting there yeah okay and then maybe just a little bit on the position because that that's just kind of accentuating the randomness of the Y because it's going into and out of the sphere that's maybe a little too much how does how does that feel we're not going to get exactly close but close enough yeah I think it's pretty cool and uh cool if we look at the example that that we prepared we see that uh there's much more interesting color applied we did a trick there where we made a sense of depth and kind of like it's uh getting darker towards it it's like lower end like let me zoom in closer tohere yeah yeah yeah like blue in the middle and then kind of pink on yeah with my summary knowledge of colors uh okay so in like a traditional 2D tools you have a typical like gradient um kind of option where you can go from color a to color B but for spinee we have something called the 3D gradient or in other words it's called the depth material layer which allows you to actually do these kind of transitions with the colors on your object which is uh pretty fascinating U to play around the the gradient is going to be on our hairs which will kind of be affected to the sphere so we should apply that gradient to the base Cube correct exactly yeah yeah right so if you have the cube selected on the right hand side you see that there is a material section that's where you can play around with material layers scroll down a bit yeah we have a basic like light which will influence the appearance of your materials and You by default it just has a boring gray color but uh we would like to make it more fun so for that you could just actually click that little drop down on the color uh kind of U right here not not that the second layer I mean the theor layer color yeah you're totally right sorry yeah who and the drop down you can you can change that layer to something different because we don't know the color don't need the color one but we would like to play around with the depth that's okay yeah so kind of that gradient style okay cool cool so I went into I changed the type of material that we're applying to depth yeah and then by clicking here I have all of the different options okay now me as both a design Noob and a sply noob I'm going to rely on you how do we how should I even think about everything here all right so basically um as I mentioned the analogy of 2D gradients this is pretty similar but you you can think about it in the 3D space right like that's why you have those controls there which you can play around with so basically right now you don't really see the effect because U it's like cut off you would need to actually drag uh its inner radius so actually the gradient is applied more towards the object and for that there's that little triangle um right little yeah that one right and that one you need to drag all the way towards the very center of the cube oh the center okay we want that to be applied to the like we want that gradient okay cool yeah yeah so we see that the gradient more yeah yeah you can drag it all the way towards the center and then the other end is also out of the view right so that means that it is only capturing a tiny part of the gradient itself so for that uh yeah that one okay got oh I can see now that the black is coming to the top because I'm I'm pushing the edge of the gradient in so it's very wide in the middle and what how about we set some colors so we folks can kind of see what should so the middle we're going to try to get us Clos so the middle what is the middle looks blue what would you def like how do I find that color yeah so for that you can just use the color ramp and and use some kind of U yeah let's try to play around with it and and pick a color there yeah uh it's getting there I think we might need a more like uh kind of towards the pink or red uh for for this initial color because this is the the the main color right mhm and then towards the ends we have like a darker color applied and uh that one could be more dark uh or even darker yeah you can you can drag that that down bit towards the black so it has the sense of depth when we will clone these objects nothing terrifies me more than picking a color in front of 50 designers I'm sure people if you have thoughts about the color let me know in the chat I am I am all yours I do not have a strong opinion here this is something yeah yeah we can always adjust in post too that that's the fun part about it so just get the RO idea there and um yeah I would recommend you to get it even a bit darker maybe on the on the end yeah let's go yeah here let's do that what you could do now is maybe you could turn on the cloner back or the sphere itself back its visibility so we see the result on the sphere and we can start playing around with these colors there directly okay so we can look we can keep playing with the but see what the impact is on the actual sphere exactly yeah okay got it now it looks like we have a little more pinkish at the end and blue in the middle yeah I think we we we made it the wrong direction so you could just flip those two colorant so it's dark towards the end and bright towards the outer part can we just take a moment to appreciate this little this little animation right here where when you flip it yeah I feel like that's a design Award right there that's really cool okay so let's flip those to you uh okay so now it does look pinkish and much darker in the middle so I think we're getting closer but it feels like there's something about the sphere that radiates out this blue right I don't want to spend you know 30 minutes here but let's get maybe one more thing closer and then we can do the little the little bringing into web flow yeah I think one one more easy trick you could do is to give the sense of the depth more prominent is that also change the color of the sphere itself in the middle okay so sphere we're going to go into material I've been following yeah just a simple color yeah it could be a simple color and you can just use the Color Picker uh and maybe pick or yeah or do it manually too yeah the the dark gives it a little like a black kind of gives it a little bit of reality if you will right it feels like there's something there so that feels about right I think let's continue here and then you know once we've brought it into webflow we've done our little animations we can play around as you call Post which I like this idea that there's a production and a post-production um okay so what else do we you know when I look at this okay there's a few things that are different right we don't have that little up down movement um we don't have it in web flow we don't have the animation what do you think we need to do now so like what what sequence of steps should we take here yeah I think um there are a couple of things missing right like one is animating these objects so they feel more organic like this hairy ball feels much more organic and then two would be actually embedding and bringing it to web flow so we can give a rock sense of how does it feel like and look like in our template that we prepared okay so let's first start with this what looks like animating the hairs you know having them grow and grow back and then will import into web flow or bring into web flow so how do I say hey I want you little this little dude to go up and then down and then up and then down permanently yeah so for that basically if you scroll down the cube is selected and you scroll down to the randomness section we have kind of a little magic property called the movement yes which will apply the noise uh in different kind of ways which will result in different Randomness right and we would like to basically animate this parameter from one state to the other one and create a continuous loop so it's being animated continuously and we will get this seamless kind of Animation which will just make it so we want to have a like a like you know Step Zero is one and then step two is two yeah and then back to one and then back to two okay okay that sounds right so let's maybe set it to two maybe even like one 1.5 and how do I say okay start here and then go to two so every object has States right if you scroll to the very top it's pretty similar to how web Works uh you could Define two different states uh to your object if you click on that little plus icon at the St State section and now you have the base State and the second state the second state is automatically selected for you so now you can go forward and adjust the parameter because the base State saved the initial value we had it like 1.5 is and for the second state that you just created you can go and crank it up to something like three or yeah this is something that you can always play yeah let's go let's go three yeah sure let's just input three that feels about right and then okay so base State we have 1.5 State we have three how do we go say okay go from base to State back to base back back to State yeah so for that we have uh something called the event system which can actually transition between these two states for the events you could just create a simple event there are plenty of events uh but for now for today we would just like to use the very simple event that's called start which will actually when you start this scene and you play this scene when it's embedded somewhere it will initiate some kind of action and we have plenty of actions like you could uh do things like play a sound or I don't know create an object remove an object but we would like to use the transition one right so we can easily transition between the two states okay so we're saying start this event you know not on any kind of things that happen in the scene itself just yeah like page load would be the equivalent you know in webflow then we want to what we want to do is transition in states of the cube so and yeah we should we should there like pick the two states we want to transition in between so the very first one transition between the two states okay so uh we lost uh Gabor for a second but gabor's back everyone you can see in the chat every it's okay all right you know he's very kabore is 7 PM where he is he's very late we apologize for that but we are back uh okay appreciate everyone in the chat appreciate that okay so where we lost you we said our transition is going to go from base state to state there's by default a kind of delay right uh we don't need the delay right so we should just actually tweak the property in between the base State and State which is saying one that means that it's like transitioning for one second oh so this right here is the duration so maybe like s seconds right here yeah so we could also yeah we could also change the ease out and ease in to linear because we would like to create a seamless Loop so there's like no easing at the end and the beginning of the transition okay so we're saying take s seconds transition between m1.5 and M3 linearly and then we want to Loop infinitely infinitely for sure yeah and the cycle right we want to ping pong right so yes so it can go back and forth yeah okay how do we Okay let do we just close out and play yeah you can just go ahead and preview with it with the play cool right that's really cool actually let me see if it Maps Okay that actually Maps this one feels a little slower so just a tad bit slower so maybe we just go back and let's give it nine seconds okay there we go let's play that okay that feels about right we're very close to this okay do you feel like we're ready to bring this into into web flow yeah I think the fun part about the web flow integration is that at any point of time you can bring it there and if you forget about something you could just go back to spline and do some updates and push an update and so you can iterate with the help of both tools right for your thir goal so right before we export I forgot to tell everyone there is a discount uh in the description web flow friends for spline also at the top of the chat you can drop your name uh your email so you can be notified about webflow live streams also it adds your name to the stream credits uh which are always a lot of fun so make sure to do that uh okay so let's how do I prepare this to be importable or bring into webflow yeah so in order to bring it there we need to use the spline integration on webflow which requires uh kind of a URL of your scene an exported uh URL that uh can be copy pasted to webflow and then it will be there so for that yeah we need to go to export it and within the export we have bunch of options but for this specific integration we should be using the viewer the second option on the left side bar and now we generated the URL for us which is the very top URL which you can yeah just simply copy and bring it to webflow so now if you would jump into our webflow environment of course whoa it's okay I'm I'll take a minute here I apologize here let me go into you're gonna have to say a joke or something all right give me two seconds is hiding his password yeah he don't have access to all of the cool templates he has exactly let me go into here all right we're very we take SE security very seriously here at web hello okay we are back look at that shout out to the IT team for making that very easy uh awesome all right so let me go ahead and I what I already have set up here is I have uh in the main container I have a sticky element which is where I want to place the spline in bed right so let me go ahead and add spline spline scene now Vlad did this live on stage Vlad is much better at webflow than I am so do not expect as many jokes or as good of a flow uh uh okay so how do I go about adding spline the one we just created Yeah so basically the this kind of uh spline embed uh yeah has an URL property and that's where you just need to Simply paste the URL that we grabbed from spline right right here let's bring that in okay okay there it is okay set some I think we had a some some okay we just set with 100 absolute so it's kind of uh stickies there we go yeah so it's always little yeah the little gray how do we remove that yeah so by default it actually applies background from spline right and we should be turning it off on the spline side where within the export options I forgot to mention that when you are exporting your spline scene you have bunch of options that you can tweak to actually adjust the behavior of your spline scene and in the play settings we are searching for that specific setting called the background color where you can just quickly hide it and now you need to push an update which is the big blue button at the top and with this we actually updated our Ste and we should be seeing the result in a second if we reload it on weow cool yeah the background got removed yeah okay so if okay that was actually wow that was actually relatively simple so what I did there is I updated the viewer on the spline side I reloaded the scene in webflow so now we have our floating a hairball uh uh now the difference is okay so let's we don't see the little if I if I preview this will I see the little oh we do see the little okay so we do have our events from spline they only appear when we're in preview mode so we do have the hair so now what we want is we want to adjust zoom in or make the ball bigger as we scroll in how do we go about doing that um yeah for for that I think we should actually adjust the composition slightly in spine because we see that it's slightly off like it's in the middle but it's not as immersive as in our example that we prepared and for that we actually just can tweak the camera on the spine scene to make it align more in that kind of yeah angle and direction that we need to yeah yeah right now we're like we are looking at the ball from afar we want to kind of be looking at the ball from just above and as if we're like almost touching it so what we when we exported we say hey take the point of view that we're currently looking at the ball right but we have this kind of like how do I add a different point of view yeah for that you just basically create a new camera and adjust its point of view so by default you have something called a personal camera which is great for editing it's at the very bottom which is the your personal camera is great for editing but for your personal or for your final exports you might want to use a specific camera that you can tweak and set up and then even lock so you accidentally don't actually touch it or move it to the wrong location that one right and now you could just click the use this camera and you see that yeah now jumped into that camera specifically and to be able to Center the camera on the object you could just select the sphere itself on the right side bar and yeah I think there's a keyboard shortcut called s which will autoc Center it s oh there we go yeah so now it's more perfectly in the center but uh now if you go back and adjust the the camera properties you could basically first of all I would recommend you to go with the perspective because by default we are using orthographic projection mode which is uh more flat right like it's more even but with perspective you have a sense of depth and like perspective so it can be more bold and uh more interesting and now you could just uh zoom into your subject and and try to slightly position it you could yeah do it with the how do I zoom in like what do I do I move do I get closer do I scale up the how how should I think about zooming in on a 3D plane H yeah so for that maybe we can just use basically the the properties of the camera so imagine this like having an actual physical camera and you are just getting more up close to your subject right so in order to do that um maybe we should be facing this object from the very front so we have more Precision over the those properties and for that there's like a little orientation Cube at the very bottom of the yeah that one and yeah I I would recommend you to touch the or click that little red axis which will actually make it jump to the very front yeah okay now we're okay that makes sense so now I'm I'm like I'm like facing the object itself and I can say hey let's get closer to the object yeah yeah and now you could just go and adjust the position of the object so you can get more up close uh it because of the specific orientation I'm not sure which is it like X Y or Z yeah so X there we go there we go okay so that makes but we should also move the camera slightly uh or actually slightly up so our shape is more cropped and more like let's go maybe 100 here there we go maybe a little bit less than that okay uh so there's some great questions in the chat drop the questions in the chat and we're GNA have a Q&A in about five minutes once we do the kind of zoom in uh so if you have any questions about spline go ahead and drop them in the chat and Gabor is more than happy to do some some live Q we'll just do the zoom in right okay in in webflow and then I'll let the side by side as as homework for everyone on the next live stream uh cool for sure if I reexport it it's gon to take it from this camera because I've set camera as my export correct yes okay exactly so let's update the zoo so if I go here and I go back to my spline scene let me go find that in the finder spline scene boom Oh was a little tricky to get out of here there we go then reload okay it still feels like we could zoom in even more yeah I mean yeah you you could adjust the camera right so yeah maybe just a little bit more I'll do this as a last step here where would we zoom in it's the X right you need to crank up the X yeah so let's go here yeah and then maybe push it down on the y a little bit push it down so yeah there we go so the title is visible you can push it down a bit more more because yeah your hero is having a similar aspect ratio yeah around yeah around that but yeah of course this could be adjusted impulse to I think we can okay that that actually looks perfect okay so much better on so what we want now is on scroll we want do we want the we want the camera to move in or we yeah it's it's it's actually relative right like you could either scale up the object or you could move with the camera even closer or more up close but for this exercise I would recommend to actually to create a webflow scroll event where we would actually just scale up the object depending on the scroll pos position of the website right so okay so as the main container Scrolls so let's go ahead and create the interaction so we want to create uh while scrolling in view right on the main container right we want to play scroll animation uh let's create a new one we're going to call this spline scroll live and let's kind of imagine what this looks like so what do we want to happen right so let's select our spline yeah you need to select it so it appears in the dropdown right so now it should be there yeah yeah okay so we're saying and change change properties of the spline based on what percentage of the scroll we're on so I guess we want to start this maybe like here if we look here like right so the scroll starts maybe right when the hero is like here maybe yeah yeah at around 20% should be good yeah maybe let's go 31 31 and okay so how do we actually say move the camera in or increase the the the size so basically from webflow you have access to all of the spline objects right and you can manipulate their position scale and rotation and that's at the very bottom section so now you have that specific State selected pretty similar to how we have States in uh spline right and then you can just uh select the objects that you would like to manipulate from the drop down right and we would like to actually manipulate the sphere itself so it's scaling up on scroll so we can get more up close to it and at the very beginning its scale should be just one by one by one at X and Y and Z so we have its default scale okay so here the first ones are position so we're not moving the sphere and the bottom ones are scale we're saying okay our our base state is one right so this is the way we load it is the base size we want it to be and as the next step as we lower that kind of we go down the main container we want the scale to increase yes right so right here at a 100 maybe I don't think we do it at 100 where do we let's go yeah we kind of sto here yeah the good thing about the we flow integration is that with the live preview you could see the result live and align it perfectly based on your other HTML uh based content right so right over there yeah it should be around there uh and we can go ahead and just uh crank up the scale to maybe like 3x so we make it three times bigger okay and now if you turn on the live preview oh you forget to actually select the object on the I forgot here yeah yeah so I you need to select the exactly same object so there's a transition happening between the two oh wow okay let's actually watch this on live okay so I'm here probably need to move down the camera a little bit so we're not hiding the H1 but that's something we know how to do and as we so see this is where it starts that scale then it linearly increases to this right here all right yeah see we want to probably end it a little too yeah yeah we went too much inside the sphere and that's why we see more like uh visually less interesting areas of it so maybe like 2x would be enough there and then we still see the sphere and then the little hairs okay so let's save that let's all right I think we did it awesome so I will leave as homework for everyone go ahead and get the clonable and then redo this which is just based on the XY position of the mouse change the rotation of the sphere so uh uh yeah I think we did it so uh now's a good time folks drop your questions for Gabor in the chat there already some I want to highlight them make sure uh Gabor answers all of your questions go ahead and get the clonable make sure to copy paste the coupon uh um webflow friends and go ahead and drop your name in email in the form uh so you can be show up in the credits and see what title you get today so uh there are some questions in the chat I do want to uh there was one I I'm not now we have a little fancy I can actually let me go up so great question I'm going to take this one first right so Gabor the question is what is the best way to learn to create 3D models and shapes in spline so what should people do right after this stream that are really excited to learn spline where should they go oh that's a great question yeah uh I would recommend you to actually start simple and uh get started uh with the very simple kind of uh modeling tools that we have inside spline but for that to learn them uh you might need to follow some kind of tutorials so we have uh YouTube tutorials on our spline account but that might be maybe a bit more timec consuming so before you do that it's also pretty cool to just uh you know open up the library of spline there are plenty of templates that you can get started with and play around with and just uh kind of study the objects like how they are build if you double click them you you will see how they're actually being modeled if you go into that kind of modeling mode and you will see how to create a more complicated shape and we also have the community right on spline where there are plenty of great works and projects being shared by the community and they are remixable most of the time so you can just grab them and study them too and on yeah I think we also have some docks right so so the docks if if you're more into like real kind of style of learning then you could also learn from there okay next question is how does mobile work so how would you work uh a spline scene or 3D in Mobile you know what across different breakpoints let's not jump into but just talk to us through how should folks think about mobile responsiveness Yeah so basically we want to make sure that every spline scene is uh optimizable for all sorts of devices and run smoothly in browsers right so mobile is definitely one of our focuses too and for that we just recently a couple of months ago launched a new event called the screen resize event where you could just Define your break points and based on some break points you can basically rearrange your objects or create a transition or maybe Zoom or up close or further a with your camera and the fun part about it is that you could just match those break points that you create with spline with your webflow break points so they actually are smoothly behaving together but by default you might not even need to worry about this because our camera by default is responsibly set up so it's adjustable for different screen sizes but if you need to get more Precision or there there is like a 3D text element that you want to make sure it's getting into the right location on mobile you can just do that with a screen resize event got it okay great question uh from Zack what are some best practices for optimizing and reducing scene size and is there a way to reduce polygons you know what what would you as as a pro recommend where folks thinking about uh speed optimization all right so speed optimization that's a great topic there too for that uh the easiest thing to get started with we have a tool called performance if you are going to about export your scene and scroll down in that real export panel there is a little button that's called run test and if you click that it will actually Benchmark your scene and show you how many objects it has how many polygons it has how many materials slides all sorts of things you are using and we'll try to give you some hints and tips like what you could optimize like for instance uh like the the one of the kind of like common mistakes is that some people crank up the subdivision level of their objects by default and you don't really visually see the difference if you would just crank it down and so there are the the model doesn't does need to be always that highest but uh you can also yeah use tricks like instead of copy pasting the same object multiple times you could use our components and instancing system if you are using instances they are those kinds of objects are quicker to load right so and on top of that we also have some kind of we want to make sure that by default spline is also automatically helping you compressing your content and for that we have specific settings where you could basically uh opt for high quality or maybe op for performance so there is some kind of optimization happening so it's even quicker to load and quicker to render everything there but for all of this yeah the recommend to read the ducks that we have we have a specific documentation just for performance that we recently also updated and there you could learn more all right so there's a question around you know should you use 3D you know if if you're your target audience has slow internet speed I think what what I'm hearing from you is you know optimize no matter what whether you're building for super fast high-s speed users or slower if you absolutely want to use 3D the same recommendation is always to optimize no matter what yeah and the very good analogy there is with video right so in the beginning of the internet we also started to embed like huge or different kinds of videos and there you also need to make sure that they are like efficiently compressed and you don't go like too high resolution so they can smoothly run and U yeah so so I think it's possible or feasible to if you keep your steam lightweight they should be running smoothly on lower end devices but it depends on the complexity we also see lots of people like importing huge models and uh then they don't really um understand why it's not performant enough so if you would build something from scratch with spline then maybe you have more finer control control over the final performance and the resolution of your objects there yeah perfect okay uh I think we answered most of the questions Gabor before you sign off what should people do where can they get more spline more review more learning you know how how do they keep on the spline train how to keep on the spline train yeah I recommend to yeah basically join our Discord Channel there is like lots of great like ongoing chat happening with the community where we are continuously sharing the latest features and uh discussing and debating about those and you can also ask for some help or look for some inspiration but we also have the build-in community within spline where you can just share your work put some comments on others works and get inspired by our Gallery if you would go to our community and explore the trending tab then you also see like very high quality results being built by the community which is I think pretty fascinating so I would recommend to go there and get started and um maybe you could also use the web coupon but spline is for free too like every every tool and feature or most of the features are accessible for you to get started but if you actually want to do something in production and like apply it to like an actual client work then uh I hope that this coupon can help get you started too fantastic well kabore thank you so so much for joining uh I am now on the spline train I hope everyone else will thank you again for joining us today thank you so much yeah I can't wait to see what we'll be building next with spline and we flow yeah thanks thank you so much yeah we'll have you back we're going to you know start building thank you so so much and now for our favorite part thank you Gabor let's get into our credits here all right it's been a while hello thank you so much for joining uh so hopefully if I've set this up correctly there we go thank you so so much uh we've got Muhammad Chris who are cutest cats uh we have pixel geek uh we have Lee from our Bubba Fett clones I think that's from uh we've got uh I gotta read this Davey we got too many folks iness thank you Pablo uh n nadir Sara Ryan Penny classic thank you so so much penny for joining got Max Zach Vanessa thank you all we'll be back in two weeks where I'm going to show you how to use how to localize your websites with Joanna Wong from our technical Architects team thank you so so much for joining and I'll be back here in two weeks to talk about localization thanks so much and have a great week bye everyone