The smooth, Locomotive Scroll in Elementor - no PRO needed!

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...

[@larryfroot]

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.

[@OoohBoi]

It doesn't always have to be about the money 😁

[@saeedhajimorad802]

Another great feature...Thank you and please never stop updating Steroids plugin!

[@leonkiong2659]

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]

There you go!

[@ludovicverbeeck]

Excited like a kid to discover what you got for us ! 😜 cheers mate!

[@OoohBoi]

You got me laughing... 😁 Thanks!

[@kotalaadam]

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.

[@OoohBoi]

OK, I hope you'll like it!

[@aequitas7483]

I was hoping for this video. Damn you remain a real hero. Thank you so much.

[@OoohBoi]

Thanks buddy, it's always nice to read such a comment!

[@carolynlogan8011]

Thank you for these fantastic additions for Elementor

[@colinkassies3708]

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!

[@OoohBoi]

Thanks for the coffee buddy, people rarely do that!

[@colinkassies3708]

@@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!

[@markodraganiic]

Oooh boi I was wondering how to add locomotive library to my website... Awesome man you are a life saver!

[@OoohBoi]

Glad I could help!

[@diranachintha8798]

You are simply Awesome. Keep-up the good work. 👍

[@rianirawan3521]

really love this plugin, it's can mindblowing your website when you are not advance at code

[@OoohBoi]

Glad you enjoy it buddy, thanks for the feedback!

[@echomusicswe]

Oooh Boi ! This is awesome !!!

[@147mastery9]

Once again amazing! Thanks.

[@hassankarroch8295]

keep going Boi you'r the best ever 🙌

[@alfredsumawang691]

Another amazing content

[@lifeofjunaid]

this is great!!!

[@azuzaazuza]

Is there a simple way to make the menu sticky when using data-scroll?

[@IDMarketer]

Ohh boi, thank you so much for this tutorial

[@TimGafarov]

thanks oooh boi, really cool!

[@hafid.g]

Good channel and very good plugin. Continue bro !!

[@OoohBoi]

I'll give my best!

[@bySterling]

SO awesome! I just purchased from your site sir!

[@bySterling]

So odd everyone I see now gets a reply except for me and I actually purchased it$

[@osherfreeman6189]

The best! Please upload more, The people want more ooh boi!

[@Kiril_Bulgaria]

10X a lot Boi! Again you did awesome video about elementor!

[@OoohBoi]

Thanks again!

[@redjohnson1338]

Great video. I really love the plug-in. Can you use this with screen stacking?

[@Zuurik_x]

Cool video, keep up the great work, i was wondering if you plan to add particle js effects to your plugin ?

[@OoohBoi]

Maybe I do that in the future, why not.

[@haagsesam]

Another great elementor addon and tutorial, thx!!!

[@OoohBoi]

Glad you like it!

[@stwartmoor277]

you need to select (Enable freehand mode?) in the Manage JS section for it to function properly. Thanks

[@SamuelHq]

Thank you Oooh Boi for this video. Please how can I make an element sticky if you use this locomotive scroll?

[@Rem1431]

Good show as always, Cheerzzzzz -Rem

[@OoohBoi]

Thanks buddy!

[@webwithwp]

awesome and genius

[@francoislemieux9219]

Awesome Plugin, congrats! Is there a way to add a data-scroll-speed to a background image? Thanks :)

[@11digital23]

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!

[@davidsots558]

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.

[@OoohBoi]

I hope I'll find some spare time to do another tutorial on that subject.

[@user-ro4sk8ms3p]

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

[@OoohBoi]

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/

[@md.imranhossain2769]

Just Awesome

[@simeonnenov3499]

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?

[@megaturbo]

Hi, can you tell me if LOCOMOTIVE SCROLL working with containers? And can I adjust fade-in speed.

[@MenachemSpielman]

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.

[@devvio3826]

Luv u bro

[@emailjough]

Amazing.

[@victornet909]

Could you make a tutorial of the Barba library, please?

[@Webrisernl]

what is the differance between the build in scrolling animation effect from elementor pro vs this one>?

[@DhineshRamalingam]

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 .

[@carsonjordan800]

Hi! Is there a blurring scroll effect that's compatible with your plugin? Thanks so much!

[@hermann.s2079]

Hi, the plugin blocks all other scroll effects (lottie scroll svg and sequence scroll). If you have a solution?

[@rocaivan]

Very good!

[@OoohBoi]

Hvala Ivane!

[@WIThEMaN2]

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.

[@OoohBoi]

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.

[@WIThEMaN2]

@@OoohBoi okay great, thanks for the clear and concise answer! You are truly a hero. God bless you 🙏

[@madarauchiha5433]

I am also seeing barba.js in your plugin, cant stop grinning, and cant wait for the Barba tutorials

[@OoohBoi]

OK, it's nice to read that!

[@gad1023]

@@OoohBoi same here :)

[@deenamanick4054]

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?

[@alexismartin1127]

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 !

[@s.ashkankhalili5124]

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 :)

[@OoohBoi]

Thanks! I don't think that the Loco Scroll attributes include media queries...sorry buddy!

[@greenfuture88]

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.

[@teuccio73]

Super man !

[@trongkhoanguyen1568]

Plugin not working on wordpress 6.2 version. I don't see the plugin in the wordpress toolbar

[@thechillinguy]

hello, why my header disapear when i activate locomotive scroll ????

[@attharvwaghmare8166]

