5 ms·

MoveTo – A lightweight scroll animation JS library without any dependency

55 points by hsnayd 10y ago

Zekio 10y ago
Wasn't there a microsoft post a few days ago explaining why messing with scroll is a bad idea? EDIT: I'm stupid this is isn't related to user input scroll, but anchor like scroll just smooth
- smnscu 10y ago
  You're definitely not stupid. I (and probably others) thought the same thing, thanks for clearing things up for us. edit: link to demo https://hsnaydd.github.io/moveTo/demo/ https://hsnaydd.github.io/moveTo/demo/ solid work imho
  - lewiscollard 10y ago
    Without looking at the code, I thought the same thing until I read this comment for sure, and I'm not stupid all of the time. Perhaps the library would benefit from not describing itself as 'smooth scrolling', which many of us might associate with 'hijacking the scroll wheel/trackpad'.
d--b 10y ago
While I understand the idea of having small functionalities separated in packages with no dependencies, this feels somewhat too small. This is basically a wrapper for the `move` function that is defined in 50 lines of code. As a developer, I gain more by understanding those 50 lines of code than understanding how to import and call this.
- alpcan 10y ago
  I got the point but planning logic about for these 50 lines of code takes much more time than just import this kind of small packages. For example redux-thunk is also about 10 lines but all redux community uses it when needed.
- jazoom 10y ago
  I'll take the library. That's 50 lines of code I don't have to write.
- mynewtb 10y ago
  That's but imagine you had to implement a function that leftpads a string. Not much to learn by doing it yourself, so just import it!
tjelen 10y ago
Is there a way to remove this library (like de-register its event handlers etc) once it has been activated somewhere on the page? The reason I'm asking is that I've often ran into problems with similar no-dependency libraries in highly dynamic environment, that they often leave dangling event handlers on elements, that have been since removed from the page. That leads to various memory leaks and weird bugs.
- hsnayd 10y ago
  Unfortunately not available for the moment. It just registers click event if It has a trigger. Yes you are right, It should be destructible. I will do that in a couple of days.
hasperdi 10y ago
It is way too much code for a pimped up window.scrollTo() function.
staktrace 10y ago
Please note that as pointed out in the Microsoft article fron a few days ago, any JS-based scrolling is subject to main-thread jank. Instead, you should try to use the scroll-behavior CSS property [1] or scrollToOptions [2] in browsers where it is available, and only fall back to JS if it is not. [1] https://developer.mozilla.org/en/docs/Web/CSS/scroll-behavior https://developer.mozilla.org/en/docs/Web/CSS/scroll-behavio... [2] https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView https://developer.mozilla.org/en-US/docs/Web/API/Element/scr...
- imaginamundo 10y ago
  The library isn't about scroll hijack, is about "animate" anchor links. At least from what I get from the project. The scroll works as usual.
  - staktrace 10y ago
    Any scrolling on the main thread (i.e. driven by JS) is subject to jank, not just user-input scrolling. CSS-based smooth scrolling of anchor links can be offloaded to the compositor because the browser knows ahead of time what is going to happen, and in those cases the smooth scroll animation can run smoothly even if the main thread is bogged down.
  - kentt 10y ago
    It is a scroll hijacking library, it's just not as wretched as most. It's not animating the links but rather animating scrolling to the links by slowing the scrolling.
- untog 10y ago
  To be clear: neither of those options is supposed by Chrome or Safari. Sigh.
achairapart 10y ago
Smooth scrolling has a native API[0] nowadays. Support[1] is still limited, but you can (and should) polyfill[2] it. [0]: https://drafts.csswg.org/cssom-view/ https://drafts.csswg.org/cssom-view/ [1]: http://caniuse.com/#feat=css-scroll-behavior http://caniuse.com/#feat=css-scroll-behavior [2]: https://github.com/iamdustan/smoothscroll https://github.com/iamdustan/smoothscroll
nounaut 10y ago
May I please take this opportunity to ask everyone to never ever consider forcing smooth scrolling upon the visitors of their websites. Smooth scrolling is enabled by default in browsers and as a user I've therefor actively opted out of that behaviour because I genuinely dislike it and feel that it destroys my user experience. By forcing that experience on me I will have the same feelings towards your website.
- noir_lord 10y ago
  On linux (Xubuntu 16.04/ATI card) smooth scrolling in both Firefox and Chrome causes horrible tearing even with sync to vblank on, The first thing I do on both is disable it and then increase the number of lines scrolled in FF, it's a much better experience then. mousewheel.min_line_scroll_amount set to 30 (you might need to play with it) generally works much better.
  - tcfunk 10y ago
    Oh! I've been trying to pin down the cause of this for a while, I'm glad you mentioned this, thank you.
    - noir_lord 10y ago
      If you use Chrome with the open ATI driver if you go in chrome:/flags you can force it to enable hardware acceleration via " Override software rendering list" even if it's not on the (very cautious) whitelist. To even get to chrome://flags I have to (on first run) do google-chrome --disable-gpu then change the flag then restart. After that everything works flawlessly, it took me a while to track that one down!.
