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
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.
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.
@@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.
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)
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
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:
@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
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?
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.
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" 😊
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.
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.
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.
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.
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
Thank you !
Haha Gary Without Body! 😛😛😛
cool
Lol I thought you meant the programming language "python" so I was confused.
floating head look suits you
I found it rather creepy :o
😂😂😂
this is I've been looking for soo long, I've tried so many random plugins thank you so much sir
Man I've been looking for this for days... But i didn't knew the name of it, just the effect hahaha.
Thanks alot!
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.
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.
@@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.
This is so informative. I wish I knew this earlier. You’re doing such an amazing job to help others 😊😊😊😊
the scrolling is sooo satisfying
I love the music at the end
I find websites that force a scrolling behaviour on me very annoying. I disable smooth scrolling in my browser for a reason!
What reason is that, by the way?
I swear this same guy did a video recently in which he said this was a bad idea?!
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)
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
Very creepy floating head... I love it LOL
Floating head for the win! Love the video... Thanks!
Hi! thank you so much!
How to slow down and block scrolling with ease when reach to the edge of start and end document?
Is there a way to get this smoothness in a wordpress website
How can i add this to my react
how do we work with scroll events now using this?
thanks but unfortunately i got into a problem . scrollmagic did not work properly when i used smooth-scrollbar .can you help me with that
Does anyone have experience if this library works well on mobile with touch swiping?
its not working. i have: Uncaught SyntaxError: Cannot use import statement outside a module
the needs to be at the end of the body
@@ren-design i used another smooth scroll script and its working perfectly. github.com/cferdinandi/smooth-scroll
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:
happy to meet you gary timeline
@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
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?
Smooth scroll makes me feel weird
Man so glad ublock exists else I would've gone insane from websites having their own comedian scrolling speeds shits just annoying.
The floating head freaked me out, I was reading something on a different tab then I switched to this one.
can you paste the cdn version I want to see if I can get this working in wordpress for a client. Thank you.
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.
chad
@@whimsy5623 Lmao
Nice t-shirts bro
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" 😊
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.
@@iamcaviar2674 Better late than never! Thank you so much, it is a very helpful answer! 🥰
@@EliSamba still interested in web design? Let’s start a business together.
Hey guys does anyone know how to change color of the smooth scrollbar.js?
Pls help me.
How to turn off the scrollbar completely?
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?
What about fixed elements? Position: fixed not working!
Hey! how make fixed position with smooth-scroll?)
How do u even find all these cool js libraries ? Awesome video !
Does anyone know a way to add momentum scrolling horizontally? I've been looking for days, it's driving me crazy.
Do not work when height of the sections to 100vh
OMGGGGG FINALLY!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Are you a guitarist along with a developer 😍😍😍😍😍😍...??????
I've tried this but this plugin confilcts with other jquery plugins!
it affects my internal CSS in my project, can anyone help me here?
Ray-man coding today I see
smooth-scrollbar.js - weight does 42 kb.. ??? Why would you do that? You said 2 kb, right?
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.
how to do this to php
Very informative, but due to the "highjacking" of the scroll function of the browser, this plugin makes any sticky navbar immobile.
isnt it the same as scroll behaviour in css
This is awesome
it's not working !! please can you respond
what does npm init -y do? why the flag?
-y basically responds 'yes' to any questions asked during init.
@@josephcobbinah5412 thank you
You are welcome
I absolutely hate it when a website or an app overrides browser default scrolling behaviour. It's a bad practice in my opinion
Var? anno 2020?
Nice floating head
he looking like a ghost
Doesn't work right with perspective parallax..
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.
Can you give me some tips to integrate floating head like yours..in my website😂😂😂...
that floating head facecam is creepy, include the shoulders too please
He had a green shirt in front of a green screen. Wasn't intentional
Author:
body {
visibility: hidden;
}
you dont need : after author
#gary {
position: absolute;
left: 0
bottom: 0;
}
background-color: transparent;
I like you bro !
parallax doesn't work with this
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😭😞.
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.
DONT DO THIS PLEASE, ITS ANNOYING
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.
bro not like this.... this floating head makes me nervous xD
BRUH THAT CHIN
Css html{scroll-type:smooth}
First!
smooth scrolling is counter-intuitive and generally annoying. REMOVE
floating head /watch?v=HQoRXhS7vlU
import Scrollbar isn't working!