Slow down scrolling

Design help Animations & Interactions
1

Is it possible to slow down scrolling with Webflow? Similar to this website https://ceremonycoffee.com/

Thanks a lot!

Here is my public share link: LINK
(how to access public share link)

1 Like
2

Hello @jensvahle

Yes, but you need to use custom code.

You can paste this

  <script>
  if (window.addEventListener) window.addEventListener('DOMMouseScroll', wheel, false);
window.onmousewheel = document.onmousewheel = wheel;

function wheel(event) {
    var delta = 0;
    if (event.wheelDelta) delta = event.wheelDelta / 40; //controls the scroll wheel range/speed
    else if (event.detail) delta = -event.detail / 40;

    handle(delta);
    if (event.preventDefault) event.preventDefault();
    event.returnValue = false;
}

var goUp = true;
var end = null;
var interval = null;

function handle(delta) {
var animationInterval = 20; //controls the scroll animation after scroll is done
  var scrollSpeed = 20; //controls the scroll animation after scroll is done

if (end == null) {
  end = $(window).scrollTop();
  }
  end -= 20 * delta;
  goUp = delta > 0;

  if (interval == null) {
    interval = setInterval(function () {
      var scrollTop = $(window).scrollTop();
      var step = Math.round((end - scrollTop) / scrollSpeed);
      if (scrollTop <= 0 || 
          scrollTop >= $(window).prop("scrollHeight") - $(window).height() ||
          goUp && step > -1 || 
          !goUp && step < 1 ) {
        clearInterval(interval);
        interval = null;
        end = null;
      }
      $(window).scrollTop(scrollTop + step );
    }, animationInterval);
  }
}
</script>

Right before the closing body tag. It’s no so smooth, but I’m still searching for a good solution.

You can also check a previous post > Smooth Site Scrolling? - #6 by mrv

Hope this helps

If you need more help feel free to reach out.

Piter :webflow_heart:

3 Likes
3

Thanks @PeterDimitrov
I put this in head

<script>

/* Smooth Scrolls*/

window.SmoothScrollOptions = { animationTime: 1000 }

</script>

<script async src=“https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.6/SmoothScroll.min.js” integrity=“sha256-Yut1YAlvRzggjdRiTu+X56CcayNzkjwk3p34ZZL0WHk=” crossorigin=“anonymous”></script>

but… I’m not impress.
I found one website who uses this library:

and its great, but I do not know how to implement it :disappointed:

4

So I think i might have a better solution to this with just JavaScript.

I don’t know about slowing down the scroll window but you can definitely speed up the scrolled div, that looks like what they did in this example.

window.addEventListener('scroll', function() {
let windowLength = window.scrollY;
let scrollDiv = document.querySelector('.scroll=div');

scrollDiv.style.transform = 'translateY( ' + windowLength + 'px)';

console.log(windowLength);
});

So what this does, is it takes whatever Div you want to select (‘.scroll=div’ in this case) and translates it in the y direction based on your scrolling position. you can make the number negative to make the div move up as you scroll.

You can also play around with the windowLength variable to change the speed of the translation. just divide it by some larger number and play around with what speed you like

5

I know pretty much nothing about JS. Can you indicate which variables we edit in that code? I think I get how to define the class of the div to move, but not sure how to adjust the scroll speed using that transform string.

Thanks!