Locomotive Scroll is Awesome - Here's how to use it

bit.ly/3lCXoXv - Become a frontend developer (50% off limited time!)
-- Want to learn UI/UX? designcourse.com
-- Today, we're stepping back into the exciting world of frontend development to check out a JavaScript library called Locomotive Scroll. It allows you to do a number of things, but primarily it allows you to integrate a smooth / gradual scroll experience. I'm going to show you how to get it installed, and set it up with some of the many features.
Let's get started!
- - - - - - - - - - - - - - - - - - - - - -
Subscribe for NEW VIDEOS!
Learn UI/UX: designcourse.com
My personal FB account: logodesigner
Coursetro FB: coursetro
Coursetro's Twitter: / designcoursecom
Join my Discord! / discord
^-Chat with me and others
- - - - - - - - - - - - - - - - - - - - - -
Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.
Now, I focus all of my time and energy on this channel and my website Designcourse.com.
Come to my discord server or add me on social media and say Hi!

[@DesignCourse]

Hey all. I will be live streaming tomorrow at 10:30am EST on the FreeCodeCamp youtube channel!

[@LabhamJain]

Already Waiting To See You On freeCodeCamp 😍

[@shinomitsu7798]

Best news of the day! Congrats and I hope this will bring even more people to your channel, you deserve that!

[@abhayganti8662]

The new Intro is sooooo dope !! Love this video as always Gary !!!

[@tomaszprabucki4251]

I love your channels, thanks to You, my projects become 200% better

[@reignsvicky]

Every single one of your videos Im enjoying dude, You doing great joB!!!!!!!!!!!!!

[@christinetreacy1744]

Really, really appreciated this video! I've been struggling to get locomotive-scroll to work and your walk-through was simple and easy to follow. I also used Parcel and scss for the first time too so woohoo! :) Thank you!

[@tekemutau6583]

Hi Christine could you please help me get locomotive scroll to work. right after typing npm init -y i got this error =======> The term node is not recognized as the name of a cmdlet..................................

[@christinetreacy1744]

@@tekemutau6583 Found this stackoverflow thread about that error. stackoverflow.com/questions/30318628/the-term-node-is-not-recognized-in-powershell

[@Ree-rr1js]

This floating head make a realy good point 👌🏻 Good job!

[@jrhager84]

I've been searching and searching for a react smooth scroll package, and the fact that this one has parallax is a double-win! Awesome!

[@alessandrospiridigliozzi7943]

this is exactly what I needed!!!

[@sashaanksekar441]

Dope intro. Liked this one the best

[@reignsvicky]

Thank you so much , you sharing lot of knowledge

[@AnirudhIsOnline]

Great video 👍

[@tarikjamil7]

hello there! i tried the locomotive animation and it works perfectly, however there is one element i can't figure out, it's the anchor link, so when i try a "go back to top" kind of button, it doesnt work with locomotive, any idea how to do that ?

[@raghavvarman6142]

Thank you so much 😍

[@MichaelTurpinAV98]

Looks Interesting, even just to manage transitions for elements entering the screen, has anybody tried it and know what the performance is like? I'm also wondering about how the parallax would cope responsively and with longer content. It could be really useful.

[@muhamedkarajic]

Good video!

[@parasarora5869]

that's one awesome library 😱😱😍😍

[@AbdulBasit-xn9ld]

Love the new intro

[@maelar1605]

Thank you for the video, I have a question : To be able to run the parcel command we have to set our execution policies to "AllSigned", isn't it dangerous concerning malicious scripts ?

[@mrconcept]

Thanks for this excellent tut. How do you change the direction of the horizontal scroll? I do data-scroll-direction="horizontal" and it moves right to left but not aure how to reverse it so it goes left to right?

[@tommieirl1]

thank you !

[@maxdevgenius5469]

waouh a new intro very cool tuto prof

[@jbink6612]

used it yesterday without success ... so thank you ;)

[@alimagnetic-iransenigma9647]

thanks it's pretty well explained. can you do a video on how to make it work on nextjs ?? it gives an error on scrollId undefined which i cannot solve. thank you.

[@anandgaurav5398]

Hey, thank you for your tutorials, It helps a lot to students like us can you give us a tutorial on "adding locomotive scroll to Wix Dev mode"

