New Spline & Webflow Integration

in this lesson we'll use the new webflow and spine integration to animate our character using webflow interactions in the spline Library let's go to character and we'll search for the Spidey project and open it up so let's turn on auto zoom so our entire scene will resize based on the size of our screen like so we'll also want to animate spidey's head so let's open our Spiderman layer and we'll select all the elements that make up his head and hit command G to group them we'll rename our group to be head and if we try and rotate this right now it's rotating from the center of his head but we want the origin point to be the bottom of his neck so we'll hold the command and option key and click on the head layer and then we're allowed to adjust this origin Point by just dragging it down and maybe dragging it over a little bit and then I'll hold the option key and click off to the side and drag to rotate and maybe just move this origin point forward a little bit and maybe down a little more so now if we click off and then select the whole head again now we can rotate it and it's rotating from that point like so we're also going to grab this entire background layer the web and we'll just delete it so we don't have anything else in our background we'll hit export and go to place settings and we'll turn logo off background color off disable the orbit pin and zoom controls and then we'll publish our URL and then to bring this over to webflow we'll head over to viewer and we'll hit the copy embed and we'll basically just only interested in this second URL here this is the one we need for webflow so in webflow let's add a spline scene and we'll paste in the URL to our scene here we're going to give this scene a class of spline and we'll give it a height of 100 VH so it covers the screen height let's drag it above our hero section and we want it to stay with us while we scroll past all these sections so let's give it a position of sticky zero pixel to the top so it stays with us while we scroll we'll want the hero section to start at the top of the spline scene so with the hero selected let's give it some margin top of negative 100 VH to pull it up by a full screen height you also want this about section to be on top the spline scene so if that's selected let's give it a position of relative to make sure it's on top then we'll create the habbob interaction so with the spline select it let's head to the interactions tab we'll create a page trigger that triggers on page load and we'll start a new animation here we'll create our animation and we'll call this something like head move so with the spline selected we're going to add an action of spline to it and within the spline scene we can choose an object we want to animate so for our object we're going to select the entire head group that we created in spline we'll have this rotate when the X to 0.2 degrees this can happen over 0.7 seconds and we'll give it an ease of out sign then let's go ahead and duplicate this step here and for the next one we'll have it rotate back to zero degrees so it Bobs forwards and backwards then we can set this whole interaction to Loop and now if we preview this we should notice our character's head animating we'll also want to set up our scroll interaction and this container is going to be the trigger for that whenever the container is scrolling in view that's when we'll animate our character so with the container selected let's create an element trigger of while scrolling in View and we'll start an animation here and we'll create a new animation we'll call this scroll so let's go ahead and select our Target which is the whole spline scene and we'll add an action here of spline to it within this scene the object that we want to animate is going to be the entire Spider-Man group and for his starting value we'll be using a y transform of zero Z transform of zero X rotate and Y rotate all of zero then for the end State here we'll select the entire Spider-Man object again and then on the Y we'll basically pull him up some maybe negative 220 and then on the Z we'll pull them closer to the camera by something like positive 210 and then on the X we'll just rotate him negative 0.2 degrees or maybe positive 0.2 so his head's a little bit closer to the camera and then for the Y we want to completely spin around and make a full rotation here so we'll do something like negative 6.5 and that'll be the end state so now if we turn on live preview this is his starting point and then as we scroll we're completely animating him like so so this is looking great and the last thing we'll want to do is create an interaction when we hover this button that rotates his cap so let's create an element trigger of mouse hover on the button and then we'll say on Hover start an animation and we'll create a new action here we'll call this something like hover in and then let's select our Target which is the spline We'll add an action of spline to this and within the scene we're going to go ahead and grab the cap we're going to want to rotate it on the Y and let's rotate it something like three degrees this can happen over 0.8 seconds and for the ease let's do something like out court and let's go ahead and save this and for the hover Out start an animation and we'll just duplicate our hover in so we can open that second one up and we can go ahead and rename this to be hover out and when we hover out we're just going to animate it back to a rotate of zero for the cap so now if we save this and we preview we should have everything set up now all the way from our scroll interactions to the Head bobbing and even the button hover is all set up and good to go the spline integration is just one of the amazing features released at webflow conf check out this next video on variables that are finally native to webflow

Channel: Timothy Ricks

Views: 54,211

Keywords: webflow, how to, tutorial, lesson, advanced, pro, course, building, design, development, interactions, animations, css, javascript, code, custom code, wizard, awards, interactive

Id: NhtNciucUOE

Length: 6min 15sec (375 seconds)

Published: Thu Oct 05 2023