MOMENTUM Scrolling with Smooth-Scrollbar.js!

[@DesignCourse]

I'm going to have to rearrange my terrariums so you can see both. I just added a 9 month old female ball python which is directly behind me! Here's a pic of her and the tank I built: imgur.com/a/jIsNCC7

[@se7en2021]

Thank you !

[@LabhamJain]

Haha Gary Without Body! 😛😛😛

[@CabbageYe]

cool

[@CodingUnited]

Lol I thought you meant the programming language "python" so I was confused.

[@swyxTV]

floating head look suits you

[@KALTBLUTWOLF1]

I found it rather creepy :o

[@harshjain8345]

😂😂😂

[@karansosa1837]

this is I've been looking for soo long, I've tried so many random plugins thank you so much sir

[@rbarufi]

Man I've been looking for this for days... But i didn't knew the name of it, just the effect hahaha. Thanks alot!

[@riyapatel17]

This is so informative. I wish I knew this earlier. You’re doing such an amazing job to help others 😊😊😊😊

[@rahul900day]

the scrolling is sooo satisfying

[@jer254]

Very creepy floating head... I love it LOL

[@arbazkhan-od9sk]

I love the music at the end

[@AyushSinghxda]

Hey Gary, it's all good, but isn't it considered as bad UX? And the moment you club it with GSAP ScrollTrigger/ ScrollMagic, it doesn't allow to pin the elements because of transforms. Also considering the fact that all major browsers are providing native smooth scroll now.

[@mann_von_welt]

You can use scrollbar.isVisible(element) to check if you reached an element and then apply some css animation, gsap, or whatever. I would not say it's bad UX, but it should only be used at kinda playful / experimental sites.

[@AyushSinghxda]

@@mann_von_welt Pinning of elements is not possible as smooth scroll applies position: fixed over parent element. Position: fixed inside a position: fixed is not relative to viewport but the parent element.

[@zacharyzanger9104]

Floating head for the win! Love the video... Thanks!

[@esseifforte]

Hi! thank you so much! How to slow down and block scrolling with ease when reach to the edge of start and end document?

[@Abdullah_Osama]

happy to meet you gary timeline

[@Abhishek-dp5tc]

How can i add this to my react

[@freshwire]

I find websites that force a scrolling behaviour on me very annoying. I disable smooth scrolling in my browser for a reason!

[@alanpeople1]

What reason is that, by the way?

[@BlueJDev]

I swear this same guy did a video recently in which he said this was a bad idea?!

[@tommygecko]

The first time I ran into this I hated it too. I think it really depends on how you use it. What a plugin like this essentially does is take away some control from the user in exchange for nice looking effects. As long as you don't give the user a need to scroll in a controlled manner, it should be fine (for example when reading long bodies of text, having the text 'jump' when scrolling down causes the reader to lose track of where he/she was reading and forces the eyes to change focus. Worse, if the reader naturally reacts by scrolling in the opposite direction to correct this, he/she will just go back to the previous position. He/she just made 2 actions without any progress, that is just super annoying UX)

[@imluctor5997]

tbh i think all websites should have scrolling simular on mobiles where if you slide your finger it takes a bit until it completely stops. And on desktop it should also be smoother

[@SherwinlouwZa]

how do we work with scroll events now using this?

[@sahilsinghhtc]

Sir, great tutorial. im able to make my scrolling smooth with this js file. But i cant understand the "plugin options" in the last options. Could you please make tutorial on it?

[@Trazynn]

I'm learning Javascript and it's going alright and all. But all Javascript tutorials are about objects, and classes, and databases. And that's great, i understand that's important. But to a designer it seems that all of that, yes, the core of javascript, the fundamentals, can be skipped in favour of just importing these libraries that let you animate cool shit. I don't need to develop an app I just want things to wiggle and swoosh.

[@whimsy5623]

chad

[@codewithegai]

@@whimsy5623 Lmao

[@gaurabdhakal13]

Is there a way to get this smoothness in a wordpress website

[@EliSamba]

Hey Gary, Lovely stuff. I am a graphic designer wanting to improve my web design skills. My question is: Is it possible to use this tool and process on a website builder such as Wix? Sorry if it is a silly question, I believe the word to describe my skill level is a "noob" 😊

[@iamcaviar2674]

It's 1 year later but no, Wix can not be self hosted so you don't have control over the javascript libraries you wanna use. It's just for the people who want to drag and drop design websites and a bit f css tweaks.

[@EliSamba]

@@iamcaviar2674 Better late than never! Thank you so much, it is a very helpful answer! 🥰

[@codewithegai]

@@EliSamba still interested in web design? Let’s start a business together.

[@CreativeB34ST]

Does anyone have experience if this library works well on mobile with touch swiping?

[@harpreetsingh-tn6em]

thanks but unfortunately i got into a problem . scrollmagic did not work properly when i used smooth-scrollbar .can you help me with that

[@bloodtusk7160]

Pls help me. How to turn off the scrollbar completely?

[@FarukAhmed-pc5hn]

What about fixed elements? Position: fixed not working!

[@vitus6644]

its not working. i have: Uncaught SyntaxError: Cannot use import statement outside a module

[@ren-design]

the needs to be at the end of the body

[@vitus6644]

@@ren-design i used another smooth scroll script and its working perfectly. github.com/cferdinandi/smooth-scroll