[@ShubhamPathakThings]

did you find anything?

[@somedev1553]

What was the id my-section for in the section tag, I think u forgot it?

[@lorenzofranzone7231]

hello, thanks for your tutorial! I've a problem: followed step by step your code, elements are detected in viewport and "data-scroll-class" works well but "data-scroll-speed" not... any suggstions? Thank you

[@evroskate]

That base in the intro though!

[@AdrianTwarog]

Nice

[@swatideshpande2547]

Can you please make a tutorial on Onsen UI framework . There are not many resources available for this

[@srdjan02]

Hi, TNX so much for this tut. It's great. However I run in to a problem. How would you "set" parallax elements in locomotive to be diagonal like in the locomotive demo website?

[@TravisJohnson]

If you look at the code in the demo, the scroll direction is horizontal. The elements themselves are transform rotated via CSS. When the horizontal movement happens via locomotive, it appears like it is moving diagonally.

[@oaooaoipip2238]

Hi Gary. What is that white stuff on your arm and on your t-shirt?

[@CiscoZero]

How do you know so much? When does all of it start coming together? Do you just do research and figure it out, or do you remember everything off the top of your head?

[@nasiy]

I love Locomotive scroll. Unfortunately not sure how to implement it in Webflow. Great video though!

[@valiibraimi195]

is possible to use with angular or react (I USE ANGULAR)

[@hypelightsband]

Hey! thanks for your video! One question, for some reason activating locomotive somehow disable my back-to-top script which allowed my to click a button and go back to the top of my page.. Any guess?

[@tyrellwreleck4226]

i was thinking horizontal scroll. with a left and right arrow navigation. some people gets lost scrolling in mobile viewport.

[@bhavyatrivedi6310]

can you please show how to use locomotive scroll with Three.js...I am struggling with that and cannot figure out how to do it

[@tanrupoh7332]

Hi, can it be used in typescript?

[@terencecleric1813]

How to replace scrollbar, what is automatically eliminated by this awesome software?

[@DafterHindi]

Made my website smooth

[@DafterHindi]

I'm 13

[@DafterHindi]

@Not Howdy good luck too

[@teuccio73]

chan you help me to add locomotive scroll to wordpress ? Thanks

[@lindgrenYT]

I only get this to work on localhost, not in live server.. Does anyone know why? 😅

[@Knuddelfell]

Nice intro

[@danieladekoya1224]

NOICE !!

[@sourabh2505]

im having an issue with locomotive scroll and from alot days im trying to fix this can you help me plzzzzzzzzzzz?

[@Bilbok_]

someone know to implement locomotive scroll with vuejs ?

[@e-fanierh2369]

anyone know how to get it to work on localhost?

[@stanimeercat2530]

At the beginning of the video did his T-shirt and arm have some white paint marks?

[@DesignCourse]

Did you not see the very brief comment about that I made in the video at 0:17 ??

[@remixowlz]

I got this error "Uncaught SyntaxError: Cannot use import statement outside a module"

[@thefunstars6793]

hi, i might be abit late to reply but its because you need to use a bundler. I recomend you use parcel.js. DesignCourse also has a tutorial on how to use that. Hope i helped!

[@TheChilllin]

in this case just add "type": "module", in the package json this should work, the error belongs to nodejs default require but now import is supported by adding the line provided.

[@capyeris]

How to credit video intro

[@tekemutau6583]

right after typing npm init -y i got this error =======> The term node is not recognized as the name of a cmdlet.................................. How do i fix this??

[@brianorbino6910]

sir i get Uncaught TypeError: Failed to resolve module specifier "locomotive-scroll". Relative references must start with either "/", "./", or "../".

[@lindgrenYT]

Yo Brian! Did you solve this?

[@chriskang7124]

I got the same issue

[@brianorbino6910]

@@lindgrenYT i try another libraries

[@jasonszsilva3489]

howto use it without parcel

[@DerMBen]

Today I learned: Chrome has smooth scrolling integrated and activated by default...

[@sabrina-br5zu]

why did you not include the link to the github

[@FordHenley86]

Do I have to use npm to use this?

[@ahmadmuslih]

You can just copy the javascript code

[@eh-lo2do]

