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!
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?
@@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 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.
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
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.
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, 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!
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?
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 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.
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/
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 !
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...
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?)
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 :)
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! 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.
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 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?
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.
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?
@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.. ?
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?
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.
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.
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.
@@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
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.
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.
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.
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.
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.
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.
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.
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!
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.
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.
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?
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...
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!
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
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!
The best!
Please upload more, The people want more ooh boi!
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?
Hi, can you tell me if LOCOMOTIVE SCROLL working with containers? And can I adjust fade-in speed.
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!
Could you make a tutorial of the Barba library, please?
Thank you for these fantastic additions for Elementor
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$
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.
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.
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!
Good channel and very good plugin. Continue bro !!
I'll give my best!
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
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.
You are simply Awesome. Keep-up the good work. 👍
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 .
What am I doing wrong? It's more jerky when I turn Locomotive on than if I leave it off.
hello, why my header disapear when i activate locomotive scroll ????
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 :(
Oooh Boi ! This is awesome !!!
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 :)
How to have Locomotive scroll and sticky header at the same time ?
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>?
Unfortunally, my header disappears when I activate your plugin. That's because there's custom CSS in it. Any suggestion how to fix it?
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..
Hi, the plugin blocks all other scroll effects (lottie scroll svg and sequence scroll). If you have a solution?
The plugin isn't working for me 😢
awsome! finally smooth scroll in elementor, love it! but all the transform and scroll interactions broke.. some help?
Bro I am facing issues with my sticky header can I know what may be I doing wrong?
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
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!
Hi! I can import Code html with the logic in elementor?
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.
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/
My design breaks, when I active Locomotive scroll. My header and a gallery widget disappears. Do you have a fix for that?
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 !
Another great elementor addon and tutorial, thx!!!
Glad you like it!
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...
Ohh boi, thank you so much for this tutorial
Awesome Plugin, congrats! Is there a way to add a data-scroll-speed to a background image? Thanks :)
How to add sticky Attributes?
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?
Good show as always, Cheerzzzzz
-Rem
Thanks buddy!
Hi! Is there a blurring scroll effect that's compatible with your plugin? Thanks so much!
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!
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.
Another amazing content
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 🙏
keep going Boi you'r the best ever 🙌
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.
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 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 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.
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.
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?
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!
this is great!!!
@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.
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!!
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?
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 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 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.
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?
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
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.
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.
Once again amazing! Thanks.
thanks oooh boi, really cool!
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 :)
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.
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.
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.
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?
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
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.
Does this affect existing motion effects triggered by scroll or viewport?
Oops - should watched the video in full - yes it does thank you
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
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!
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
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
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 :)
Amazing.
Hi what is the best way to contact you? Having some issues with downloads saying file error, thanks
Sorry for a late reply, you can reach me thru oooh(dot)boi29(at)gmail(dot)com
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. 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...
Something looks bad. Locomotive scroll almost does not working, break the whole site.