New Spline Integration with Webflow!

hey guys so in this video we're going to be trying out the new spline integration with webflow and I've already tried it out it's amazing we're going to actually just pick this character from one of the libraries or the community files or something on spline and we're going to animate it so as you can see it's now following my mouse and if I go near the button obviously as you can see his eyes and his whole character is moving and if I click just hover over introduce myself as you can see he's like pretty excited so the hands raised and I mean like the he has a lot of excitement and all of that stuff so we're going to create that stay tuned and it's going to be an awesome video okay guys so in order to create the animation or the effects that you just saw we are going to go to our spline and we're going to click on export when we click on export we can go to the code export and we can just copy this link to actually paste it but before that you can also tweak like what do you actually want do you want to show the background color do you want to have the page scroll I'm going to say okay show the background color don't have the page scroll don't have the orbit don't have the pan don't have the SU zoom and I just don't want that because when a person tries to click on it sometimes it like looks weird or acts weird so I don't want any of that funky behavior I'm going to control all of that from webflow so I'm going to say update code override and I'm just going to copy this particular link I'm going to press K here I'm going to say I want to insert a spline scene here we have the scene I'm just going to paste it I'm going to go to our style and I'm going to say the width is going to be 100 VW the height is going to be 100 VH and this is going to be fixed let's see and the top positioning is also going to be zero so it starts from the left and the top that's it and we're just going to move it behind the whole text thing so here we see our character I think it looks good now what I want to do is I want it to follow my mouse when I'm on this particular uh hero section so if I'm on the hero section if I go somewhere on the left I want the whole character to rotate slightly uh towards the mouse so how do we do that we're going to click on the hero section now this is insane we're going to click on the hero section we're going to say I want to add any interaction and I can have multiple triggers like scrolling triggers page loading triggers and we can get into all of that uh so I can say when I'm Mouse overing this mouse hovering this or I'm hovering my mouse over this particular hero section I want you to do something so I'm going to say I want to add a mouse animation and this is going to be my uh object animation or something along those lines okay that's done and I'm going to select my spline scene I'm going to press plus and I'm going to say I want to do something with this okay what do I actually want to do well I want to go ahead and move this character so I'm going to say that it should move let's just select the character it should move somewhere sorry not this let's just put position it the way it was it should move somewhere rotate it should rotate somewhere here so it should follow my mouse and it should rotate here and on the and on the default state it should just be 100 or back to its original position sorry back to its original what am I doing okay I didn't select the character apologies so it should just be in its original position here and let's save so I think it should work now but one thing that I don't really like is how the character is in the middle and we can just tweak that by tweaking our spline uh scene here since this is the spline scene here is exporting the preview that we see it's using or actually maneuvering our camera it's basically uh selecting that so anything we change here or the positioning we change here on our camera is going to be reflected on that if you want to have a fixed camera then you would have to create a separate camera yourself as well so once I've done that I'm just going to go to my spline scene I'm just going to go here and I'm going to reload this so once this is is reloaded it's going to be somewhere there okay so now if we just play it it looks like this and I think it looks good okay when I'm when we're hovering over it it looks like this when we're moving it on the right it looks like this I think this looks great okay now what we want to do is if we're looking if we're placing our hovering our Mouse like on the y- axis obviously if we rotate the whole object it's going to look weird but what if we just rotate or tilt the whole face I think that's going to look good okay so let's just do that just to add a slight bit of interaction and Dynam Dynamic stuff so we're going to go here we're going to say that obviously we want to tweak the same animation on the mouse y actions what we want to do is we're going to first select the scene and we're going to say on the y action we just want to go ahead and tweak the spline again and let's just close our X actions open our y actions okay on this one we want to say maybe maybe just maybe we actually just want to go ahead and tweak the face so for the face what do we want to do if a person places his Mouse upwards we want it to look oh this is a really cool look as well I mean once you're exploring these things I mean all of these things just come to notice and let's just go ahead and obviously make this zero since we don't want it okay so this is our our face and maybe here actually even even above the face what else do we have okay maybe the face is fine so for the face we just want to let's say move it somewhere here somewhere above obviously if it's if I'm seeing or if the mouse is up maybe he's trying to look up let's do that and let's go here and just say this is going to be zero and obviously in order before making it zero or after making it zero we obviously need to select the face as well and maybe for the zero State we're just going to go ahead and do this if you want to reset it you can just press option and click on it and it's going to be reseted so for now I'm just going to go ahead and maybe place it here or slightly below maybe somewhere here okay so now I think it should normally work sometimes when you're messing with let's say other properties it looks weird so as you can see if I'm going up it's looking up if I'm going down it's looking down maybe it should look a bit more down I personally feel like because again it's not really completely following it so let's go here really quickly and and say that in this particular instance I just want you to be a bit more down so maybe somewhere here one thing that I don't really like is there's like something actually here which I think we should just remove from the scene which is something that I'm just going to do right now so let's just see what that particular thing is the issue and obviously sometimes you have to tweak it that when all of these things actually go down they actually blend behind this circle so in order to tweak that what we have to do is obviously I have to select the face and just slightly move it forwards so when it's down it doesn't really blend in with the face okay I think that's good let's go back and reposition our scene to the way it was export and update okay and then reload the scene and now if we let's say play it as you can see now it is fixed okay that's exactly what we wanted and this is how our object is looking or our scene is looking and now what I just want to do one thing when I click on this or maybe even when I'm hovering on this I want this person to be ex excited maybe the face change and the hands raise up something like that so in order to do something like that we're just going to go here and we're going to say well actually we're going to go onto the button itself and we're going to say I want to add an element trigger so when a person is hovering over this particular thing I I want you to do an action and I want you to do obviously a custom action because we haven't even created it and I'm going to say that this action is going to be let's say what do we want to name it uh happy or something okay so once it's happy I'm just going to say that I obviously would select my spline I'm going to go here I'm going to say I want to select spline and the first thing that we would like to do when a person hovers over this is I want you to select the hands okay I don't even know what the name of the hands is okay these are the hands and let's say it I don't okay it's right below the character uh I think these are the hands and now let's see what values do we want to tweak obviously not this one so let's just reset it uh is it this this is cool as well but we don't really want to tweak it so let's get rid of that is it this I think this is it okay so by default we have something like this but when we hover over it I want you to raise your hands like this okay this looks good and I obviously also want you to raise them up slightly like this okay I think this looks good and let's just see how this looks honestly let's just see how this looks so I'm going to click on save so this is his Happy State and similarly on Hover out I'm going to start an animation I'm going to create a custom animation not happy or something and we're going to save it and in the not happy sorry this is going to be happy but here it's going to be not happy so let's just select it and tweak it and in this non-happy state I'm going to go to my spline again I'm going to say I want you to have the spline interaction and we can obviously tweak it but let's just see how this actually looks now so we have something like this and when we hover over it as you can see he's really happy but he doesn't even bring his hands down so in order to for him to bring his hands down obviously we have to tweak him tweak it but I mean this is this looks really cute I think so we're going to go here we're going to say okay this is going to be zero the hands are going to be in its own position and similarly here the hands should be in this position as well and let's just play it and let's just see how this looks okay here and then back again here and then back again so I think that looks good now let's let's just add the Expressions as well so I'm just going to select the both the Happy State I'm going to go here I'm going to say that I want to have the spline scene and I'm just going to add another interaction here uh and I'm going to say okay that's also going to tweak the spine spline and we're going to select the face and in the face maybe we just want to increase the size of the face or something I don't know maybe that's going to look weird I think this looks good personally I think this looks good it looks like he's excited or something so I think that's going to do for me or do it for me so we're going to save it and similarly on the not happy one we're just going to go here we're going to add another uh item and we're going to say this is also sorry not here we're going to select the spine spline and we're going to say this is going to tweak the spline and here it's going to change the the face and the face is going to be back to its original size which I think is like one or something hand raised hand down hand raised hand down and also as you can see when the hands are being raised both the hand raised and the Expressions animation is running at the same time but when it comes to the mouse out animation it's actually not at the same time and the reason for that is maybe the timing is different for both of these so I'm just going to go to the not happy and as you can see that is actually on 5 seconds so we don't really want that so I'm just going to go here and I just want want to go ahead and bring it somewhere above and that should be it and then if we save it we play it this is what it looks like both of those things are going down at the same time and I think this looks good I also feel like maybe the rotation can be a bit slow but obviously you can tweak all of that yourself so yeah that's pretty much it that's how you use fly with the new webflow I think it's amazing it's going to explore a lot of different opportunities for interaction and animation and it's going to make your sites look super cool so yeah that's going to be pretty much it for this video do subscribe hit the Bell icon I'll see you in the next one and also stay tuned for more updated content

Channel: AM Design

Views: 2,262

Keywords: 3d, amdesign, animation on scroll, asaadmahmood, element trigger, interaction, mouse animation, new spline, spline, spline 3d, spline to webflow, ui, ux, webflow

Id: -Xmo1jDbpLc

Length: 12min 35sec (755 seconds)

Published: Tue Oct 10 2023