Smoothscroll, Nicescroll in 2018?

Design help Custom code
1

Hey everyone,

I’ve been trying to reproduce a smoothscroll, scroll-hijack such as build in amsterdam cases and Alexandre Rochet’s portfolio .

I’ve found @cyberdave 's 2015 answer and some other cdnjs repositories such as
<script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.6/SmoothScroll.js"></script> at
and <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.nicescroll/3.7.6/jquery.nicescroll.js"></script> at

And i’ve been putting them here.

26%20PM
26%20PM1264×568 17.7 KB

I’ve also tried putting <script type="text/javascript" src=" in front of theses cdnjs to match Dave’s post.

Any ideas on how to make it work?
[share link] [live link]

Thank you!
MRV

2

Would also love the answer to this!

I’ve tried about everything and can’t get it to work. :frowning: We need @cyberdave to the rescue!

3

@vincent @Waldo :thinking::thinking: any idea?

4

For basic smooth scrolling between #anchor links (university↗), you don’t need any custom js. Webflow builds that in by default: http://smooth-scroll-32e0f4.webflow.io/#a

I’m not seeing anchor links on your page. What kind of smooth scrolling are you looking for?

5

@forresto,

I think what @mrv and I are looking for is the momentum-scrolling while using your mouse-wheel/trackpad. Not easing between anchor points.

A good example of what I’m talking about can be found on this website - New Brand - Awwwards

and also here (after their fancy intro) - Oui Will | Digital. Brand. Accelerator.™

As you start and stop your scroll, the webpage is eased into the respective scroll-location. If you scroll really fast and stop abruptly, you will notice the website will come to a smooth stop instead of following the abrupt actions of your scroll wheel.

I think this has the .js file we need, but I can’t figure out how to get it working on webflow - GitHub - gblazex/smoothscroll-for-websites: Smooth scrolling experience for websites.

6

I see.

Something to keep in mind is that some hardware/os/browser combinations have this built in, and it can be frustrating for site visitors to change the native behavior. Also, with my slow connection, the Awwwards link that you shared is not letting me scroll at all. :grimacing:

That said, the following script tags in the “Head Code” section is working in my demo site:

<script>window.SmoothScrollOptions = { animationTime: 400 }</script>
<script async src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.6/SmoothScroll.min.js" integrity="sha256-Yut1YAlvRzggjdRiTu+X56CcayNzkjwk3p34ZZL0WHk=" crossorigin="anonymous"></script>

You can see the available options at the project wiki: Home · gblazex/smoothscroll-for-websites Wiki · GitHub

2 Likes
7

Thank you so much for the help @forresto,
Right now your demo site is working for me only on mouse and only in chrome.
I’ll try to add trackpad ASAP by

<script src="SmoothScroll.js"></script>
<script>SmoothScroll({ touchpadSupport: true })</script>

or the other way; before the load.

Is it working for anyone on safari/explorer ?

8

It does work for me (mouse wheel and keyboard arrows) in Safari 11.1 and Firefox 60. I didn’t enable touchpadSupport because OSX smooths touchpad scrolling natively.

It isn’t working on Edge 17 (tested on Browserstack). I see an unresolved issue for the library: Does not work on IE edge latest · Issue #43 · gblazex/smoothscroll-for-websites · GitHub

9

Hi!

I’ve been trying with your code with the latest SmoothScroll lib but it doesn’t seem to work. I’m on Chrome Version 73.0.3683.103.

<script>window.SmoothScrollOptions = {
    // Scrolling Core
    animationTime    : 2000, // [ms]
    stepSize         : 500, // [px]

    // Acceleration
    accelerationDelta : 100,  // 50
    accelerationMax   : 1,   // 3

    // Keyboard Settings
    keyboardSupport   : true,  // option
    arrowScroll       : 50,    // [px]

    // Pulse (less tweakable)
    // ratio of "tail" to "acceleration"
    pulseAlgorithm   : true,
    pulseScale       : 4,
    pulseNormalize   : 1,

    // Other
    touchpadSupport   : false, // ignore touchpad by default
    fixedBackground   : true, 
    excluded          : ''    
}
</script>
<script async src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.9/SmoothScroll.js"></script>

Share link:
https://preview.webflow.com/preview/themusicdepartment?utm_source=themusicdepartment&preview=956dffba843eac2d4736ca42548b287e