The smooth, Locomotive Scroll in Elementor - no PRO needed!
HTML-код
- Опубликовано: 31 июл 2024
- Locomotive Scroll is cool, everyone can tell you that. It helps you turn any bad or boring layout into a piece of art that moves. It brings the excitement of scrolling to the table, regardless of the Browser brand. From now on, it can easily be used in Elementor as well. Create your websites with the simplicity of Elementor, then spice it all up with the smooth scroll, parallax, reveals, and much, much more. Enjoy!
-------------------------------------------------- EXTRAS!
If you plan to buy Elementor PRO - buy from this link and help me keep this channel alive!
be.elementor.com/visit/?bta=1...
OoohBoi Steroids for Elementor plugin page:
wordpress.org/plugins/ooohboi...
Visit my Payhip shop for more cool stuff:
payhip.com/OoohBoi
The training file:
gum.co/ffZcP
The Locomotive Scroll @ Github:
github.com/locomotivemtl/loco...
github.com/locomotivemtl/loco...
You might consider buying me a coffee if you find my work helpful for your business:
www.paypal.me/ooohboi
-------------------------------------------------- CREDITS!
-Music: Corporate Uplifting Chill by MusicLFiles
Link: filmmusic.io/song/6298-corpor...
License: creativecommons.org/licenses/b... 
Хобби
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!
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 😁
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!
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!
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!
Thank you for these fantastic additions for Elementor
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!
You are simply Awesome. Keep-up the good work. 👍
Once again amazing! Thanks.
Oooh Boi ! This is awesome !!!
keep going Boi you'r the best ever 🙌
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!
Another amazing content
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$
Good channel and very good plugin. Continue bro !!
I'll give my best!
thanks oooh boi, really cool!
Ohh boi, thank you so much for this tutorial
Another great elementor addon and tutorial, thx!!!
Glad you like it!
this is great!!!
The best!
Please upload more, The people want more ooh boi!
10X a lot Boi! Again you did awesome video about elementor!
Thanks again!
Just Awesome
awesome and genius
Good show as always, Cheerzzzzz
-Rem
Thanks buddy!
Amazing.
Super man !
Oooh boi 😍
Luv u bro
Very good!
Hvala Ivane!
Great video. I really love the plug-in. Can you use this with screen stacking?
Thankyou ❤️
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.
you need to select (Enable freehand mode?) in the Manage JS section for it to function properly. Thanks
Is there a simple way to make the menu sticky when using data-scroll?
Thank you Oooh Boi for this video. Please how can I make an element sticky if you use this locomotive scroll?
Vwey cool 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 :)
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?
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.
The best
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/
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.
Awesome Plugin, congrats! Is there a way to add a data-scroll-speed to a background image? Thanks :)
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 welcome, thanks for watching!
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, can you tell me if LOCOMOTIVE SCROLL working with containers? And can I adjust fade-in speed.
Could you make a tutorial of the Barba library, please?
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?
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! Is there a blurring scroll effect that's compatible with your plugin? Thanks so much!
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 🙏
im wondering why i cant get a delay running?
isnt it data-scroll-delay|number ?
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!!
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.
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?
WAS waiting any thing from y
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...
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 !
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
what is the differance between the build in scrolling animation effect from elementor pro vs this one>?
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, the plugin blocks all other scroll effects (lottie scroll svg and sequence scroll). If you have a solution?
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?
Bro I am facing issues with my sticky header can I know what may be I doing wrong?
I always imagine animation and layout on elementor based on the features of Oooh Boi plugin 🤣
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.
Plugin not working on wordpress 6.2 version. I don't see the plugin in the wordpress toolbar
My design breaks, when I active Locomotive scroll. My header and a gallery widget disappears. Do you have a fix for that?
hello, why my header disapear when i activate locomotive scroll ????
How to have Locomotive scroll and sticky header at the same time ?
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 🙏
Tried it but i did not work, I got a blank page like the content was hidden behind a white background
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
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.
Hi! I can import Code html with the logic in elementor?
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/
Greetings. How can I snap with the mouse on each section?
auto subscribes
awsome! finally smooth scroll in elementor, love it! but all the transform and scroll interactions broke.. some help?
What am I doing wrong? It's more jerky when I turn Locomotive on than if I leave it off.
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 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.
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.
Is there a way to set the values using dynamic tags, so that they can be set globally? e.g. if you set a speed attribute of "2" to dozens and dozens of widgets all over your site, and then later decide you want it to be "3" instead, you'd have to find and edit each one individually. If instead the key could take its value from an ACF field (for example), you could change them globally.
That would be an awesome feature! However, as you know, the data-attributes are not custom classes... so it's just the way it is.
@@OoohBoi I'm sure I dont appreciate the difficulty of implementing my suggestion, but notice that the native elementor data attribute field in the advanced tab of each widget has a dynamic tag option. that makes me wonder if my suggestion is possible.
How to add sticky Attributes?
thankssss
Welcome
@@OoohBoi Which localhost server do you suggest for windows.
@@qwe1235748 I don't recommend Windows in the first place, I gave up 12 years ago. But if there's MAMP for Windows, I'd definitely go for it.
@@OoohBoi got your point. Thanks for answering my query :)
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! 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.
Unfortunally, my header disappears when I activate your plugin. That's because there's custom CSS in it. Any suggestion how to fix it?
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
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
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 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.
HI Oooh Boi, I bought Elementor with your code. One question: is it possible to rotate an element while scrolling with Locomotive Scroll? thanks. Amazing job!
Thanks! Rotation is possible with the GSAP. My latest video tutorial teaches you how to include the GSAP, ScrollTrigger & the Locomotive Scroll to Elementor, and how to make them all work together.
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!
@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.
Does this affect existing motion effects triggered by scroll or viewport?
Oops - should watched the video in full - yes it does thank you