I'm just confused why you add multiple sections ? can't you just ass the smooth to the whole body ?

[@JMIK1991]

Not a fan. I like my browsers current smooth scrolling. Don't want websites add additional smooth script to change my browser default behaviour. But I do get that some web applications could present something differently with this.

[@bossysmaxx3327]

it's not working properly, not scrolling scrollbars are hidden and page is stuck at top of the page can't scroll page at all

[@yandahomesandinvestments1869]

you didnt drop the link to the github

[@ericmiyan3466]

I followed every step but somehow now i cant scroll at all :(

[@safsafaf2838]

Hello, can someone help please? it doenst work for me, i did excatly same things as Gary.. in console i have: Uncaught SyntaxError: Cannot use import statement outside a module .. and in my index.js is --> '

[@lindgrenYT]

Hey! did you find a solution??

[@safsafaf2838]

@@lindgrenYT hi, not really, i also tried it by making parcel, and a lot other stuff, but it didnt work, if you will find out, please let me know :)

[@shahbazhusain8612]

Did anyone solve this issue yet?

[@safsafaf2838]

@@shahbazhusain8612 nop :( but let me know if you do pls

[@lindgrenYT]

@@shahbazhusain8612 ​ @idontwannashareyou I downloaded the whole project file from Locomotive Scroll and lanched a live server from that index.html and that worked. I just copied all the locomotive code from that folder into my project and then it worked, not sure what it was but that's one workaroud 😅

[@shkrmkr]

cool shirt

[@jeelpatel5791]

Hey, as the end note, you should tell your viewers to also read the docs, because if you're gonna make a video for every js library, then no one will be able to read the docs, and its so important to have ability to read docs and do accordingly, Hope you'll consider that!

[@leflyingcarpet]

He already did. 16:35

[@mihailodukic601]

Best ways to use locomotive scroll for mobile devices? It seems to break ...

[@akshy471]

A flotaing head?

[@jvcmarc]

I hate websites that mess with the scrolling it's just a very bad UX that goes against what the users are already used to it's nit intuitive and feels like website is fighting against the user

[@choonah]

nice! how do you implement it in webflow?

[@ArtSzabo]

check out t.ricks tut on this.

[@user-mq7nd5pq9q]

Голова профессора Доуля))

[@damianhajdukiewicz8769]

Someone tried it with bootstrap ?

[@user-xd3ez1gd5u]

5:40

[@user-xd3ez1gd5u]

13:41

[@georgenaranjo5704]

yoo does anyone notice his head is floating?

[@vishallondhe7298]

It's the new css library he's using 😂😂😂...

[@priyanzhu]

Can any one here will teach me to how to install locomotive scroll like gary did cuz it ain't happening with me how to install like that :(

[@deepak8586]

Use cdn

[@priyanzhu]

@@deepak8586 get me the cdn plz?

[@Viralplace]

But why ? I make that with 1 line of css

[@abhayganti8662]

Viralplace It offers a whole array of functionalities, can u create a parallax effect with one line ? I Guess not. How about the custom scroll bar which is way cleaner than the the default one and it improves the user experience overall !! Hope this helped

[@adeleke5140]

Ohh, what's the syntax?

[@wotomy]

that is nice transparent shirt

[@isaakcarteraugustus1819]

The npm doesn’t work. It says it doesn’t recognizes it???

[@yuck59]

had the same issue, you can go into the github repo, click on the 'dist' folder, copy and paste the 'locomotive-scroll.min.js' file into a js file in your project, link it to your html and then you have the library!

[@isaakcarteraugustus1819]

@@yuck59 it worked :D thx

[@luxgroove480]

@@yuck59 after doing so it says LocomotiveScroll is not defined

[@yuck59]

@@luxgroove480 you need to link your locomotive library before the 'new LocomotiveScroll()' code

[@yuck59]

@@luxgroove480 did it work?

[@LabhamJain]

Again Floating Head 🤣

[@commitmaster4543]

He's Beginning to Believe

[@h3m541]

Nowadays floating head is *normal*

[@uimonk]

10% locomotive 90% html, css..

[@wioetuw912]

I really, REALLY hate it when websites mess with the scroll functionality. There's already a built in browser setting to enable or disable smooth scrolling and mine is turned off for a reason.