You are a blessing to the community man! I'm currently building my portfolio now and it's really just filled with features from your tutorials. Keep up the good work!
Back in the day like around 2010 maybe 2012 I think...I stumbled upon Chris Coiyer and CSS Tricks and it changed the game and how incredible of a resource that was. This feels like it all over again. Thank you for your work!
I postponed learning these types of animations for so long because I thought they must be super hard to do. Oh, how wrong I was. This is super simple. Love what you're doing Tim. Thanks
Literally the best tutorials on Webflow, I wish you did multiple on the more tricky applications like locomotive scroll horizontal site for instance. Cheers bud.
Awesome video as always! I was wondering tho if you know any easy way of making in-page links work with locomotive scroll? Webflows native does not seem to work. Thanks for any insights!
@@simongustafsson348 Great find! It looks like it is possible with some custom code. I added examples to the cloneable. webflow.com/website/TRICKS-Locomotive-Smooth-Scroll
Pretty cool. But it disables the scrolling for some reason, I think when I am not directly over the locomotive-scroll div. Tried to add it to my latest project, but didn't have time to troubleshoot.
Accordion/toggle element is causing trouble - I guess that if the full height of the body page is fixed by locomotive and a toggle is opened it gets cut off by the bottom (the more of the FAQ accordions open the more of the bottom cuts off the page)...is there some work-around for this as well please?
great tutorial! thanks a bunch :) there seems to be some weird bugs on mobile? On an Iphone, i can't flick on top to reload the page and on an Android Samsung (chrome) it's instantly reloading as soon i'm trying to scroll back to the top. Any ideas/suggestions how to fix this?
I love this... but i'm having an issue. for some reason my page only scrolls down to close to 50% then I'll move the window (browser) and the scroll bar sort of adds the other 50%.... anyone having this?
Locomotive calculates the height of your page instantly on page load. Sometimes if images or content isn’t fully loaded yet, it can estimate a shorter height than what’s going to be there. What worked for me was setting a fixed height on my images and media.
Great video! Easy to follow I have a question regarding the videos, where are you hosting them? I'm trying to upload to webflow but it doesn't let me, and the Vimeo/UA-cam option takes longer to load. If somebody answers thanks in advance!
Is there a site that compiles all of these looks? I'd love to see a variety of looks. And is it difficult to develop something like this? Give me some insight. Anyone please!
This is a huge time and performance saver. BTW, I noticed a couple of strange things once I installed locomotive: - the webflow animations on the navbar (hide/show on scroll down/up) stopped working - sometimes divs or whole sections glitch for a split second as they appear into view Running the basic scroll animations, on Chrome. Am I doing something wrong? Great content btw!
Hey Alex, I’m sorry it’s giving you issues. This all sounds like normal locomotive behavior. Like mentioned in the tutorial, locomotive isn’t compatible with WebFlow scroll interactions because it removes all page scrolling and just adds a css transform of move to the page wrapper so that WebFlow can no longer tell how far the page is scrolled. Chances are that anything that has WebFlow scroll interactions applied may appear glitchy. When using the effect, I also had to apply data attributes to each section. Not sure if there’s a way to exclude certain sections
Its amazing to get such good information! I have a question, is there a way to use Locomotive Scroll and still be able to make a progression bar in webflow. At the moment when I use LS I lose the operation of the bar.
yes, the data attribute is "data-scroll-direction" and the value is "horozontal" just add that along with the two others - data-scroll-speed, and data-scroll, and you'll see it move. +1 moves to the right and anything -1,-2,-5. etc.. moves to the left
Hey Timothy! You mentioned that Locomotive Scrolling blocks Webflow interactions. Does it block only while scrolling in view interactions or all the interactions from the interactions panel? If I implement locomotive scrolling but I still want to have my hover & click animations done natively in Webflow (not with CSS but with an interactions panel) -> can I do it? That was a great tutorial thanks!
This is phenomenal. Thank you! Only one concern: What happens from an SEO standpoint when headlines are separated as your hero does? ("Wizardry" "Tricks" "2.0")
Hey! thanks for your video! One question, for some reason activating locomotive somehow disable my back-to-top script which allowed my to click a button and go back to the top of my page.. Any guess?
When I see responsive web pages, I sometimes wonder or think to myself can the big sliders on the page be used as navigation for a different page? You know such as one slider used for home and other slider used for about and next side are used for portfolio?
Hey Tim, Do you have an idea on how to get a sticky element to remain at the bottom of the screen with Locomotive? I get it to become sticky, but at the top of the screen. Thanks in advance!
Hi Timothy! thank you for this tutorial I have an issue, i had some z-index elements placed in-between sections (there are some images and elements that overlap another section) and when i apply the locomotive script all of it dissapears, it becomes just single section that can't overlap the other. How can i fix this issue?
how can you make the Locomotive scroll works smoothly with the Background color change? so far in my project it seems like I have to sacrifice one of those as they are not working together
great video and great content. I'm using locomotive scroll in a similar fashion to this and it seems to be working on mobile, but on desktop it's disabled scroll completely and I can't scroll at all. Any idea why this might be happening? I've contained everything in a locomotive-scroll div
Setting a height on any images usually helps for me. This isn’t anything to do with wizardry, but locomotive calculates the height of the page instantly on page load and sometimes images are not loaded yet.
one more question - for horizontal scroll - is it possible to have it start the horizontal scroll only when all the elments are in view like having a horizontally scrolling gallery but when it starts the horizontal scroll only when all the gallery is in view?
Hey Tim, any adivise on how to get this to work for websites that have horizontal scrolling sections as well as vertical? i did as you said but it does't work on the horizonal scrolling section of my site. Would really appreciate your help on this, it's a hot topic on forum too and nobody seems to have solved it so your my last hope at this point! thanks in advance!
@@timothyricks is there a way to animate the color of a text changing based on the changing elements it is overlayin? some sort of text color inverse code?
Hey Timothy, I can't really use the editor with locomotive scroll as it prevents from scrolling. Do you know how to override this, by any chance? Thank you!
Hello. I liked your video with horizontal movements of tapes with text (section 2) I'm trying to do the same at home. But as soon as I insert the code, my page stops scrolling when publishing. What could this be related to?
I see some comments on it but no answer - is it possible to use Locomotive and also have webflow interactions/animations? Doesn't seem to be possible from what I gather, but am I missing something to tie it together? I have things like a navbar hide animation that don't work once this is implemented. Do I need to somehow do those animations via Locomotive? Is there a line of code to avoid this issue? Thx!
Awesome content g! I have one particular problem with Locomotive Scroll tho. When implemented, it sometimes cuts a part of the footer and/or adds extra space underneath it. I've googled it and it has to do with locomotive loading BEFORE the images. Did you have the same problem? If so, how do I tackle this one? Thanks in advance!
Hi Timothy great tutorial but I have more trouble with it in WF than joy. Beside not rendering full page (random bottom cut even all sections are wrapped) I am facing another problem with navigation. I have fixed animation hide/reveal on scroll that works fine until adding Locomotive, than this animation doesn't do anything and nav it just sits there. Not sure if this is related directly to WF or it is common problem.
@@crisdimarco after two days to make it work right way I have give up as at this time is for me in WF useless. I have found that WF internal animations do not work when this library is applied it's strange but I was fine with that. Anyway, It looks that it do wrong body calculations. I didn't work with this library in code editor (custom test website) this mean I do not know if it is WF issue or library it self. After switching from page back to home (where I have applied this library) I have always got a different body size, no mother I have done last section (any last section) was cut off. Maybe I will try it again next year as it looks great but for now I will rely on other tools. ;)
Hi Timothy, love what you doing!! Great tutorials. I have one question I would to intergrate locomotive scroll, but I am a bit struggling. But I think there is an easy fix. When I assign all attributes for some reason when I publish the site it won't scroll at all. Do you know what maybe went wrong! Keep doing you're magic! Thanks again
Hi Boris, thank you so much! Sadly, I haven't ran into this issue yet but will let you know if I find a solution. Perhaps comparing the settings to the cloneable in the description may help.
Please help...Everithing works fine but I have a problem with link jumps to the anchors - ...the whole page freeze for a few seconds. I can figure this out..+ my footer disappeared and Idk why... :D Thank you for your help.
Hi Ivo, webflow anchor links aren't compatible with locomotive scroll since locomotive disables the body from scrolling. I have their code workaround solution saved in the custom code link in the description of this video. Usually, I find if the footer isn't visible, it's often because locomotive calculated the height of the page before the images and content were fully loaded. I've fixed this before by setting a fixed height on all my images.
@@timothyricks Hi Timothy, thank you for your answer. I get the point but I cant figure out the solution for the anchor custom code in the link. I am new to webflow and code...Could you be more specific? Thank you for your time and work.
@@ivokrill Sure thing! It might make more sense when checking out the cloneable in the description but basically this code has two parts. 1. The class of the link you'd like to click on. In this case, it has a class of "nav__link" with a combo class of "is--first". Whenever we click on that link, the code will scroll us down to a section with an ID we'll add in Webflow called "#about". $('.nav__link.is--first').on('click', function() { const slider = document.querySelector('#about'); locoScroll.scrollTo(slider) });
@@timothyricks I really appreciate your help. I solved the problem by setting the data-scroll-section to the footer...now it's working, and the footer is also visible :) But now the accordion/toggle element is causing trouble - I guess that if the full height of the body page is fixed by locomotive and a toggle is opened it gets cut off by the bottom (the more of the accordions open the more of the footer disappears)...is there some work-around for this as well?
Hi!! Just a question, everything looks great in the toggle preview but whenever i launch the website it stays stuck, i can’t even scroll the website, do you have any idea what happened?
Hi mate! It happens due to an issue with section attributes, each section on your page should contain an attribute of data-scroll valued "1". I hope that helps ;D
For some reason, I cannot seem to make it work on Mobile. I added "smartphone{smooth: true}," did not work. I then added "smoothMobile: 1", it worked, but disabled all Webflow on-scroll animations (which work perfectly on desktop). Edit: The interactions do work, but I have to scroll really hard. Like, almost flick the site up/down, it seems to be activating the interactions. Any suggestions/ideas/leads on the fix? And thanks a ton for the awesome content!
That’s really strange! WebFlow scroll interactions aren’t suppose to work at all with locomotive scroll activated. The way locomotive works on mobile is kind of weird. They designed it for you to press, hold, and drag up and down on the page instead of a quick swipe of the finger. The code attached in the video description enables locomotive on all devices for me
@@timothyricks This gets weirder by the minute haha! Thing is, "while scrolling" interactions did not seem to work, but "when scrolled into view" are working just fine (on desktop). But as for the mobile issue, that sounds like a MAJOR drawback that is not mentioned anywhere on their git page. Is there a workaround? OR some other script that solves this? Or should I consider dropping Locomotive altogether ? Although, I am pretty there is a fix for this, I mean the agency's site (Locomotive.ca) is super smooth on mobile.
@@charbel-hajj I think they’re accomplishing that by disabling smooth scroll on the elements but keeping it on the page. May be worth a try. I read that the latest version of locomotive disables the effect on mobile by default so added in the extra code to enable it. On their main locomotive page, just the page has smooth scroll but none of the elements that had it on desktop. locomotivemtl.github.io/locomotive-scroll/
@@timothyricks Gotcha, I guess I'll do that too. I'll try to replace any Locomotive animation (like side scrolling) with a Webflow interaction that applies only for mobile. Hopefully they do address that better in their later updates. Thanks for the reply, cheers!
Hey ~ I'm using Locomotive Scroll for a project, with a very long long long mosque of images, and Locomotive scroll cuts off images, and never seems to load all the images, and just overall very inconsistent, which is not good. Do you think pages like this - many many images (60+) are not a good fit for locomotive scroll? I heard there is a way to delay the loading of the script so that the page loads all the images in the layout THEN locomotive scroll becomes active, but I'm totally stuck on this workaround. Any tips?
Hi, this is because the height of the locomotive container is calculated and added to locomotive container before all of the images have been loaded on the page. My suggestion is to use the padding ratio hack on all images, or using imagesloaded js library.
@@eugene1984cilliers Hi Eugene ~ what do you mean adding ratio hack? Is there a script to offset or delay the loading of Locomotive for like 2 seconds, so all my images will initially load THEN locomotive will initialize.
@@MichealBeaulieu - So the script that I sent waits for all images to load then RE-initiastes the correct height of the locomotive container, once all of the images have been loaded on the page .I think this is the best way to solve your issue, as the time it would take for different users depending on their internet speed will vary. If you do not want to use that methos and just delay locomotive, see below: setTimeout(() => { scroll.update(); }, 5000); //// This will wait 5 seconds then update locomotives height. Make sure the above code is added after Locomotive :) In saying that I do belive that for your case it would be best to use the 1st method. Hope this helps.
Just saw the comments below regarding mobile devices. Very strange. This works great on desktop, but I'm getting nothing on mobile, AND all of my Webflow scroll interactions are working perfectly on mobile. Peculiar.
I bookmark nearly every one of your tutorials - this one is going on top hehe. Great job dude.
You are a blessing to the community man! I'm currently building my portfolio now and it's really just filled with features from your tutorials. Keep up the good work!
Thanks so much! Will do. Glad to hear they’ve been helpful
You turned Webflow into a toy for me instead of just a designing tool. Thank you
Back in the day like around 2010 maybe 2012 I think...I stumbled upon Chris Coiyer and CSS Tricks and it changed the game and how incredible of a resource that was. This feels like it all over again. Thank you for your work!
Bro... thank you so much. Finally a smooth scroll that feels natural.
I postponed learning these types of animations for so long because I thought they must be super hard to do. Oh, how wrong I was. This is super simple. Love what you're doing Tim. Thanks
You make this look so approachable. Teaching enough for us to understand and providing enough context to know how to adapt this to our own projects.
Thank you Timothy! This is my favorite tutorial from you. And I would love to see even more about locomotive library in webflow :)
Shame, I can't press the like button more than once. always great tutor, Tim.
love your content so much!
Just found out about you yesterday. You are insane man! Feel like I'll be 80 before getting to your level lol
Love you man thanks so much for this video it's hella helpful, wouldn't know how to implement this in webflow if it wasn't for you!
Speachless... Amazing! love the content, speed it's presented, clarity of information. I'll have to go over every video on your channel. Thank you.
Literally the best tutorials on Webflow, I wish you did multiple on the more tricky applications like locomotive scroll horizontal site for instance. Cheers bud.
Thank you for all your tips and resources. It's amazing and so very helpful
Thanks for making attributes not so scary Tim. Keep them coming!
Great tutorial, thanks Timothy!!!
Another good one! Thanks Tim!
day 2 of me asking timothy to release a web flow course. Like this so he gives us the wizardry web flow course!
This is so amazing. Thanks man!
Another great tutorial, instant click!
This is amazing. Was trying to figure that one out for a while and got stuck!
Thanks for the tutorial!
Unfortunately, there are soma bugs on mobile devices. Are there any solutions for this?
The wizard strikes again!
again, man thanks a lot!
So good!
when i implement the coce it cuts off the bottom of my page until I resize the browser. How can I fix this Timothy
Awesome video as always! I was wondering tho if you know any easy way of making in-page links work with locomotive scroll? Webflows native does not seem to work. Thanks for any insights!
Hi Simon, thanks so much! I’m not currently aware of any workarounds for anchor links with locomotive sadly.
@@timothyricks Okay. Thank you for taking the time to respond!
@@timothyricks Well, on the Locomotive exempel site they have anchor links? :)
@@simongustafsson348 Great find! It looks like it is possible with some custom code. I added examples to the cloneable. webflow.com/website/TRICKS-Locomotive-Smooth-Scroll
Pretty cool. But it disables the scrolling for some reason, I think when I am not directly over the locomotive-scroll div. Tried to add it to my latest project, but didn't have time to troubleshoot.
How about adding an infinite marquee in the locomotive scroll? Do we need to code it also? Please have a tutorial
Accordion/toggle element is causing trouble - I guess that if the full height of the body page is fixed by locomotive and a toggle is opened it gets cut off by the bottom (the more of the FAQ accordions open the more of the bottom cuts off the page)...is there some work-around for this as well please?
great tutorial! thanks a bunch :)
there seems to be some weird bugs on mobile? On an Iphone, i can't flick on top to reload the page and on an Android Samsung (chrome) it's instantly reloading as soon i'm trying to scroll back to the top.
Any ideas/suggestions how to fix this?
Thanks for the tutorial, Timothy!
There is a mistake in “scroll” of “data-scroll-speed” at 10:20.
Ah, thanks so much!
Amazing thanks a lot! How did you do the last part where you can grab the video-wrappers and move them around alongside the layout? :D
I love this... but i'm having an issue. for some reason my page only scrolls down to close to 50% then I'll move the window (browser) and the scroll bar sort of adds the other 50%.... anyone having this?
Hey what's up Mao
@@SMan1999 what’s up brah?
Locomotive calculates the height of your page instantly on page load. Sometimes if images or content isn’t fully loaded yet, it can estimate a shorter height than what’s going to be there. What worked for me was setting a fixed height on my images and media.
@@timothyricks Yeah, I figured that could be it. I'm using lazy loading for some of the images, so that must be it. Thanks Timothy.
Great video! Easy to follow I have a question regarding the videos, where are you hosting them? I'm trying to upload to webflow but it doesn't let me, and the Vimeo/UA-cam option takes longer to load. If somebody answers thanks in advance!
I figured out! did not see the video component on webflow, I was using background video component instead
Is there a site that compiles all of these looks? I'd love to see a variety of looks.
And is it difficult to develop something like this? Give me some insight. Anyone please!
what if I don' t want and skip to apply the smooth scroll on a specific section inside locomotive class? how would I do that?
This is a huge time and performance saver.
BTW, I noticed a couple of strange things once I installed locomotive:
- the webflow animations on the navbar (hide/show on scroll down/up) stopped working
- sometimes divs or whole sections glitch for a split second as they appear into view
Running the basic scroll animations, on Chrome. Am I doing something wrong?
Great content btw!
Also, sections without "data-scroll-section" set to 1 are mysteriously not visible
Hey Alex, I’m sorry it’s giving you issues. This all sounds like normal locomotive behavior. Like mentioned in the tutorial, locomotive isn’t compatible with WebFlow scroll interactions because it removes all page scrolling and just adds a css transform of move to the page wrapper so that WebFlow can no longer tell how far the page is scrolled. Chances are that anything that has WebFlow scroll interactions applied may appear glitchy. When using the effect, I also had to apply data attributes to each section. Not sure if there’s a way to exclude certain sections
ahhh thank you, I the exact same problem and can't figure why
How to we get multiple sticky working? Like a stacking card with locomotive?
Its amazing to get such good information! I have a question, is there a way to use Locomotive Scroll and still be able to make a progression bar in webflow. At the moment when I use LS I lose the operation of the bar.
is there any way to animate elements diagonally?
yes, the data attribute is "data-scroll-direction" and the value is "horozontal" just add that along with the two others - data-scroll-speed, and data-scroll, and you'll see it move. +1 moves to the right and anything -1,-2,-5. etc.. moves to the left
@@MichealBeaulieu diagonally, not horizontally
Do you happen to have worked with locomotive & lottie, where the lottie animates on scroll - but does so smoothly?
Sir how can we implement locomotive scroll on figma
Could you use this in a horizontal scroll website?
Hey Timothy! You mentioned that Locomotive Scrolling blocks Webflow interactions. Does it block only while scrolling in view interactions or all the interactions from the interactions panel? If I implement locomotive scrolling but I still want to have my hover & click animations done natively in Webflow (not with CSS but with an interactions panel) -> can I do it?
That was a great tutorial thanks!
1:45 Custom Code requires a hosting plan. Is it possible to implement horizontal scroll like 07:24 without hosting plan?
I tried but If I set footer sticky then the sticky element is not working. I have tried with luxy also. Is there any solution ?
This is phenomenal. Thank you! Only one concern: What happens from an SEO standpoint when headlines are separated as your hero does? ("Wizardry" "Tricks" "2.0")
One alternative to separate headings could be wrapping each word in spans.
Hey, I applied the to my webflow website but the website doesn't scroll till the end, so the footer isn't visible. how do I fix that?
Hey! thanks for your video! One question, for some reason activating locomotive somehow disable my back-to-top script which allowed my to click a button and go back to the top of my page.. Any guess?
Is fixed background images working with Locomotive?🤔
how do you use absolute position with this?
When I see responsive web pages, I sometimes wonder or think to myself can the big sliders on the page be used as navigation for a different page? You know such as one slider used for home and other slider used for about and next side are used for portfolio?
Does anyone know how to remove that custom scrollbar that Locomotive adds? There definitely has to be an option to do so, can't find it though.
Hey Tim, Do you have an idea on how to get a sticky element to remain at the bottom of the screen with Locomotive? I get it to become sticky, but at the top of the screen. Thanks in advance!
It is not possible to set a header???
Hi Timothy! thank you for this tutorial
I have an issue, i had some z-index elements placed in-between sections (there are some images and elements that overlap another section) and when i apply the locomotive script all of it dissapears, it becomes just single section that can't overlap the other. How can i fix this issue?
how can you make the Locomotive scroll works smoothly with the Background color change? so far in my project it seems like I have to sacrifice one of those as they are not working together
great video and great content. I'm using locomotive scroll in a similar fashion to this and it seems to be working on mobile, but on desktop it's disabled scroll completely and I can't scroll at all. Any idea why this might be happening? I've contained everything in a locomotive-scroll div
Thank you! That’s interesting. No, I haven’t ran into that issue before sadly.
Love this! But sometimes it cuts my page height... I'm using the wizardry technique too, could this interfere with locomotive?
Setting a height on any images usually helps for me. This isn’t anything to do with wizardry, but locomotive calculates the height of the page instantly on page load and sometimes images are not loaded yet.
Your code largely works, but it cuts off my footer and only shows like 40 pixels of it, anyone with the same problem?
Sh*t !! Very nice ! I do the same with ScrollTrigger of Gsap, but Locomotive is way more faster and ready to use with "data-attr"
Hi Timothy! Again, such a good tutorial. But when I go on mobile, a lot of the stuff does not work anymore. Is there some mobile code I am missing?
Hi Phil, did you see the second block of code on that notion page? The first one is for desktop only and the second is for desktop and mobile.
one more question - for horizontal scroll - is it possible to have it start the horizontal scroll only when all the elments are in view like having a horizontally scrolling gallery but when it starts the horizontal scroll only when all the gallery is in view?
Hey Tim, any adivise on how to get this to work for websites that have horizontal scrolling sections as well as vertical? i did as you said but it does't work on the horizonal scrolling section of my site.
Would really appreciate your help on this, it's a hot topic on forum too and nobody seems to have solved it so your my last hope at this point!
thanks in advance!
is there a way to add this to a text element that's rotated 90 degrees ?
I think there is because locomotive uses it on rotated text on their site. I haven’t figured out how to do it yet though
@@timothyricks is there a way to animate the color of a text changing based on the changing elements it is overlayin? some sort of text color inverse code?
Hey Timothy, I can't really use the editor with locomotive scroll as it prevents from scrolling. Do you know how to override this, by any chance?
Thank you!
Hello. I liked your video with horizontal movements of tapes with text (section 2) I'm trying to do the same at home. But as soon as I insert the code, my page stops scrolling when publishing. What could this be related to?
My Scrolling only works if I resize the page, anyone knows how to solve this issue?
I see some comments on it but no answer - is it possible to use Locomotive and also have webflow interactions/animations? Doesn't seem to be possible from what I gather, but am I missing something to tie it together? I have things like a navbar hide animation that don't work once this is implemented. Do I need to somehow do those animations via Locomotive? Is there a line of code to avoid this issue? Thx!
Awesome content g! I have one particular problem with Locomotive Scroll tho. When implemented, it sometimes cuts a part of the footer and/or adds extra space underneath it. I've googled it and it has to do with locomotive loading BEFORE the images. Did you have the same problem? If so, how do I tackle this one? Thanks in advance!
Thank you! One thing that might help is setting a fixed height on all images.
Hi Timothy great tutorial but I have more trouble with it in WF than joy. Beside not rendering full page (random bottom cut even all sections are wrapped) I am facing another problem with navigation. I have fixed animation hide/reveal on scroll that works fine until adding Locomotive, than this animation doesn't do anything and nav it just sits there. Not sure if this is related directly to WF or it is common problem.
Me too. NavBar it's now fixed to the top instead of going up or down when scrolling in navigation
@@crisdimarco after two days to make it work right way I have give up as at this time is for me in WF useless. I have found that WF internal animations do not work when this library is applied it's strange but I was fine with that. Anyway, It looks that it do wrong body calculations. I didn't work with this library in code editor (custom test website) this mean I do not know if it is WF issue or library it self. After switching from page back to home (where I have applied this library) I have always got a different body size, no mother I have done last section (any last section) was cut off. Maybe I will try it again next year as it looks great but for now I will rely on other tools. ;)
Hi Timothy, love what you doing!! Great tutorials. I have one question I would to intergrate locomotive scroll, but I am a bit struggling. But I think there is an easy fix. When I assign all attributes for some reason when I publish the site it won't scroll at all. Do you know what maybe went wrong! Keep doing you're magic! Thanks again
Hi Boris, thank you so much! Sadly, I haven't ran into this issue yet but will let you know if I find a solution. Perhaps comparing the settings to the cloneable in the description may help.
Try putting the custom code inside the body and not inside the head.
@@thomasjoli-coeur6037 Thanks for your comment! It helped me :)
hey, i found all the scroll is not working on a mobile, do you guys know how to solve it?
Hi, I've included a version of the code in the video description that allows Locomotive interactions to work on mobile also.
Please help...Everithing works fine but I have a problem with link jumps to the anchors - ...the whole page freeze for a few seconds. I can figure this out..+ my footer disappeared and Idk why... :D Thank you for your help.
Hi Ivo, webflow anchor links aren't compatible with locomotive scroll since locomotive disables the body from scrolling. I have their code workaround solution saved in the custom code link in the description of this video. Usually, I find if the footer isn't visible, it's often because locomotive calculated the height of the page before the images and content were fully loaded. I've fixed this before by setting a fixed height on all my images.
@@timothyricks Hi Timothy, thank you for your answer. I get the point but I cant figure out the solution for the anchor custom code in the link. I am new to webflow and code...Could you be more specific? Thank you for your time and work.
@@ivokrill Sure thing! It might make more sense when checking out the cloneable in the description but basically this code has two parts. 1. The class of the link you'd like to click on. In this case, it has a class of "nav__link" with a combo class of "is--first". Whenever we click on that link, the code will scroll us down to a section with an ID we'll add in Webflow called "#about".
$('.nav__link.is--first').on('click', function() {
const slider = document.querySelector('#about');
locoScroll.scrollTo(slider)
});
@@timothyricks I really appreciate your help. I solved the problem by setting the data-scroll-section to the footer...now it's working, and the footer is also visible :) But now the accordion/toggle element is causing trouble - I guess that if the full height of the body page is fixed by locomotive and a toggle is opened it gets cut off by the bottom (the more of the accordions open the more of the footer disappears)...is there some work-around for this as well?
Hi!! Just a question, everything looks great in the toggle preview but whenever i launch the website it stays stuck, i can’t even scroll the website, do you have any idea what happened?
Hi mate! It happens due to an issue with section attributes, each section on your page should contain an attribute of data-scroll valued "1". I hope that helps ;D
i mean data-scroll-section*
For some reason, I cannot seem to make it work on Mobile. I added "smartphone{smooth: true}," did not work.
I then added "smoothMobile: 1", it worked, but disabled all Webflow on-scroll animations (which work perfectly on desktop).
Edit: The interactions do work, but I have to scroll really hard. Like, almost flick the site up/down, it seems to be activating the interactions.
Any suggestions/ideas/leads on the fix?
And thanks a ton for the awesome content!
That’s really strange! WebFlow scroll interactions aren’t suppose to work at all with locomotive scroll activated. The way locomotive works on mobile is kind of weird. They designed it for you to press, hold, and drag up and down on the page instead of a quick swipe of the finger. The code attached in the video description enables locomotive on all devices for me
@@timothyricks This gets weirder by the minute haha! Thing is, "while scrolling" interactions did not seem to work, but "when scrolled into view" are working just fine (on desktop).
But as for the mobile issue, that sounds like a MAJOR drawback that is not mentioned anywhere on their git page. Is there a workaround? OR some other script that solves this? Or should I consider dropping Locomotive altogether ? Although, I am pretty there is a fix for this, I mean the agency's site (Locomotive.ca) is super smooth on mobile.
@@charbel-hajj I think they’re accomplishing that by disabling smooth scroll on the elements but keeping it on the page. May be worth a try. I read that the latest version of locomotive disables the effect on mobile by default so added in the extra code to enable it. On their main locomotive page, just the page has smooth scroll but none of the elements that had it on desktop. locomotivemtl.github.io/locomotive-scroll/
@@timothyricks Gotcha, I guess I'll do that too. I'll try to replace any Locomotive animation (like side scrolling) with a Webflow interaction that applies only for mobile. Hopefully they do address that better in their later updates.
Thanks for the reply, cheers!
Hey ~ I'm using Locomotive Scroll for a project, with a very long long long mosque of images, and Locomotive scroll cuts off images, and never seems to load all the images, and just overall very inconsistent, which is not good. Do you think pages like this - many many images (60+) are not a good fit for locomotive scroll? I heard there is a way to delay the loading of the script so that the page loads all the images in the layout THEN locomotive scroll becomes active, but I'm totally stuck on this workaround. Any tips?
Hi, this is because the height of the locomotive container is calculated and added to locomotive container before all of the images have been loaded on the page. My suggestion is to use the padding ratio hack on all images, or using imagesloaded js library.
@@eugene1984cilliers Hi Eugene ~ what do you mean adding ratio hack? Is there a script to offset or delay the loading of Locomotive for like 2 seconds, so all my images will initially load THEN locomotive will initialize.
Make sure the above code is exicuted after your locomotive scripts.
@@eugene1984cilliers yes, but that is the question ~ how do I delay initializing the locomotive script?
@@MichealBeaulieu - So the script that I sent waits for all images to load then RE-initiastes the correct height of the locomotive container, once all of the images have been loaded on the page .I think this is the best way to solve your issue, as the time it would take for different users depending on their internet speed will vary.
If you do not want to use that methos and just delay locomotive, see below:
setTimeout(() => {
scroll.update();
}, 5000); //// This will wait 5 seconds then update locomotives height.
Make sure the above code is added after Locomotive :)
In saying that I do belive that for your case it would be best to use the 1st method.
Hope this helps.
Just saw the comments below regarding mobile devices. Very strange. This works great on desktop, but I'm getting nothing on mobile, AND all of my Webflow scroll interactions are working perfectly on mobile. Peculiar.
Hi, I've just included a version of the code in the video description that allows Locomotive interactions to work on mobile also.
@@timothyricks That's because you're THE MAN.
Am I the only one noticing the weird flickering towards the end of a scroll animation?
Duuuude