[@christopherk4166]

I'm new to this as well, but I think you just need to add "type='module'" to the script tag. You can learn more by googling "ES6 imports" It should look something like this:

[@grxvethreat903]

Hey! how make fixed position with smooth-scroll?)

[@SohailKhan-tc8uz]

Nice t-shirts bro

[@heinekhalwin8735]

How do u even find all these cool js libraries ? Awesome video !

[@ThatGuyAnonymous]

The floating head freaked me out, I was reading something on a different tab then I switched to this one.

[@Kevzz2srs]

Man so glad ublock exists else I would've gone insane from websites having their own comedian scrolling speeds shits just annoying.

[@kangzoel8717]

Smooth scroll makes me feel weird

[@sebastianf9831]

OMGGGGG FINALLY!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

[@farvessafiyudeen0741]

Hey guys does anyone know how to change color of the smooth scrollbar.js?

[@narenstudio5]

@simon sir it works when Im running it from my visual studio code after pushing it to the github, then I tried to open it from github but the smooth animation is not working ,it remains default any way to fix Im creating my portfolio please reply me Im your huge fan

[@DDesigner123]

can you paste the cdn version I want to see if I can get this working in wordpress for a client. Thank you.

[@arghyabanerjee900]

Are you a guitarist along with a developer 😍😍😍😍😍😍...??????

[@DirePantsDim]

Very informative, but due to the "highjacking" of the scroll function of the browser, this plugin makes any sticky navbar immobile.

[@FarukAhmed-pc5hn]

I've tried this but this plugin confilcts with other jquery plugins!

[@DavidMartins1]

Does anyone know a way to add momentum scrolling horizontally? I've been looking for days, it's driving me crazy.

[@shareskill91]

Do not work when height of the sections to 100vh

[@fariskomo581]

Anyone i have a question please help me When i need to make a responsive website in adobe xd must i make it for every size or not?

[@Bakkali.Soufian]

isnt it the same as scroll behaviour in css

[@clleoweb4083]

smooth-scrollbar.js - weight does 42 kb.. ??? Why would you do that? You said 2 kb, right?

[@karansosa1837]

it affects my internal CSS in my project, can anyone help me here?

[@peoplewithpixels]

Ray-man coding today I see

[@ErwinMeulman]

Smooth scrolling is a mess, same as the volume, controlled by the OS, browser and on your speakers. With the OS on 3 lines per scroll (Windows, Linux, MacOS) and a trackpad and flywheel mouse, surface dial and a JavaScript I confused how far I need to scroll.

[@Maybehassanawad]

Nice floating head

[@supreetkumar7604]

he looking like a ghost

[@brambekkers]

Var? anno 2020?

[@mbusokotobe6276]

This is awesome

[@user-zd5ee]

Author: body { visibility: hidden; }

[@CloudyyYT]

you dont need : after author

[@jasonszsilva3489]

how to do this to php

[@alperburakpusar]

Doesn't work right with perspective parallax..

[@alaazarrouk5941]

it's not working !! please can you respond

[@beinyourguard]

what does npm init -y do? why the flag?

[@josephcobbinah5412]

-y basically responds 'yes' to any questions asked during init.

[@beinyourguard]

@@josephcobbinah5412 thank you

[@josephcobbinah5412]

You are welcome

[@bendyamin86]

This will break any "appear on scroll" animations as it high jacks the native scroll events and won't be able to calculate the window height and top values.

[@harshjain8345]

Can you give me some tips to integrate floating head like yours..in my website😂😂😂...

[@SayJee]

#gary { position: absolute; left: 0 bottom: 0; }

[@henriquelima7958]

background-color: transparent;

[@quickindiarecipe]

parallax doesn't work with this

[@fullstack_journey]

that floating head facecam is creepy, include the shoulders too please

[@malcolmrodrigues911]

He had a green shirt in front of a green screen. Wasn't intentional

[@yasser.dev7]

I like you bro !

[@mistekfcio]

I absolutely hate it when a website or an app overrides browser default scrolling behaviour. It's a bad practice in my opinion

[@chandarraja1119]

at the end of the each video please speak about browser support like chrome edge and firefox won't be a problem here. speak about IE! support😭😞.

[@CreativeB34ST]

Just drop IE support, it's not worth it. Browser is dead. People who still use it should move on or use at own risk.

[@franny8480]

bro not like this.... this floating head makes me nervous xD

[@alex_chugaev]

DONT DO THIS PLEASE, ITS ANNOYING

[@feronanthus9756]

This is so infuriating. The last thing I want on a desktop is for my mouse wheel to act like scrolling on a mobile phone. I wish developers would stop running code on their websites which override the settings a user chooses on their web browsers and devices. Why am I here you ask? So I can find the code snippet some websites use to do this so I can block it. "You can notice the scrollbar itself has been hijacked" Yeah... good choice of words there.

[@asumiluna9066]

BRUH THAT CHIN

[@yogeshdeveloper5346]

First!

[@masterkhoa]

smooth scrolling is counter-intuitive and generally annoying. REMOVE

[@zorujuro192]

Css html{scroll-type:smooth}

[@nerosonic]

floating head /watch?v=HQoRXhS7vlU

[@СергейКостюк-х8л]

import Scrollbar isn't working!