Bro I am facing issues with my sticky header can I know what may be I doing wrong?

[@moime3499]

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?

[@niggynetwork8739]

Really cool! Thanks for that! Is it possible to activate this for specific pages ?

[@OoohBoi]

No, it's not possible (yet). But many people asked the same question so I'll definitely think about.

[@bowen192]

What am I doing wrong? It's more jerky when I turn Locomotive on than if I leave it off.

[@aequitas7483]

im wondering why i cant get a delay running? isnt it data-scroll-delay|number ?

[@LuisMouraPT]

How to have Locomotive scroll and sticky header at the same time ?

[@stwartmoor277]

Tried it but i did not work, I got a blank page like the content was hidden behind a white background

[@user-od7bu4qd2y]

awsome! finally smooth scroll in elementor, love it! but all the transform and scroll interactions broke.. some help?

[@OleBoer]

Unfortunally, my header disappears when I activate your plugin. That's because there's custom CSS in it. Any suggestion how to fix it?

[@justfuelit]

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?

[@OoohBoi]

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.

[@aaadsDE]

My design breaks, when I active Locomotive scroll. My header and a gallery widget disappears. Do you have a fix for that?

[@robertrondon7624]

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.

[@eliasbermeo9549]

Greetings. How can I snap with the mouse on each section?

[@sew6959]

Hi! I can import Code html with the logic in elementor?

[@buildwithus3242]

Thankyou ❤️

[@CafePorLaNoche]

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?)

[@OoohBoi]

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?

[@georgetirlea1771]

Thanks a lot! Really nice! How about a tutorial on creating a preloader 😁

[@OoohBoi]

greensock.com/forums/topic/22912-just-want-to-share-a-preloader-progress-bar/

[@georgetirlea1771]

@@OoohBoi Nice! Thanks!!

[@JoyHints]

Oooh boi 😍

[@jnlennart3000]

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!😀

[@kronosgameoftitanstamil9048]

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!

[@deNysWebDesign]

same

[@YourBoiSevin]

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

[@aequitas7483]

Does this work with columns? Ive played around for a while now but it seamed to me that it isnt function with colums layout

[@Nina-wb5be]

same issue here 🙈 would be thankful for your help 🙏

[@TheIndica]

Thank you for your tutorial, I tried installing the training file, the horizontal scrolling images do not seem to work.

[@OoohBoi]

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.

[@sameerpatelxyz]

I had problem when I activate locomotive scrolling, section background image which is fixed position not work it's scroll with section

[@OoohBoi]

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.

[@knoclar7118]

I always imagine animation and layout on elementor based on the features of Oooh Boi plugin 🤣

[@odiahebuka5790]

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?

[@OoohBoi]

WP Admin, Steroids for Elementor > Manage JS LIbraries : Enable Freehand Mode ... fingers crossed that it helps!

[@fatjay9402]

Vwey cool thanks

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.

[@OoohBoi]

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.

[@carlosvillalba9221]

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.

[@OoohBoi]

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...

[@MDHABIB-gu7ds]

How to add sticky Attributes?

[@PrintWeekRussia]

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...

[@OoohBoi]

Maybe this one can help: www.advancedcustomfields.com/resources/adding-fields-menu-items/

[@emailjough]

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.

[@OoohBoi]

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.

[@emailjough]

@@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.

[@BottlecapBerry]

Nice! Will you be adding blur animation? :D

[@OoohBoi]

"three.js" is about to be included to Steroids so there will be more than just a blur :)

[@BottlecapBerry]

@@OoohBoi Nice! Floating animations are big now. I know Happy Addon does it but it's not perfect haha

[@marknasri1201]

thank you

[@OoohBoi]

You're welcome, thanks for watching!

[@kelvinjr4854]

The plugin isn't working for me 😢

[@christosdaglis1163]

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]

have you found solution for that i am also facing same issue.

[@christosdaglis1163]

@@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.

[@abereowoseyifunmi9607]

The best

[@Hyeronymus23]

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!

[@OoohBoi]

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.

[@colinkassies3708]

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]

That's already possible, just take a look at the Glider options :)

[@colinkassies3708]

@@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.

[@colinkassies3708]

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!

[@OoohBoi]

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.

[@colinkassies3708]

@@OoohBoi Nope I make subdomains on my own url and export from there.

[@hsdesign155]

Nice. But how work it With a sticky Header?

[@OoohBoi]

It doesn't at all, and it's because of the CSS transformations. github.com/locomotivemtl/locomotive-scroll/issues/237

[@cfseubc33]

Does this affect existing motion effects triggered by scroll or viewport?

[@cfseubc33]

Oops - should watched the video in full - yes it does thank you

[@wgm247]

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.

[@OoohBoi]

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.

[@wgm247]

@@OoohBoi My theme is already hello elementor, and the problem persists.

[@OoohBoi]

@@wgm247 Did you check your page for JS errors in the browser console? Maybe it's just some tiny, little typo...

[@wgm247]

@@OoohBoi its now resolved by enabling freehand option in locomotion.. thanks

[@franktielemans6624]

Is barba.js possible in Elementor?

[@OoohBoi]

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.

[@TheMomofABC]

How do I turn off the parallax effect?

[@OoohBoi]

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.

[@fatjay9402]

@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 ?

[@OoohBoi]

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

[@fatjay9402]

@@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.. ?

[@OoohBoi]

@@fatjay9402 GSAP + ScrollTrigger tutorial is coming up. So, it won't be about the page transition specifically but rather more general.