- Kiro 10y ago
  This has nothing to do with that though. This is "smooth scrolling" as in animating the transition to the anchor point, compared to just jumping straight to it.
- mikejmoffitt 10y ago
kentt 10y ago
If you use this or any other scroll hijacking library, I immediately hit the back button.
- Kiro 10y ago
  This has nothing to do with scroll hijacking. Don't people click the link before commenting?
  - edoceo 10y ago
    That takes too long ;p
  - kentt 10y ago
    It modifies the behavior of scrolling when you click a link. To me that's scroll hijacking.
PretzelFisch 10y ago
Could someone explain why, you would choose to use something like this on your site? Every time I have experienced a site messing scroll presentation it has left me very frustrated.
- rockostrich 10y ago
  Like in the demo, as long as you don't hijack native scrolling and just use it to do smooth jumps to anchors then it's fine. This library is a nice tool for anyone who doesn't want jQuery bloat on their site, but like animated transitions. Of course, there are plenty of designers who think it's a good idea to hijack scrolling...
inertial 10y ago
Perhaps change the title to something like : "MoveTo – A lightweight "smooth scroll into view" JS library without any dependency" Most of the comments are -ve because they think it's about scroll jacking.
- inertial 10y ago
  Looks like it's been changed from "A lightweight smooth scrolling javascript library ..." to "A lightweight scroll animation JS library ..."
- dang 10y ago
  We changed the title from "MoveTo – A lightweight, smooth scrolling JS library without any dependency" after a user emailed us to suggest the above.
pier25 10y ago
Scroll jacking is a terrible practice. 1) It's intrusive and destroys the user experience which ironically is what it pretends to enhance. 2) Even if it feels right on the designer's machine, we never know what scrolling implementations there may be in the future that will certainly break such gimmicks.
- DiThi 10y ago
  While I agree, the library doesn't do that. It's just for moving to anchors when e.g. you click a button.
duke360 10y ago
very nice also the "scroll up" looks to be more resiliant to "mouse scroll wheel" interference while auto-scrolling, while "scroll up" behave a little differently at least on edge, i dont know why, anyway it is very beauty
- hsnayd 10y ago
  Hi duke360, it was done on purpose to show that the different ease functions can be used
jcwayne 10y ago
Animate all the things!!! Seriously though, the fact that this breaks the standard behavior of the anchor point becoming part of the URL bothers me more than the animation. When I hover over a link and see a URL, I'd really like clicking it to take me to that URL.
nkkollaw 10y ago
Very nice.

55 points by hsnayd 10y ago

Zekio 10y ago

Wasn't there a microsoft post a few days ago explaining why messing with scroll is a bad idea? EDIT: I'm stupid this is isn't related to user input scroll, but anchor like scroll just smooth

smnscu 10y ago
You're definitely not stupid. I (and probably others) thought the same thing, thanks for clearing things up for us. edit: link to demo https://hsnaydd.github.io/moveTo/demo/ https://hsnaydd.github.io/moveTo/demo/ solid work imho
- lewiscollard 10y ago
  Without looking at the code, I thought the same thing until I read this comment for sure, and I'm not stupid all of the time. Perhaps the library would benefit from not describing itself as 'smooth scrolling', which many of us might associate with 'hijacking the scroll wheel/trackpad'.

d--b 10y ago

While I understand the idea of having small functionalities separated in packages with no dependencies, this feels somewhat too small. This is basically a wrapper for the `move` function that is defined in 50 lines of code. As a developer, I gain more by understanding those 50 lines of code than understanding how to import and call this.

alpcan 10y ago
I got the point but planning logic about for these 50 lines of code takes much more time than just import this kind of small packages. For example redux-thunk is also about 10 lines but all redux community uses it when needed.
jazoom 10y ago
I'll take the library. That's 50 lines of code I don't have to write.
mynewtb 10y ago
That's but imagine you had to implement a function that leftpads a string. Not much to learn by doing it yourself, so just import it!

tjelen 10y ago

Is there a way to remove this library (like de-register its event handlers etc) once it has been activated somewhere on the page? The reason I'm asking is that I've often ran into problems with similar no-dependency libraries in highly dynamic environment, that they often leave dangling event handlers on elements, that have been since removed from the page. That leads to various memory leaks and weird bugs.

hsnayd 10y ago
Unfortunately not available for the moment. It just registers click event if It has a trigger. Yes you are right, It should be destructible. I will do that in a couple of days.

hasperdi 10y ago

It is way too much code for a pimped up window.scrollTo() function.

staktrace 10y ago

Please note that as pointed out in the Microsoft article fron a few days ago, any JS-based scrolling is subject to main-thread jank. Instead, you should try to use the scroll-behavior CSS property [1] or scrollToOptions [2] in browsers where it is available, and only fall back to JS if it is not. [1] https://developer.mozilla.org/en/docs/Web/CSS/scroll-behavior https://developer.mozilla.org/en/docs/Web/CSS/scroll-behavio... [2] https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView https://developer.mozilla.org/en-US/docs/Web/API/Element/scr...

