3D Scroll Interactions in Webflow

in this lesson we'll learn how to create this 3D interaction using webflow and spline where we can scroll to scrub our animation so let's get started building this out in spline let's head to the community Tab and I'll search for cubic I'll use this first model in our project and we can scroll down and click remix so let's set our frame size to responsive so it covers the screen then we'll select our object here we have two states in here already and for the base State let's lock the scale and let's scale it way up and we'll also push it over maybe towards the left a little and then in this state here it's going to scale down until it's pretty much in View and we'll push it over towards the right like so hanging off the edge of the screen and this should happen on page load so we have an onstart event here where we're just transitioning between those two states and we can have that happen over two seconds so if we preview this notice how it moves from that position to the next one and that's looking pretty good and let's also set it where we want it to scroll to so we'll create a new state here and in this case I'm going to lock the scale scale it down pretty far and let's reset the position back to Center and while it's moving that way let's also have it be rotating just to give this a bit more life and then we'll create a new event here and this type is going to be scroll so we'll switch the type here to scroll and the canvas is going to be our trigger whenever the bottom of that element reaches the bottom of the screen so it's fully in view it'll start and then we'll have the endpoint be a thousand pixels after that so for our action here we're going to do a transition and we'll transition it between this state and our last state and let's go over to export and go to play settings we're going to disable logo we'll disable background color so it's transparent and then we'll disable orbit pan and zoom so it doesn't we don't accidentally move the object while we're scrolling and when mobile as well let's disable everything except for scroll now we can also add on Hover so while our cursor is moving we might want the camera to slightly rotate and follow us I'll turn the sensitivity way down and disable the reset and let's go ahead and play this so on page load it moves to that position our cursor is moving the camera slightly once we start to scroll we'll notice it is going down to where we want it our cursor still moves the camera so everything's good there now let's head over to export and we'll head to viewer and to get this in webflow all we need to do is hit copy embed so in webflow I'll add an embed and we can paste in our code we copied from spline let's put it in between the hero and footer and we'll give it a class of embed let's give it a height of 100 VH and let's go ahead and publish to test so we'll notice that our scroll interaction doesn't start until the bottom of this canvas reaches the bottom of the screen then it starts but it's animating while we're scrolling out of view so we want to keep this embed sticky so we get to see the whole interaction to do that let's wrap our embed in a div block and we'll give this div a class of track and we want to set the height on the track dynamically so we know our embed here has a height of 100 VH it's covering the full screen our animation doesn't start until the bottom of that embed reaches the bottom of the screen here and we want to set this embed to position sticky so it stays with us while we're scrolling past the whole track which means this track needs to be taller than the embed we're going to set its height using some custom CSS we'll set the track height to 100 VH plus a thousand pixels since we know that these spline interaction continues for a thousand pixels after the bottom of that embed reaches bottom of screen so now we'll see the embed is staying with us while we scroll and if we go ahead and publish this let's test it so now we should notice our scroll interaction still doesn't start till bottom of embed reaches bottom of screen but now it's sticking with us while we scroll past that entire interaction once the interaction is finished we're allowed to scroll the rest of the page lastly we want this embed to be in between our hero text here and the hero text should be able to scroll out of the way while the embed stays sticky inside of this track so we have our hero section here that has a height of 100 VH we can give our track some top margin of negative 100 VH to pull it up into the hero section and then we'll select this heading here and let's give it position relatives the index one I'll select the paragraph here give it position relative Z index three and so that way this text will actually scroll out of the way while our track here the content inside it is sticky so that's working fine and then we'll select the track and give it position relative Z index of two so it's in between the heading and the paragraph So let's go ahead and publish and try it out so on page load we have our nice intro animation here we can move our cursor to rotate the camera whenever we start to scroll everything is working nicely it eventually unsticks and we're able to go into the footer and that really wraps up how to create this 3D scroll interaction in webflow

Channel: Timothy Ricks

Views: 46,616

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

Id: Jb_qPnSo6Rc

Length: 5min 6sec (306 seconds)

Published: Fri Sep 01 2023