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.
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!
@@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!
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?
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.
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.
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 .
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
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?
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.
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?
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!
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/
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.
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!
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.
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.
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.
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 :)
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 !
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...
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?)
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.
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...
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.
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.
@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.. ?
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.
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
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.
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.
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. 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.
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?
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.
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...
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.
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 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
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!
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.
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 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!
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 😁
Excited like a kid to discover what you got for us ! 😜 cheers mate!
You got me laughing... 😁 Thanks!
Another great feature...Thank you and please never stop updating Steroids plugin!
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!
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!
you need to select (Enable freehand mode?) in the Manage JS section for it to function properly. Thanks
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!
Is there a simple way to make the menu sticky when using data-scroll?
Oooh boi I was wondering how to add locomotive library to my website... Awesome man you are a life saver!
Glad I could help!
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!
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 these fantastic additions for Elementor
Could you make a tutorial of the Barba library, please?
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?
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$
Hi, can you tell me if LOCOMOTIVE SCROLL working with containers? And can I adjust fade-in speed.
The best!
Please upload more, The people want more ooh boi!
Thank you Oooh Boi for this video. Please how can I make an element sticky if you use this locomotive scroll?
10X a lot Boi! Again you did awesome video about elementor!
Thanks again!
You are simply Awesome. Keep-up the good work. 👍
Good channel and very good plugin. Continue bro !!
I'll give my best!
keep going Boi you'r the best ever 🙌
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 🙏
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.
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.
Another amazing content
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.
Oooh Boi ! This is awesome !!!
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 .
Another great elementor addon and tutorial, thx!!!
Glad you like it!
Ohh boi, thank you so much for this tutorial
Good show as always, Cheerzzzzz
-Rem
Thanks buddy!
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
Once again amazing! Thanks.
what is the differance between the build in scrolling animation effect from elementor pro vs this one>?
What am I doing wrong? It's more jerky when I turn Locomotive on than if I leave it off.
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?
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
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 :)
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?
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, 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 :(
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..
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, the plugin blocks all other scroll effects (lottie scroll svg and sequence scroll). If you have a solution?
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.
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.
How to have Locomotive scroll and sticky header at the same time ?
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!
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 🙏
awsome! finally smooth scroll in elementor, love it! but all the transform and scroll interactions broke.. some help?
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?
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.
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!
thanks oooh boi, really cool!
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 !
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!!
Tried it but i did not work, I got a blank page like the content was hidden behind a white background
Bro I am facing issues with my sticky header can I know what may be I doing wrong?
Hi! Is there a blurring scroll effect that's compatible with your plugin? Thanks so much!
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/
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?
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
hello, why my header disapear when i activate locomotive scroll ????
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...
Awesome Plugin, congrats! Is there a way to add a data-scroll-speed to a background image? Thanks :)
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.
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.
@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.
Greetings. How can I snap with the mouse on each section?
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
Great video. I really love the plug-in. Can you use this with screen stacking?
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
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.
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.
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.
The plugin isn't working for me 😢
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!
Hi! I can import Code html with the logic in elementor?
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.
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.
Something looks bad. Locomotive scroll almost does not working, break the whole site.
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?
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 :)
How to add sticky Attributes?
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
Does this affect existing motion effects triggered by scroll or viewport?
Oops - should watched the video in full - yes it does thank you
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...
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
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
this is great!!!
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?
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
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.
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!!
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
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.
Would love to see what you can do with the Oxygen Builder
I don't think I'm gonna try.
@@OoohBoi LOL oxygen sucks...seriously ive tried to use it 2 times now.
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!