imaginamundo 10y ago
The library isn't about scroll hijack, is about "animate" anchor links. At least from what I get from the project. The scroll works as usual.
- staktrace 10y ago
  Any scrolling on the main thread (i.e. driven by JS) is subject to jank, not just user-input scrolling. CSS-based smooth scrolling of anchor links can be offloaded to the compositor because the browser knows ahead of time what is going to happen, and in those cases the smooth scroll animation can run smoothly even if the main thread is bogged down.
- kentt 10y ago
  It is a scroll hijacking library, it's just not as wretched as most. It's not animating the links but rather animating scrolling to the links by slowing the scrolling.
untog 10y ago
To be clear: neither of those options is supposed by Chrome or Safari. Sigh.

achairapart 10y ago

Smooth scrolling has a native API[0] nowadays. Support[1] is still limited, but you can (and should) polyfill[2] it. [0]: https://drafts.csswg.org/cssom-view/ https://drafts.csswg.org/cssom-view/ [1]: http://caniuse.com/#feat=css-scroll-behavior http://caniuse.com/#feat=css-scroll-behavior [2]: https://github.com/iamdustan/smoothscroll https://github.com/iamdustan/smoothscroll

nounaut 10y ago

May I please take this opportunity to ask everyone to never ever consider forcing smooth scrolling upon the visitors of their websites. Smooth scrolling is enabled by default in browsers and as a user I've therefor actively opted out of that behaviour because I genuinely dislike it and feel that it destroys my user experience. By forcing that experience on me I will have the same feelings towards your website.

noir_lord 10y ago
On linux (Xubuntu 16.04/ATI card) smooth scrolling in both Firefox and Chrome causes horrible tearing even with sync to vblank on, The first thing I do on both is disable it and then increase the number of lines scrolled in FF, it's a much better experience then. mousewheel.min_line_scroll_amount set to 30 (you might need to play with it) generally works much better.
- tcfunk 10y ago
  Oh! I've been trying to pin down the cause of this for a while, I'm glad you mentioned this, thank you.
  - noir_lord 10y ago
    If you use Chrome with the open ATI driver if you go in chrome:/flags you can force it to enable hardware acceleration via " Override software rendering list" even if it's not on the (very cautious) whitelist. To even get to chrome://flags I have to (on first run) do google-chrome --disable-gpu then change the flag then restart. After that everything works flawlessly, it took me a while to track that one down!.
Kiro 10y ago
This has nothing to do with that though. This is "smooth scrolling" as in animating the transition to the anchor point, compared to just jumping straight to it.
mikejmoffitt 10y ago

kentt 10y ago

If you use this or any other scroll hijacking library, I immediately hit the back button.

Kiro 10y ago
This has nothing to do with scroll hijacking. Don't people click the link before commenting?
- edoceo 10y ago
  That takes too long ;p
- kentt 10y ago
  It modifies the behavior of scrolling when you click a link. To me that's scroll hijacking.

PretzelFisch 10y ago

Could someone explain why, you would choose to use something like this on your site? Every time I have experienced a site messing scroll presentation it has left me very frustrated.

rockostrich 10y ago
Like in the demo, as long as you don't hijack native scrolling and just use it to do smooth jumps to anchors then it's fine. This library is a nice tool for anyone who doesn't want jQuery bloat on their site, but like animated transitions. Of course, there are plenty of designers who think it's a good idea to hijack scrolling...

inertial 10y ago

Perhaps change the title to something like : "MoveTo – A lightweight "smooth scroll into view" JS library without any dependency" Most of the comments are -ve because they think it's about scroll jacking.

inertial 10y ago
Looks like it's been changed from "A lightweight smooth scrolling javascript library ..." to "A lightweight scroll animation JS library ..."
dang 10y ago
We changed the title from "MoveTo – A lightweight, smooth scrolling JS library without any dependency" after a user emailed us to suggest the above.

pier25 10y ago

Scroll jacking is a terrible practice. 1) It's intrusive and destroys the user experience which ironically is what it pretends to enhance. 2) Even if it feels right on the designer's machine, we never know what scrolling implementations there may be in the future that will certainly break such gimmicks.

DiThi 10y ago
While I agree, the library doesn't do that. It's just for moving to anchors when e.g. you click a button.

duke360 10y ago

very nice also the "scroll up" looks to be more resiliant to "mouse scroll wheel" interference while auto-scrolling, while "scroll up" behave a little differently at least on edge, i dont know why, anyway it is very beauty

hsnayd 10y ago
Hi duke360, it was done on purpose to show that the different ease functions can be used

jcwayne 10y ago

Animate all the things!!! Seriously though, the fact that this breaks the standard behavior of the anchor point becoming part of the URL bothers me more than the animation. When I hover over a link and see a URL, I'd really like clicking it to take me to that URL.

nkkollaw 10y ago

Very nice.