Slow/smooth scroll

Hi there,

How would one implement such a long/slow/smooth scroll as shown on this example of the website?

http://robinmastromarino.com/

When you visit one of his works, the scroll seems very bouncy, like eased.

Kind Regards,
Max, ish.

Great question!

can somebody please help to archive a slow smooth scroll effect on squarespace websites.

Kind regards from Denmark

You can make the scroll speed smooth using this library

nathco/jQuery.scrollSpeed: Extension for custom scrolling speed and easing (github.com)

real example Nathan Rutzky - jQuery.scrollSpeed

Add this to Settings->Advanced->Code Injection, remove jquery if it already included

<script src="https://code.nath.co/src/jQuery.min.js"></script>
<script src="https://rawgit.com/nathco/jQuery.scrollSpeed/master/jQuery.scrollSpeed.js"></script>
<script>
    $(function() {
       jQuery.scrollSpeed(100, 800, 'easeOutCubic');
    });
</script>

Thanks bangank36

Added it to the advanced / header is that how I should do it?

7 minutes ago, Winther said:

Thanks bangank36

 

Added it to the advanced / header is that how I should do it?

place the snippet on line 5

<script src="https://rawgit.com/nathco/jQuery.scrollSpeed/master/jQuery.scrollSpeed.js"></script>

1 minute ago, bangank36 said:

place the snippet on line 5

<script src="https://rawgit.com/nathco/jQuery.scrollSpeed/master/jQuery.scrollSpeed.js"></script>

Ahh yes of course! awesome thanks a lot. 

Found another smooth scroll plugin which seems to work even better: https://github.com/gblazex/smoothscroll-for-websites

No idea how to install it though 😞

@LukasEriksen This works when inserted into Settings->Advanced->Code Injection:

You can test by scrolling with your up/down arrow keys and see how it's smooth vs choppy without it.

<script src="https://code.nath.co/src/jQuery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.10/SmoothScroll.min.js"></script>

<script>SmoothScroll({
      // Scrolling Core
    animationTime    : 2000, // [ms]
    stepSize         : 100, // [px]

    // Acceleration
    accelerationDelta : 50,  // 50
    accelerationMax   : 3,   // 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>

7 hours ago, provenform said:

@LukasEriksen This works when inserted into Settings->Advanced->Code Injection:

You can test by scrolling with your up/down arrow keys and see how it's smooth vs choppy without it.

<script src="https://code.nath.co/src/jQuery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.10/SmoothScroll.min.js"></script>

<script>SmoothScroll({
      // Scrolling Core
    animationTime    : 2000, // [ms]
    stepSize         : 100, // [px]

    // Acceleration
    accelerationDelta : 50,  // 50
    accelerationMax   : 3,   // 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>

 

Thank you so much!

On 4/20/2021 at 8:16 PM, provenform said:

@LukasEriksen This works when inserted into Settings->Advanced->Code Injection:

You can test by scrolling with your up/down arrow keys and see how it's smooth vs choppy without it.

<script src="https://code.nath.co/src/jQuery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.10/SmoothScroll.min.js"></script>

<script>SmoothScroll({
      // Scrolling Core
    animationTime    : 2000, // [ms]
    stepSize         : 100, // [px]

    // Acceleration
    accelerationDelta : 50,  // 50
    accelerationMax   : 3,   // 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>

 

Can you also slow the acceleration speed slightly at some sections like in the example website?  (http://robinmastromarino.com/)

On 4/21/2021 at 12:16 AM, provenform said:

@LukasEriksen This works when inserted into Settings->Advanced->Code Injection:

You can test by scrolling with your up/down arrow keys and see how it's smooth vs choppy without it.

<script src="https://code.nath.co/src/jQuery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.10/SmoothScroll.min.js"></script>

<script>SmoothScroll({
      // Scrolling Core
    animationTime    : 2000, // [ms]
    stepSize         : 100, // [px]

    // Acceleration
    accelerationDelta : 50,  // 50
    accelerationMax   : 3,   // 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>

 

Its not working on laptop touchpad

15 hours ago, pexeldio said:

Its not working on laptop touchpad

@tuanphan is there any way to make full page slow scrolling. Current code not working on laptop touchpad.

On 4/20/2021 at 8:16 PM, provenform said:

@LukasEriksen This works when inserted into Settings->Advanced->Code Injection:

You can test by scrolling with your up/down arrow keys and see how it's smooth vs choppy without it.

<script src="https://code.nath.co/src/jQuery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.10/SmoothScroll.min.js"></script>

<script>SmoothScroll({
      // Scrolling Core
    animationTime    : 2000, // [ms]
    stepSize         : 100, // [px]

    // Acceleration
    accelerationDelta : 50,  // 50
    accelerationMax   : 3,   // 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>

 

Can you pls help me how to limit this script only to the desktop so that it is disabled on smaller devices? Thank you.

13 minutes ago, Goashape-Studio said:

Can you pls help me how to limit this script only to the desktop so that it is disabled on smaller devices? Thank you.

I find solution for faster loading at all devices (Im not coder so maybe this is funny solution 🙂 I replace script cdnjs address. And now is mega fast loaded.
 

<script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.10/SmoothScroll.min.js" integrity="sha512-HaoDYc3PGduguBWOSToNc0AWGHBi2Y432Ssp3wNIdlOzrunCtB2qq6FrhtPbo+PlbvRbyi86dr5VQx61eg/daQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script>SmoothScroll({
      // Scrolling Core
    animationTime    : 1000, // [ms]
    stepSize         : 200, // [px]

    // Acceleration
    accelerationDelta : 50,  // 50
    accelerationMax   : 3,   // 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   : true, // ignore touchpad by default
    fixedBackground   : true, 
    excluded          : ''    
})</script>

For all who looking for "smoothScroll" with fast loading cross device and customize options. Simple paste this code in WEBSITE/WEBSITE TOOLS/CODE INJECTION/HEADER

<script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.10/SmoothScroll.min.js" integrity="sha512-HaoDYc3PGduguBWOSToNc0AWGHBi2Y432Ssp3wNIdlOzrunCtB2qq6FrhtPbo+PlbvRbyi86dr5VQx61eg/daQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script>SmoothScroll({
      // Scrolling Core
    animationTime    : 1000, // [ms]
    stepSize         : 200, // [px]

    // Acceleration
    accelerationDelta : 50,  // 50
    accelerationMax   : 3,   // 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   : true, // ignore touchpad by default
    fixedBackground   : true, 
    excluded          : ''    
})</script>