Locomotive Scroll (Smooth Scrolling) in Webflow

hey there welcome back to the channel for webflow pros today's tutorial has been requested on this channel for a very long time now and we're basically going to implement locomotive scroll on a webflow project so locomotive scroll is a smooth scrolling library and it's seen on a lot of sites used on awards this is scroll jacking so it basically takes control of the scroll speed of the user's device like anything this can be overused so we got to make sure to use it in the right context but it can also be very powerful so the way scroll jacking works or extensions like locomotive scroll is basically it disables the actual page from scrolling and then places every section inside a container that is being moved with css transforms to give it that nice smooth effect so that being said a lot of things like a lot of times by default position sticky or fixed when it work or scrolling down to a particular section there are some workarounds for some of that which i'll show a couple today but the biggest thing is that webflow interactions that are tied to scroll when it work because it doesn't know that the page has actually scrolled since it's just moving a container fortunately for us locomotive scroll does have some nice animation features built in that we can use in place of webflow interactions but again this is all based on if it's the right project or if it's the right use case to use this so let's just go ahead and dive right in so i'll basically link this uh this cloneable right here if you want to just dive into this and see what we're building um and dissect any of it and i'll also link the code that we're going to be using in the description of this video so we're just going to copy that code head over to your project and in either the page or project settings go to the closing body tag section and paste all this code so basically it's just looking for a div with a class of locomotive dash scroll so that div needs to be uh containing all our page sections and then we'll just give it that class now right now if we publish we'll instantly have smooth scrolling enabled but all these elements will only be moving at one scroll speed they're not animated or moving at different scroll speeds yet so we have to decide what we want those animations to be also if you're going to have anything that's fixed like a navbar for instance that needs to be outside of your uh outside of your locomotive scroll div that way this can actually still be fixed while the rest is being moved with css uh transforms so the next thing we need to do if we're going to animate elements individual elements inside of a section we need to head over to our section and we need to give it basically a data attribute and the data attribute we're looking for we can create right here and it's going to be data dash scroll dash section and by default in webflow we have to apply a value here so i just put a number one even though this number isn't actually going to do anything we really only need the name applied right here and then we can hit save what that's going to tell locomotive is that there's elements that we plan to animate inside this section so it can keep track of those elements we plan to animate the next thing we need to do is actually select one of the elements we want to animate in this case it's going to be my heading here and we're going to add an attribute to it any element that we want to animate we've got to give an attribute of data dash scroll just like this and again we have to put a value here so i'll just put one so basically this is just telling locomotive that this element is something we're going to want to animate or move um but then we also have to affect its scroll speed so how fast is it going to scroll when we move up and down the page for that we do data dash scroll dash speed um and then we can assign any value here so the lower the number the slower the speed and then if we do a negative number it would move it in the opposite direction so like five would be pretty fast one would be slightly fast by default if we remember back in our code of our page settings the entire page is scrolling at a speed of one so when we apply a scroll speed of one to this element it's basically essentially a scroll speed of two because it's the scroll speed of the body plus the scroll speed of this individual element so parents basically affect their children like that so if this div had a scroll speed of two then this would be one plus the parent scroll speed um so let's go ahead and just let's assign a couple different scroll speeds so for this first headline i might make it a scroll speed of three the second one we need to do the same thing we need to give it a data attribute of data dash scroll so we know this is scrollable i'll just set that to 1 and then we need to define its scroll speed data scroll dash speed and for this one i'll just give it two for now for this one right here i can give it maybe three so we'll do data dash scroll assign one do data dash scroll dash speed and assign maybe let's do three um and then i'll just go through each one of these all right so each of these have a different scroll speed applied to them what we can do now is just go ahead and publish and let's check this out on the live site so one thing you'll notice on the live site is it looks like the animation is already started even though we're all the way scrolled up at the top it looks like it's already kind of started right here so to fix that what we're going to need to do is give each of these another data attribute of data dash scroll dash position and anchor it to the top now let's save and publish again now back on the live site what we'll notice is that all these are set in the exact right position when we start and then once we scroll that's when they start to break apart at different speeds so locomotive also has scroll delays and the main difference between a scroll speed and a scroll delay is that you'll notice that it looks like some of these letters are moving faster than others but when i stop they all end up in the exact same place i'll also link this documentation for locomotive scroll in the description of this video but these are all the different sort of parameters or attributes that we can apply and then it kind of explains what each one does and what kind of value it's looking for when we apply that data attribute so if we apply a data scroll delay we can just copy that and we can say maybe we want to apply it to all of this lower section here so i can apply that i'll do 0.05 so again the higher the number the faster it's going to be but this is basically going to separate this line from the first two lines whenever we're scrolling and then whenever we stop scrolling they'll kind of join them back together now let's check this out on the publish site with all of our code in you'll notice we're using a combination of scroll speed here but also the scroll delay so this line is really dynamic when it's being spread apart for this next section we want these two lines of text to basically scroll horizontally when we're scrolling past it so again we need to keep in mind that our section that contains them has a data attribute of data dash scroll dash section and then this is the actual container we'll want to scroll so any element that's going to be scrollable needs that id of data dash scroll and then we need to apply a speed to it of data dash scroll dash speed and then since we want this to move in the opposite direction what we're going to do is actually do negative 6 this time like this and this second line right here will actually have positive 6 so that way these two move in opposite directions now by default both these lines are going to scroll upwards not horizontally so we also need to set their scroll direction you'll see scroll direction is one thing we can define here and it accepts either vertical or horizontal since we want these two to scroll horizontally we'll basically apply a data dash scroll dash direction and set that to horizontal now we can go ahead and publish this and check it out so here on our live site what we'll notice is that both of these are moving in opposite directions and they still have the smooth scrolling effect applied in this next section we want to implement position sticky since webflow's native position sticky isn't going to work with this particular scroll library they do have a workaround that we can use for position sticky and it's basically going to look for this data dash scroll dash sticky and then it also needs a data dash scroll dash target so what we're going to do is grab the block that we want to be sticky and first we have to apply data dash scroll to make sure that it can be scrollable and then second we'll apply data dash scroll dash sticky i'll just put a 1 here this value isn't going to actually do anything there and then we need to do our data scroll dash target and then we'll have to give this a specific id to look for and in this case i'll just give it an id of sticky sticky one so we're telling it to look for an element with sticky one and we want to apply that id to this container here so it will be sticky one just like that note that we're using the hashtag or pound sign in front of the id right here so basically it's going to know that this entire parent container is the id that we want this to be positioned sticky inside of we're also going to apply a scroll speed to this video block so it's inside a div right here that has overflow set to hidden and then the video block itself is a hundred and fifty percent the height of its parent so that way we have some room to move it inside the parent and it's overflowing off the top and the bottom so what we can do to make this video block scrollable again is just apply a data dash scroll and then we can do a data dash scroll speed and to give it that parallax effect where it looks like it's moving in the opposite direction of the actual page we're gonna do negative three so it moves in the opposite direction now on the live site when we scroll to this section you'll notice this element becomes sticky and also the video inside this section is actually moving up and down with our scroll speed in this next section whenever an element comes into view we want to change its size background color and scale since we can't use regular webflow scroll interactions for this locomotive also has something that we can use and basically it can add a class to an element whenever it's in view and we can use css animations or transitions to basically have that class animate whenever it's in view just like we've done with the wizardry jquery builder before so what we're going to need to do is again make this element scrollable by adding data scroll of one and then we'll give each one of these the same scroll speed of data dash scroll dash speed of one as well then we need to define the class that we want it to add so if we copy this right here we're going to say data scroll dash class and we'll add a class featured number this class can be named whatever we want and it's basically going to add that class now whenever we scroll into view it'll add the class when we scroll out of view though it won't necessarily remove it so if we want this animation to trigger every time we're also going to have to add another data attribute of data dash scroll dash repeat and set that to true then we can create a combo class and webflow of our featured number so all we have to do is come over to one of these items create a combo class of featured number and then change it to look how we want it to look so maybe we do a bit of background color here maybe we can increase its size using font size right there and maybe we even increase its padding over to the sides just a little bit i'm using css transitions for each one of these elements one by one so that way when i add and remove the class it basically slides to that position so let's go ahead and apply this to all the other elements and test it out so what you'll notice on the live site is that each one of these elements faded in at pretty much the same time just like that and every time we scroll back into view that class is added again if we wanted to have a bit of an offset where they don't basically add this class instantly when it's scrolled into view but if we wanted to choose a very specific point we can actually use this data scroll dash offset and if we use a percentage here it's basically a percent of the viewport height so our scrollable space is 100 vh and we can basically determine where we want that offset to fall so the first value references the bottom and then the second value here references the top so we can define a percentage of the screen so if we copy this attribute right here come back over to our webflow project and then we can add this data attribute of data scroll dash offset and for this we'll pass in two values we'll pass in 48 and 48 and those two are separated by a comma just like that so what that basically means is it's going to wait to add this class till this element is 48 from the bottom of the screen and 48 from the top of the screen so it'll add that class when this element is exactly in the middle of the screen so let's go ahead and add that same offset to all the other items lastly what if we wanted to animate an element inside the card that scrolls into view not just the card itself so this card or this image for instance you notice we can turn up its filters uh with to turn up its brightness like this so i can basically copy all this filter code here and bring it into a custom code embed what we want to do here is get the class that our scroll library is going to add a featured number and then we're going to look for the image class that's inside that featured number and then we're going to turn up the brightness of it so basically this image will only be brighter when it's inside of a div that has this combo class of featured number let's test it out on the live site now when we scroll into view these elements wait to highlight until they're exactly in the center of the screen and the image inside them the brightness of that image is turned up as well i hope this tutorial has helped you understand a little bit more about locomotive scroll this barely touches the surface of everything it can do so check out that github link below to see all the attributes that you can use if you've enjoyed this video subscribe so you never miss another video and i'll catch you in the next one goodbye

Channel: Timothy Ricks

Views: 17,574

Rating: 4.9891009 out of 5

Keywords: webflow, how to, tutorial, lesson, advanced, pro, course, building, design, development, interactions, animations, css, javascript, code, custom code, wizard, awards, interactive, locomotive, scroll, scrolling, smooth, smooth scroll, jquery, data attribute, position, fixed, sticky, speed, lux

Id: D-vYtfcz0NI

Length: 15min 9sec (909 seconds)

Published: Sat Apr 10 2021