At last. A developer brings thd Greensock animation library into Elementor! This is fantastic news! Thank you for the update and for all the inexpensive and free files. So good of you.
Hello there, I have installed the plugin, but when I activate the locomotive scroll, it messes up with my header, footer, and some other JS functions. Anyone has an idea on how to fix that?
Header disappears when the locomotive scroll is enabled. Plus some elements like the CTA widget's photo disappear as well. I'm only using Epro & a caching plugin(autoptimize). Any ideas?
@@HaseebKhalid I think it's because Elementor is changing their markup over time and there's conflict with the plugin's code. I wouldn't recommend it since even if you find a workaround at some point it's going to stop working.
Please let me know how can I change the scrollbar color? Cause the color you set by default is not perfect for my site. There is a dark color combination I have used in my site.
Thank you so much for this! Looking forward to your part 2 on gsap and scroll trigger. I remember asking you scroll trigger /waypoints stuff last year, really excited to see that you've explored this!
Hi, thanks for your great work! I'm a beginner and have been stuck on the same problem for 5 hours: The scrolling and animations work perfectly. BUT: I have the free Elementor and my menu links don't work anymore. When I click on a menu item, I am taken there but can no longer scroll, for example. I have often read that this is normal because Locoscroll crashes it (as you also say in the video). But what can I do about it? I understand how to add "data-jump-to" for buttons in Elementor, but how do I enter that for anchor links in the menu? I don't edit the menu with Elementor but with the WordPress Customizer. I can't enter an addition there. MANY THANKS!😀
Hey @Oooh Boi. This is where I'm stuck too, even thought I've tried it on anchor tag use "data-jump-to" attribute it doesn't work also. Can you help us!
hey, I have a problem with my sticky header. My sticky header or the plugin doesn't seem to work with your plugin. I would really appreciate it if you can get back to me ASAP | Also we I click one of the links in my nav-menu; it seems to get stuck where the anchor is position so I cannot scroll up
Thank you very much for all the AMAZING content and the enrichment of Elementor. I would like to know please if there is a way to deactivate the Locomotive Scroll effect for a specific page or pages? I can’t figure out how to have both Locomotive Scroll and Screen Stacking at the same page. Thank you in advance
You can't enable/disable per page - even though that might be a nice feature. However, you can create that Screen Stacking (or the Layered Pinning) by using the GSAP - greensock.com/forums/topic/25664-layered-pinning-and-revealing-panels/
Hi, one of the most smooth scroller i saw but strange enough it does not work good. It removes elements or even endup on a white page. Sticky menu is gone. Any idea how to fix this?
Thanks for the tutorial. How to make use of the tutorial file. I've uploaded in elementor templates and after that what eaxctly i have to do? Please help .
Hi Oooh Boi, I have a question. I'd like to use Wordpress menu for one-page site with anchors (e.g. to make eaiser to add menu in header. footer and off-canvas). How to use Wordpress menu with anchors AND locomotive scroll? There is no way to add custom attributes with Wordpress menu elements...
I also tried adding some basic html in the footer using the "Insert Headers and Footers" by WPBeginner but same issue - white blank space at the bottom when activating Locomotive - I hope this can be resolved?
@@OoohBoi any custom code breaks if i insert it via elementor custom code or using a plugin when locomotive is enabled but works when disabled so there is a conflict
@@wgm247 It can't be that you're the only one having that kind of problem. Please check your own JS code in the browser console, be sure everything is enclosed.
Hola. Me gustó mucho tu video y bajé tu plugin porque quiero hacer una web con scroll, pero se me ha presentado algunos inconvenientes, cuando activo locomotive scroll todo está normal, por ahora, apenas estoy conociendo este efecto, pero, por alguna razón, el footer se esconde o se desactiva, he estado buscando la razón pero ha sido en vano, por eso acudo a tí, para que me des algunos consejos de qué podría ser la razón, utilizo Elementor y el tema es Generative press free. Gracias de antemano.
Try to go to the WP Admin, select Steroids for Elementor > Manage JS Libraries, and then tick the checkbox next to "Enable freehand mode?". Save, see whether it helps. In general, Locomotive Scroll relies on the CSS transforms. position:fixed under something with a transform no longer has fixed behavior.
Hi Oooh Boi and thank for your work ...... i have a question ..... i have to do stycky a menu ..... and i have to put it out the "data-scroll-container", how can i do?
You can't because the "data-scroll-container" has been added programmatically. It wraps up everything, one level below the BODY tag. I believe that you already know about the sticky elements and the Locomotive Scroll problem (github.com/locomotivemtl/locomotive-scroll/issues/237), otherwise you wouldn't be asking how to put it outside the container. Anyhow, you can use the GSAP + ScrollTrigger for any kind of scroll-triggered animations. As I recall, there's also some sort of the "natural" scroll easing (rather that smoothing) for ScrollTrigger: codepen.io/ihatetomatoes/pen/PoZLpbp ... or ask Google.
@@OoohBoi tk for you answer ..... i have just did it in onother project (without elementor) .... I put the (fixed) menu outside the data-scroll-container: ihc.meloncelli.net/ ...... this is possible to do with elementor?
I got the training file, but the horizontal section does not work. The field column image shows up, but as you scroll, the screen goes blank. Any ideas? Many thanks
Sorry, please ignore this, I am not sure why it didn't work but maybe I didn't save the settings. SO it's all good, however, I'd like to get the first example file rather than the training one please.
Thank you for this - do you know how to do the equivalent anchor trick in WebFlow? It doesn't allow me to enter the "#" or "|" in the custom attributes section.
@Oooh Boi Since oyu ask in the video! i would love to have page transition ! maybe ? swup.js ... What i am searching now for some time is a good and ez way in have page transition and add them like you use Locomotive ... is this possible ?
No need for additional JS libraries, GSAP has it all. Here's one example: greensock.com/forums/topic/19492-page-transition/ ...but if you ask Google, you'll find more
@@OoohBoi Can you make a video how to use that with elementor ? .. also what about all those very smooth transtations ... with easy in and out... you always have on the awward pages.. ?
You can use "data-scroll-sticky" instead. Or, if you include the GSAP, you can go for "pinning". Please understand that the parallax (Loco Scroll) relies on the CSS transform which kills the sticky of fixed position.
Hello, excellent extension. However, when I install it on my site with Elementor, my texts come off. It does to me on all my sites. An idea ? Thank you !
This works great BUT I'm trying to create a background color transition using a plugin called Premium Add-ons. The transition only works if the Locomotive scroll is turned off. Any way to make it work? Thanks in advance!
@@OoohBoi oh, i see, however the page doesn't scroll either. maybe that's something to do with otehr plugins installed.. it happens onece i turn loco on
In Elementor Pro "Custom Code" section, I put some basic code to display my copyright, but after I activated Locomotive scroll, that footer credit o longer displayed and there was a white blank space there instead. FYI I specified the code in Elementor Custom Code as - End. So it looks like Locomotive is interferring with elementor custom code feature.
Maybe it's just you doing things wrong! Activate "Hello Elementor" theme for a while and see whether all is good. If true, then you'll know that your WP theme is a bit faulty.
@@OoohBoi Maybe you should call it buying good kharma! [-; Also I have a question. I bought the Locomotive Elementor.json template. How do you add the images to your templates? I am building up my own library of json's and when I save them from projects the images are left behind in the wordpress media folder. I know there is a plugin but is there a way to set it up so it happens automatically? What would be the best or the right set up? I'd love to hear you on that topic. Thanks in advance!
Please next time try to describe what exactly doesn't work so I might provide an advice or a solution. When you just say "do not seem to work", it tells me nothing.
Thank you very much! very nice of you to share your knowledge! Btw i only have one issue; when i use the attribute (data-scroll-speed) on some text it works fine but (mix-blend-mode) stops working! is there a way to solve this please?
That's the bug! As I recall, you have to add the background-color to the underlying element ... or something like that. But if you ask Google, it might tell you more about.
Thank you so much you help me a lot! but i have some problems with my build.. i use the hello theme and the header and footer don't react as one with the page and got smash
@@glencoe1266 So I can't even do on one page fixed header, that's a pretty serious problem... either way that's an awesome plugin and when it's fixed it will even more amazing! can't wait what will be next
That's not the problem at all, it's just how CSS transformations work. You can use the GSAP and ScrollTrigger combo to deploy some scroll triggered animations WITHOUT the smooth scroll effect. In that case "sticky" and "fixed" position will work fine.
@@OoohBoi Almost everyone i have showed locomotion and GSAP animations love it initially but then hated it once they had to use it or build with it, especially the fixed elements issue regardless. Yeah its fun but from a UX POV its all levels of terrible. And the scrolling hijack is universally hated except by on trend web designers. Thats just my POV and my observations. It might differ in your circle or bubble.
Hey, first of all , i gotta admit that you've done a great job :) I want to know, is there anyway that I can disable data-scroll-direction in mobile view and make it work just for desktop view ? any help would appreciated :)
Hi Oooh Boi! I have a question. I bought the Locomotive Elementor.json template. How do you add the images to your templates? I am building up my own library of json's and when I save them from projects the images are left behind in the wordpress media folder. I know there is a plugin but is there a way to set it up so it happens automatically? What would be the best or the right set up? I'd love to hear you on that topic. Thanks in advance!
Do you export from the localhost? If you do then the photos won't be available upon import, you rather have to keep everything on the remote server and do the export from there.
Hi there! awesome video!! thank so much, love your tutorials. Btw I tried to use it but I think something is wrong with Locomotive Scroll and the Elementor Video Widget. If the cursor stop on a video it won't scroll again, you MUST move the cursor anywhere but the video so you can be able to scroll again. (how can I fix it?)
Hi Oooh Boi. I've been using the steroids. They work great!. As long as you purge the cache once in a while... [-; A question to go with the glider, would it be possible to give it touch screen possibilities? So on mobile devices people could swipe the glider? I'd love to know. Thanks.
@@OoohBoi Dammit I need new glasses. I thought I'd seen it. Thanks! Sorry to bother you. And.. did you see the question in the reply before this comment? About Json files and attaching images? I'd love to hear. Thanks for all. I really appreciate it.
Thank you! You're so awesome. I got 2 questions, does this also work when linking to an Anchor on another page? Can it implement the "lerp effect", the effect letter by letter? Good explanation and details. Also great of you to explain the Anchor workaround. Respect man.
Locomotion can not "identify" or extract the anchor link from the URL, that would be nothing but the regular anchor link which doesn't work, because there's the data-attribute missing. As for the LERP... well, if something like that is possible with the GSAP then you can already do it! Enable GSAP, and then use Elementor's Custom Code (Elementor PRO) or WP Coder plugin to add your own JS code.
This is an amazing video. Is there any way you could explain or demonstrate how to create a sticky header using Locomotive Scroll. I had one created which used getCurrentScroll() to append a "sticky" class, but I'm seeing that with locomotive scroll the page doesn't actually scroll. Thank you 🙂
Thanks! Your question has been discussed multiple times and there are also many topics on that subject all around the web... shortly, you can't use sticky position with the LocoScroll.
hey I need some help, everytime I activate the plugin everything on my site disappear, Im not using anything strange on my site only elementor pro features, can someone help me?
is it a sticky header? Sticky, fixed or absolute positioned elements will not work with Locomotive-scroll. That's a real pity, but I don't think it can be solved.
The data-scroll-container HTML element is injected via the plugin and it wraps the whole webpage. It's the first child element of the body element. Sticky elements only work when they are OUTSIDE the data-scroll-container, but unfortunately that's not possible with Elementor.
Sticky (or fixed) element is not ignored, it just doesn't fit the concept of the parallax. You can use the GSAP and the ScrollTrigger without the Locomotive Scroll if you're about to use sticky or fixed position elements.
@@OoohBoi I've done further tests and yes it is possible - at my end at least: when the trigger for playing Lottie files is set to 'scroll' it clashes with gsap, when the trigger is set to viewport Lottie works fine. Furthermore, Ive added an EP anchor to the very top of the page - for footer 'back to top' button and with gsap enabled there is a gap (offset) above the header... another headache :)
@@DidierSajnoWebDesign Are you running your website on the "Hello Elementor" theme? The GSAP itself doesn't have anything to do with the onScroll event unless its plugin ScrollTrigger is activated. Does that help maybe?
Oops - should watched the video in full - yes it does thank you
2 ปีที่แล้ว
Thank you for this great plugin. I'm facing a weird issue using the Locomotive Scroll feature. Pages on my website seem to stop scrolling at certain locations (can't reach the bottom of pages). I've tried this on two different websites, the issue is persistent. I've tried disabling other plugins but to no avail. Please help if you can. Thanks again.
Check the JS Console with Developer tTools of your Browser, there must be some JS error going on. Once you figure out what it was (and rectify it), you'll be good.
Hello. I have been looking for such a plugin for a very long time. I installed it, but when I turn on Locomotive Scroll, the scrollbar completely disappears on my site and the scroll does not work with both the mouse and the keyboard. 🧐 Any tips? I've tried disabling all other plugins and using them on other pages, but it doesn't seem to help.
Thanks!! Please inform yourself about what the Locomotive Scroll is and how it works before you start using it. The most important fact about LS is that it hijacks the normal browser scroller.
@@OoohBoi im just creating pages on elementor. www.garbar.design/paulsench I can't launch the locomotive scroll on it. I don't know what I do wrong...
Hey thanks for providing this for free, but why do you ask for comments below if you are not planning to answer all the issues that people come up with? Some of them are pretty standard and they come up in the comments again and again, but you provide no answer. I have an issue with elements disappearing and my header suddenly behaving as sticky and then appearing again further down in the page (above other elements) for no reason. Do you have some suggestion for this?
It looks like it's being deprecated... how the heck I missed that one? But still, how the heck everything works right on my end? ...and why the heck am I getting an error when the window.on("load",function() {}) is used ?!? What kind of an error you got in the Console, I mean what does it say? Please make the screenshot! Thanks!
Your videos are awesome! I am using your plugin to set up a Locomotive smooth scroll. But, I am facing an issue because of this transform: matrix3d. May i know how to disable this? any suggestion please?
Some more bad news im afraid... in elementor, any image in a section background set to "fixed" positive for that parallax kind of effect on scroll breaks with locomotive enabled. When disabled, it works again.
If you can please fix these issues with Locomotive, I would love to use this... as Elementor is lacking in nice scroll effects like this. Thanks much appreciated.
Hey bro , your column link feature is super cool BUT.... could you please add the ability to be able to right click the applied link and be able to "open in new tab" etc?
@@OoohBoi no worries too easy thanks mate. Just a note when I enable locomotive it cuts off about third of the page of scrolling ability(only on shop pages) , not sure if anyone else has had this problem.... Thanks heaps for your work mate it is outstanding!
This is amazing so first I wanna thank you a lot for all the work, one of the things it drives me crazy about elementor is that every time I have an idea and look for a hint on how to do it in elementor 90% of the time it's just "use this or that plugin" so again, thanks a lot for your hard work and all the help. Now I just have a problem with locomotive scroll and the thing is that I have a sticky vertical navigation that, the moment I activate locomotive scroll the navigation stop being sticky, I made this vertical menu as a single page template, is there any way I can fix this?
Thanks! Here's why you can't use sticky nor fixed positioned elements with the Locomotive Scroll: github.com/locomotivemtl/locomotive-scroll/issues/237
@@OoohBoi I feel like this information is not pushed enough. There should be a disclaimer alluding to this fact of not being able to use sticky or fixed elements. I feel it would be saving people a lot of time and stress wondering why it doesn't work with their fixed or sticky headers.
@@OoohBoi Please help, I tried to use "data-scroll-sticky" in Locomotion custom attribute area, but the vertical menu is still not fixed, may I know where goes wrong?
Yo boi! This is nice, but we lose features like sticky which may be acceptable, but popups don't work either and in my opinion it is essential to create responsive hamburger menus.
It's either the Loco Scroll or else. I don't have any impact on how that library is made, I just made it available in case someone finds it useful. Maybe you can rather use the GSAP, not sure about your goals buddy...
At last. A developer brings thd Greensock animation library into Elementor! This is fantastic news! Thank you for the update and for all the inexpensive and free files. So good of you.
It doesn't always have to be about the money 😁
Another great feature...Thank you and please never stop updating Steroids plugin!
Excited like a kid to discover what you got for us ! 😜 cheers mate!
You got me laughing... 😁 Thanks!
Is there a simple way to make the menu sticky when using data-scroll?
you need to select (Enable freehand mode?) in the Manage JS section for it to function properly. Thanks
Hi, can you tell me if LOCOMOTIVE SCROLL working with containers? And can I adjust fade-in speed.
Hello there, I have installed the plugin, but when I activate the locomotive scroll, it messes up with my header, footer, and some other JS functions. Anyone has an idea on how to fix that?
Does this work with columns? Ive played around for a while now but it seamed to me that it isnt function with colums layout
same issue here 🙈 would be thankful for your help 🙏
Header disappears when the locomotive scroll is enabled. Plus some elements like the CTA widget's photo disappear as well. I'm only using Epro & a caching plugin(autoptimize). Any ideas?
have you found solution for that i am also facing same issue.
@@HaseebKhalid I think it's because Elementor is changing their markup over time and there's conflict with the plugin's code. I wouldn't recommend it since even if you find a workaround at some point it's going to stop working.
Please let me know how can I change the scrollbar color? Cause the color you set by default is not perfect for my site. There is a dark color combination I have used in my site.
Could you make a tutorial of the Barba library, please?
Thank you so much for this! Looking forward to your part 2 on gsap and scroll trigger. I remember asking you scroll trigger /waypoints stuff last year, really excited to see that you've explored this!
There you go!
Thank you Oooh Boi for this video. Please how can I make an element sticky if you use this locomotive scroll?
My freaking god. Was waiting for this one and you nailed it as usual! What a tutorial, I cannot wait to test it out! Thanks a lot.
OK, I hope you'll like it!
Hi, thanks for your great work! I'm a beginner and have been stuck on the same problem for 5 hours: The scrolling and animations work perfectly. BUT: I have the free Elementor and my menu links don't work anymore. When I click on a menu item, I am taken there but can no longer scroll, for example. I have often read that this is normal because Locoscroll crashes it (as you also say in the video). But what can I do about it?
I understand how to add "data-jump-to" for buttons in Elementor, but how do I enter that for anchor links in the menu? I don't edit the menu with Elementor but with the WordPress Customizer. I can't enter an addition there.
MANY THANKS!😀
Hey @Oooh Boi. This is where I'm stuck too, even thought I've tried it on anchor tag use "data-jump-to" attribute it doesn't work also. Can you help us!
same
Same. We need a recent tutorial :(
What am I doing wrong? It's more jerky when I turn Locomotive on than if I leave it off.
hey, I have a problem with my sticky header. My sticky header or the plugin doesn't seem to work with your plugin. I would really appreciate it if you can get back to me ASAP | Also we I click one of the links in my nav-menu; it seems to get stuck where the anchor is position so I cannot scroll up
Thank you very much for all the AMAZING content and the enrichment of Elementor.
I would like to know please if there is a way to deactivate the Locomotive Scroll effect for a specific page or pages? I can’t figure out how to have both Locomotive Scroll and Screen Stacking at the same page.
Thank you in advance
You can't enable/disable per page - even though that might be a nice feature. However, you can create that Screen Stacking (or the Layered Pinning) by using the GSAP - greensock.com/forums/topic/25664-layered-pinning-and-revealing-panels/
Hi, one of the most smooth scroller i saw but strange enough it does not work good. It removes elements or even endup on a white page. Sticky menu is gone. Any idea how to fix this?
what is the differance between the build in scrolling animation effect from elementor pro vs this one>?
hello, why my header disapear when i activate locomotive scroll ????
Hi, the plugin blocks all other scroll effects (lottie scroll svg and sequence scroll). If you have a solution?
Thanks for the tutorial. How to make use of the tutorial file. I've uploaded in elementor templates and after that what eaxctly i have to do? Please help .
for some reason, after doing the exact thing you did on this video, my hero section still disappears. what is the cause?, what do i do?
WP Admin, Steroids for Elementor > Manage JS LIbraries : Enable Freehand Mode ... fingers crossed that it helps!
I was hoping for this video. Damn you remain a real hero. Thank you so much.
Thanks buddy, it's always nice to read such a comment!
Awesome once again! One question: How did you make the slider with the 3 boxes in 0:22 ? I want to make sliders with my own navigation.
I hope I'll find some spare time to do another tutorial on that subject.
Unfortunally, my header disappears when I activate your plugin. That's because there's custom CSS in it. Any suggestion how to fix it?
Hi Oooh Boi, I have a question. I'd like to use Wordpress menu for one-page site with anchors (e.g. to make eaiser to add menu in header. footer and off-canvas). How to use Wordpress menu with anchors AND locomotive scroll? There is no way to add custom attributes with Wordpress menu elements...
Maybe this one can help: www.advancedcustomfields.com/resources/adding-fields-menu-items/
I also tried adding some basic html in the footer using the "Insert Headers and Footers" by WPBeginner but same issue - white blank space at the bottom when activating Locomotive - I hope this can be resolved?
OK if you say so.
@@OoohBoi any custom code breaks if i insert it via elementor custom code or using a plugin when locomotive is enabled but works when disabled so there is a conflict
@@wgm247 It can't be that you're the only one having that kind of problem. Please check your own JS code in the browser console, be sure everything is enclosed.
@@OoohBoi resolved now enabling freehand in locomotion
How to have Locomotive scroll and sticky header at the same time ?
Hola. Me gustó mucho tu video y bajé tu plugin porque quiero hacer una web con scroll, pero se me ha presentado algunos inconvenientes, cuando activo locomotive scroll todo está normal, por ahora, apenas estoy conociendo este efecto, pero, por alguna razón, el footer se esconde o se desactiva, he estado buscando la razón pero ha sido en vano, por eso acudo a tí, para que me des algunos consejos de qué podría ser la razón, utilizo Elementor y el tema es Generative press free. Gracias de antemano.
My design breaks, when I active Locomotive scroll. My header and a gallery widget disappears. Do you have a fix for that?
I had problem when I activate locomotive scrolling, section background image which is fixed position not work it's scroll with section
Try to go to the WP Admin, select Steroids for Elementor > Manage JS Libraries, and then tick the checkbox next to "Enable freehand mode?". Save, see whether it helps. In general, Locomotive Scroll relies on the CSS transforms. position:fixed under something with a transform no longer has fixed behavior.
Hi Oooh Boi and thank for your work ...... i have a question ..... i have to do stycky a menu ..... and i have to put it out the "data-scroll-container", how can i do?
You can't because the "data-scroll-container" has been added programmatically. It wraps up everything, one level below the BODY tag.
I believe that you already know about the sticky elements and the Locomotive Scroll problem (github.com/locomotivemtl/locomotive-scroll/issues/237), otherwise you wouldn't be asking how to put it outside the container.
Anyhow, you can use the GSAP + ScrollTrigger for any kind of scroll-triggered animations. As I recall, there's also some sort of the "natural" scroll easing (rather that smoothing) for ScrollTrigger: codepen.io/ihatetomatoes/pen/PoZLpbp ... or ask Google.
@@OoohBoi tk for you answer ..... i have just did it in onother project (without elementor) .... I put the (fixed) menu outside the data-scroll-container: ihc.meloncelli.net/ ...... this is possible to do with elementor?
@@OoohBoi there will be a tutorial for use of GSAP + ScrollTrigger (for Elementor)? TK
I got the training file, but the horizontal section does not work. The field column image shows up, but as you scroll, the screen goes blank. Any ideas? Many thanks
Also, the one I paid for is the training file you say is free, not the one shown first.
Sorry, please ignore this, I am not sure why it didn't work but maybe I didn't save the settings. SO it's all good, however, I'd like to get the first example file rather than the training one please.
No problem. Shit happen - as you know :)
awsome! finally smooth scroll in elementor, love it! but all the transform and scroll interactions broke.. some help?
Thank you for this - do you know how to do the equivalent anchor trick in WebFlow? It doesn't allow me to enter the "#" or "|" in the custom attributes section.
@Oooh Boi Since oyu ask in the video! i would love to have page transition ! maybe ? swup.js ... What i am searching now for some time is a good and ez way in have page transition and add them like you use Locomotive ... is this possible ?
No need for additional JS libraries, GSAP has it all. Here's one example: greensock.com/forums/topic/19492-page-transition/ ...but if you ask Google, you'll find more
@@OoohBoi Can you make a video how to use that with elementor ? .. also what about all those very smooth transtations ... with easy in and out... you always have on the awward pages.. ?
@@fatjay9402 GSAP + ScrollTrigger tutorial is coming up. So, it won't be about the page transition specifically but rather more general.
really love this plugin, it's can mindblowing your website when you are not advance at code
Glad you enjoy it buddy, thanks for the feedback!
Bro I am facing issues with my sticky header can I know what may be I doing wrong?
Another question. Using locomotive in Elementor I realised that I can't fix any element. I am trying to do a sticky menu but I did not get it work.
You can use "data-scroll-sticky" instead. Or, if you include the GSAP, you can go for "pinning". Please understand that the parallax (Loco Scroll) relies on the CSS transform which kills the sticky of fixed position.
@@OoohBoi It works.
@@Hyeronymus23 Hey! can you explain how you did it?
@@Hyeronymus23 can u plz explain how you made the menu sticky with locomotive , thnx
Hello, excellent extension. However, when I install it on my site with Elementor, my texts come off. It does to me on all my sites. An idea ? Thank you !
This works great BUT I'm trying to create a background color transition using a plugin called Premium Add-ons. The transition only works if the Locomotive scroll is turned off. Any way to make it work?
Thanks in advance!
the locomotive isn't working for me. when I turn it on - the scroll bar simply dissapears.
It IS supposed to disappear and be replaced with the locomotive scroll(bar).
@@OoohBoi oh, i see, however the page doesn't scroll either. maybe that's something to do with otehr plugins installed.. it happens onece i turn loco on
In Elementor Pro "Custom Code" section, I put some basic code to display my copyright, but after I activated Locomotive scroll, that footer credit o longer displayed and there was a white blank space there instead. FYI I specified the code in Elementor Custom Code as - End. So it looks like Locomotive is interferring with elementor custom code feature.
Maybe it's just you doing things wrong! Activate "Hello Elementor" theme for a while and see whether all is good. If true, then you'll know that your WP theme is a bit faulty.
@@OoohBoi My theme is already hello elementor, and the problem persists.
@@wgm247 Did you check your page for JS errors in the browser console? Maybe it's just some tiny, little typo...
@@OoohBoi its now resolved by enabling freehand option in locomotion.. thanks
Oooh boi I was wondering how to add locomotive library to my website... Awesome man you are a life saver!
Glad I could help!
Hi Oooh Boi. Amazing tutorials and fun to watch and learn from too! Thanks so much for all your work. I hope you like your coffee!
Thanks for the coffee buddy, people rarely do that!
@@OoohBoi Maybe you should call it buying good kharma! [-; Also I have a question. I bought the Locomotive Elementor.json template. How do you add the images to your templates? I am building up my own library of json's and when I save them from projects the images are left behind in the wordpress media folder. I know there is a plugin but is there a way to set it up so it happens automatically? What would be the best or the right set up? I'd love to hear you on that topic. Thanks in advance!
Thank you for your tutorial, I tried installing the training file, the horizontal scrolling images do not seem to work.
Please next time try to describe what exactly doesn't work so I might provide an advice or a solution. When you just say "do not seem to work", it tells me nothing.
Greetings. How can I snap with the mouse on each section?
Tried it but i did not work, I got a blank page like the content was hidden behind a white background
Thank you very much! very nice of you to share your knowledge!
Btw i only have one issue; when i use the attribute (data-scroll-speed) on some text it works fine but (mix-blend-mode) stops working! is there a way to solve this please?
That's the bug! As I recall, you have to add the background-color to the underlying element ... or something like that. But if you ask Google, it might tell you more about.
Thank you so much you help me a lot! but i have some problems with my build.. i use the hello theme and the header and footer don't react as one with the page and got smash
You can only use locomotive on one page sites that don't use sticky sections. Its a compromise that is terrible TBH.
@@glencoe1266 So I can't even do on one page fixed header, that's a pretty serious problem... either way that's an awesome plugin and when it's fixed it will even more amazing! can't wait what will be next
@@giginet1992 i am sure there is no fix and its the way it works.
That's not the problem at all, it's just how CSS transformations work. You can use the GSAP and ScrollTrigger combo to deploy some scroll triggered animations WITHOUT the smooth scroll effect. In that case "sticky" and "fixed" position will work fine.
@@OoohBoi Almost everyone i have showed locomotion and GSAP animations love it initially but then hated it once they had to use it or build with it, especially the fixed elements issue regardless. Yeah its fun but from a UX POV its all levels of terrible. And the scrolling hijack is universally hated except by on trend web designers. Thats just my POV and my observations. It might differ in your circle or bubble.
You are my hero !!!
Can this locoscroll applicated for slider control ?? I waiting for your video how to make slider control using locoscroll.
I'm not sure I understand the question... is there any website or the codepen/fiddle example that you can point me to?
@@OoohBoi i wanna try to make slider control like in 0:54 second in this video. Can locoscroll make like that ??
@@imamtrihatmadja9537 That's the Glider extension which is the part of "Steroids for Elementor" add-on, so no need for anything else.
@@OoohBoi i wanna check that part.. thnk so much, my superman..
Hey, first of all , i gotta admit that you've done a great job :)
I want to know, is there anyway that I can disable data-scroll-direction in mobile view and make it work just for desktop view ?
any help would appreciated :)
Thanks! I don't think that the Loco Scroll attributes include media queries...sorry buddy!
Hi Oooh Boi! I have a question. I bought the Locomotive Elementor.json template. How do you add the images to your templates? I am building up my own library of json's and when I save them from projects the images are left behind in the wordpress media folder. I know there is a plugin but is there a way to set it up so it happens automatically? What would be the best or the right set up? I'd love to hear you on that topic. Thanks in advance!
Do you export from the localhost? If you do then the photos won't be available upon import, you rather have to keep everything on the remote server and do the export from there.
@@OoohBoi Nope I make subdomains on my own url and export from there.
Hi there! awesome video!! thank so much, love your tutorials. Btw I tried to use it but I think something is wrong with Locomotive Scroll and the Elementor Video Widget. If the cursor stop on a video it won't scroll again, you MUST move the cursor anywhere but the video so you can be able to scroll again. (how can I fix it?)
To be honest, I don't know why it happens, I guess it has something to do with the Locomotion... did you try to ask Google?
The plugin isn't working for me 😢
Thank you for these fantastic additions for Elementor
Nice. But how work it With a sticky Header?
It doesn't at all, and it's because of the CSS transformations. github.com/locomotivemtl/locomotive-scroll/issues/237
Hi! I can import Code html with the logic in elementor?
Hi Oooh Boi. I've been using the steroids. They work great!. As long as you purge the cache once in a while... [-; A question to go with the glider, would it be possible to give it touch screen possibilities? So on mobile devices people could swipe the glider? I'd love to know. Thanks.
That's already possible, just take a look at the Glider options :)
@@OoohBoi Dammit I need new glasses. I thought I'd seen it. Thanks! Sorry to bother you. And.. did you see the question in the reply before this comment? About Json files and attaching images? I'd love to hear. Thanks for all. I really appreciate it.
Thank you! You're so awesome. I got 2 questions, does this also work when linking to an Anchor on another page? Can it implement the "lerp effect", the effect letter by letter? Good explanation and details. Also great of you to explain the Anchor workaround. Respect man.
Locomotion can not "identify" or extract the anchor link from the URL, that would be nothing but the regular anchor link which doesn't work, because there's the data-attribute missing.
As for the LERP... well, if something like that is possible with the GSAP then you can already do it! Enable GSAP, and then use Elementor's Custom Code (Elementor PRO) or WP Coder plugin to add your own JS code.
@@OoohBoi okay great, thanks for the clear and concise answer! You are truly a hero. God bless you 🙏
The best!
Please upload more, The people want more ooh boi!
Hi! Is there a blurring scroll effect that's compatible with your plugin? Thanks so much!
Awesome Plugin, congrats! Is there a way to add a data-scroll-speed to a background image? Thanks :)
This is an amazing video. Is there any way you could explain or demonstrate how to create a sticky header using Locomotive Scroll. I had one created which used getCurrentScroll() to append a "sticky" class, but I'm seeing that with locomotive scroll the page doesn't actually scroll. Thank you 🙂
Thanks! Your question has been discussed multiple times and there are also many topics on that subject all around the web... shortly, you can't use sticky position with the LocoScroll.
hey I need some help, everytime I activate the plugin everything on my site disappear, Im not using anything strange on my site only elementor pro features, can someone help me?
I suppose you ain't using the "Hello Elementor" theme... so 2 things to do:
1) switch to "Hello Elementor" theme
2) be sure you're running PHP 7+
@@OoohBoi But if I change the theme the site is going to go back do square zero? Thats what I'm afraid of. Thank you for your answer!
@@qimonda That's not correct! The theme itself is like a mask; you can change it but the content remains as is. Don't be afraid buddy :)
Awesome tutorial! Just having an issue with my header. As I activate locomotive scroll - my header will not show up. Any idea how to fix it?
is it a sticky header?
Sticky, fixed or absolute positioned elements will not work with Locomotive-scroll.
That's a real pity, but I don't think it can be solved.
@@franktielemans6624 hmmm this is a real downer if sticky is ignored, is there any work around?
The data-scroll-container HTML element is injected via the plugin and it wraps the whole webpage. It's the first child element of the body element.
Sticky elements only work when they are OUTSIDE the data-scroll-container, but unfortunately that's not possible with Elementor.
Sticky (or fixed) element is not ignored, it just doesn't fit the concept of the parallax. You can use the GSAP and the ScrollTrigger without the Locomotive Scroll if you're about to use sticky or fixed position elements.
@@OoohBoi As always outstanding addition boi, been following you from day 1.. any chance of getting a GSAP + ST tut?
It would appear Gsap conflicts with Lottie files, any idea?
That's literally impossible!
@@OoohBoi Thank you, I'll proceed by elimination...
@@OoohBoi I've done further tests and yes it is possible - at my end at least: when the trigger for playing Lottie files is set to 'scroll' it clashes with gsap, when the trigger is set to viewport Lottie works fine.
Furthermore, Ive added an EP anchor to the very top of the page - for footer 'back to top' button and with gsap enabled there is a gap (offset) above the header... another headache :)
@@DidierSajnoWebDesign Are you running your website on the "Hello Elementor" theme? The GSAP itself doesn't have anything to do with the onScroll event unless its plugin ScrollTrigger is activated. Does that help maybe?
@@OoohBoi I beg your pardon: it's not gsap, it's lokomotive scroll that creates havoc. And, yes I'm using hello. Thank you
Cool video, keep up the great work, i was wondering if you plan to add particle js effects to your plugin ?
Maybe I do that in the future, why not.
Does this affect existing motion effects triggered by scroll or viewport?
Oops - should watched the video in full - yes it does thank you
Thank you for this great plugin. I'm facing a weird issue using the Locomotive Scroll feature. Pages on my website seem to stop scrolling at certain locations (can't reach the bottom of pages). I've tried this on two different websites, the issue is persistent. I've tried disabling other plugins but to no avail. Please help if you can. Thanks again.
Check the JS Console with Developer tTools of your Browser, there must be some JS error going on. Once you figure out what it was (and rectify it), you'll be good.
Hello. I have been looking for such a plugin for a very long time.
I installed it, but when I turn on Locomotive Scroll, the scrollbar completely disappears on my site and the scroll does not work with both the mouse and the keyboard. 🧐
Any tips?
I've tried disabling all other plugins and using them on other pages, but it doesn't seem to help.
Thanks!! Please inform yourself about what the Locomotive Scroll is and how it works before you start using it. The most important fact about LS is that it hijacks the normal browser scroller.
@@OoohBoi im just creating pages on elementor. www.garbar.design/paulsench
I can't launch the locomotive scroll on it.
I don't know what I do wrong...
Can you help me to use smooth scroll in horizontal website?
have you find a solution for horizontal scroll and elementor ? Thanks
@@teuccio73 I used js to make it but it’s not efficient like this one
@@k99944 Thanks can you send me a link ?
How do I turn off the parallax effect?
The parallax is achieved by using the data-attributes so if you delete all of them you gonna end up with the smooth scroll only.
Hey thanks for providing this for free, but why do you ask for comments below if you are not planning to answer all the issues that people come up with? Some of them are pretty standard and they come up in the comments again and again, but you provide no answer. I have an issue with elements disappearing and my header suddenly behaving as sticky and then appearing again further down in the page (above other elements) for no reason. Do you have some suggestion for this?
Really cool! Thanks for that!
Is it possible to activate this for specific pages ?
No, it's not possible (yet). But many people asked the same question so I'll definitely think about.
How to add sticky Attributes?
SO awesome! I just purchased from your site sir!
So odd everyone I see now gets a reply except for me and I actually purchased it$
How to add speed adjustment to scroll to banner link please?
I don't think there's an option to control something like that, at least I haven't been able to find it on the Github...
hello
recheck the 67 line in ooohboi-libs-locomotion.js you have error
It looks like it's being deprecated... how the heck I missed that one? But still, how the heck everything works right on my end? ...and why the heck am I getting an error when the window.on("load",function() {}) is used ?!? What kind of an error you got in the Console, I mean what does it say? Please make the screenshot! Thanks!
@@OoohBoi may be you have not newer jquery. And yes, this error is fixing by use windows.on('load', fun....
your variable is $window, but you write about object window
@@tauruspower4769 I'm up to date with WordPress so I doubt it's outdated jQuery.
Nice! Will you be adding blur animation? :D
"three.js" is about to be included to Steroids so there will be more than just a blur :)
@@OoohBoi Nice! Floating animations are big now. I know Happy Addon does it but it's not perfect haha
Your videos are awesome! I am using your plugin to set up a Locomotive smooth scroll. But, I am facing an issue because of this transform: matrix3d. May i know how to disable this? any suggestion please?
Is barba.js possible in Elementor?
I guess it is, why not... I was planning to include it as well, but didn't have enough time to test is thoroughly, will try with the next update.
I am also seeing barba.js in your plugin, cant stop grinning, and cant wait for the Barba tutorials
OK, it's nice to read that!
@@OoohBoi same here :)
Great video. I really love the plug-in. Can you use this with screen stacking?
Something looks bad. Locomotive scroll almost does not working, break the whole site.
10X a lot Boi! Again you did awesome video about elementor!
Thanks again!
I installed the steroids plugin but it messed up the layout of my website. Do you have any ideas why please? Thank you
In what sense "messed up"? Screenshot, screencast - anything that might help me figure out the problem, please!
Can't do fixed header and footer.. or fixed element at all
Where I can write future requests for the addon?
You could have include it to this comment!
Some more bad news im afraid... in elementor, any image in a section background set to "fixed" positive for that parallax kind of effect on scroll breaks with locomotive enabled. When disabled, it works again.
position:fixed under something with a transform no longer has fixed behavior. Locomotive Scroll relies on CSS transforms!
@@OoohBoi ok thanks for the clarity
Oooh Boi ! This is awesome !!!
Can we download the template of the first website you show in your video? its very nice👌
You can buy it for a small fee. I have to fund this plugin somehow...
@@OoohBoi where can i buy it ?🙏 love your plug-in 👌
@@daanvanmiddendorp122 Sure, it's here: gumroad.com/l/lzyflE Here's the rest: gumroad.com/ooohboi
If you can please fix these issues with Locomotive, I would love to use this... as Elementor is lacking in nice scroll effects like this. Thanks much appreciated.
You can try to use the latest feature from the version 1.7.6 "Enable freehand mode?".
It's under the Steroids for Elementor > Manage JS Libraries
@@OoohBoi yes the freehand version fixed the code issue so my footer is back..thanks!!
Hey bro , your column link feature is super cool BUT.... could you please add the ability to be able to right click the applied link and be able to "open in new tab" etc?
It is the JavaScript emulated link so no right-click, sorry! Open in new tab is a part of the link setting, so it is possible to set it up.
@@OoohBoi no worries too easy thanks mate. Just a note when I enable locomotive it cuts off about third of the page of scrolling ability(only on shop pages) , not sure if anyone else has had this problem....
Thanks heaps for your work mate it is outstanding!
You are simply Awesome. Keep-up the good work. 👍
This is amazing so first I wanna thank you a lot for all the work, one of the things it drives me crazy about elementor is that every time I have an idea and look for a hint on how to do it in elementor 90% of the time it's just "use this or that plugin" so again, thanks a lot for your hard work and all the help. Now I just have a problem with locomotive scroll and the thing is that I have a sticky vertical navigation that, the moment I activate locomotive scroll the navigation stop being sticky, I made this vertical menu as a single page template, is there any way I can fix this?
Thanks! Here's why you can't use sticky nor fixed positioned elements with the Locomotive Scroll: github.com/locomotivemtl/locomotive-scroll/issues/237
@@OoohBoi I feel like this information is not pushed enough. There should be a disclaimer alluding to this fact of not being able to use sticky or fixed elements. I feel it would be saving people a lot of time and stress wondering why it doesn't work with their fixed or sticky headers.
@@OoohBoi Please help, I tried to use "data-scroll-sticky" in Locomotion custom attribute area, but the vertical menu is still not fixed, may I know where goes wrong?
Have you managed to solve this problem?
Thanks a lot! Really nice! How about a tutorial on creating a preloader 😁
greensock.com/forums/topic/22912-just-want-to-share-a-preloader-progress-bar/
@@OoohBoi Nice! Thanks!!
Yo boi! This is nice, but we lose features like sticky which may be acceptable, but popups don't work either and in my opinion it is essential to create responsive hamburger menus.
It's either the Loco Scroll or else. I don't have any impact on how that library is made, I just made it available in case someone finds it useful. Maybe you can rather use the GSAP, not sure about your goals buddy...
Good channel and very good plugin. Continue bro !!
I'll give my best!