Streaming live at 10am (PST)

Smooth Site Scrolling?


#1

Good day everyone.

I was wondering how this website was able to achieve their smooth scrolling effect, and if I could achieve said effect in Webflow:

Any help is appreciated.
Cheers!



#2

Sorry for the bump, but I really do require help with this. :slight_smile:


#3

Hi @Desiign,

well you could try to reverse-engineer their code to see what function they’ve used but it’s pretty hard to read and understand what’s going on… if you’re into it, try ctrl+f with keyword scroll… maybe you find something interesting in the CSS or JS files:

css
js

The scrolling looks nice indeed :slight_smile:
Let us know if you find something, I’d be interested too !

Good luck


#4

Here you go. Example in my portfolio below…

Can’t remember where I found this but it took some digging around when I wanted to know the same thing a couple years ago. I add it to all my builds along with “fastclick.js” to get rid of click delays on browsers - both add a nice little final polish.

The current settings add just a subtle little “hi-jacking” of the default janky/jumpy scrolling behavior of most browsers. Just a touch of smoothness and a tiny bit of overscroll on a quick mouse wheel movement, if you want a different feel then play around with the settings at the top of the script. You can fine tune it quite a bit…

Webflow doesn’t allow you to upload js files so you’ll need to host it elsewhere…

Then just add it as an include in the footer code of your site.

<script type="text/javascript" src="https://yourhostingservice/smoothscroll.js"></script>

Settings


Smooth Scrolling - Awwwards website
#5

@Mogeek

I’m struggling with this and would love any help you could offer.

  1. I’m not seeing the smooth scrolling on your portfolio you linked above, but I do see the smooth scrolling here

I’m trying to recreate it with your tutorial, but am really struggling - here is my share link for the project I’m trying to get it working on https://preview.webflow.com/preview/smooth-scrolling-2bbb0d?preview=b05e058de8c41b101ec7a2546b1dfce6

Thank you in advance!


#6

+1
Same thing here
Im on trackpad scroll.


Slow down scrolling
#7

Try using 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>

Not so smooth, but works for now :smile: I’m trying to find a smoother solution.

Piter :webflow_heart:


#8

Oh, it look super nice on Oui Will website. I find something similar on https://bouguessa.com
It would be nice if someone figure out how we can incorporate this smoothness in our design.


#9

Has anyone found the input for this - I have been requested this effect in one of my projects.

Many thanks!


#10

Did you ever find a smoother solution? I’d be very grateful if possible.


#11

Nope :sweat_smile: but if I find a solution I will share it :blush:


#12

Hey guys,

I recently found this, it seems to have support for mousewheel easing and distance control.

http://manos.malihu.gr/jquery-custom-content-scroller/

Haven’t the foggiest idea how to implement it thought - I have a design brain unfortunately. Anyone come across this before and have dev. skills?


#13

Wow, I didn’t realize this was a feature that many others would be interested in. Unfortunately I am yet to find a solution, so if anyone has any way that we can emulate this in a Webflow site please do share it with us.

Perhaps we should request this on the wishlist?


#14

I personally find forced smooth scrolling on sites off-putting, especially considering that all major browsers already have smooth-scrolling on by default and landing on the page that kinda-but-not-quite behaves like you used to is jarring. The example from the OP feels horribly laggy to me for example.

Another consideration is that most of the scrolljacking techniques will produce slightly different results on different browsers to the point of it being unusable on one while good enough on another. not sure if pains of trying to normalize their behaviour worth it.

Just my 2 cents.


#15

@dram To a certain extent, I agree with you. Especially on the part of it looking good on some browsers whereas on others it can look really wonky. But sometimes a client might just want this effect, or perhaps it fits the project, so I think in some cases it can be really effective.

Anyway, I found this from Stackoverflow, but I just can’t seem to figure out how to properly implement it:

Edit: I got the code to work! Add this to the Custom Code section on your site before the Body tag:

<body onload="init()">
  <script>
function init(){
    new SmoothScroll(document,400,50)
}

function SmoothScroll(target, speed, smooth) {
    if (target == document)
	    target = (document.documentElement || document.body.parentNode || document.body) // 
cross browser support for document scrolling
    var moving = false
    var pos = target.scrollTop
    target.addEventListener('mousewheel', scrolled, false)
    target.addEventListener('DOMMouseScroll', scrolled, false)

    function scrolled(e) {
	    e.preventDefault(); // disable default scrolling

	    var delta = normalizeWheelDelta(e)

	    pos += -delta * speed
	    pos = Math.max(0, Math.min(pos, target.scrollHeight - target.clientHeight)) // limit scrolling

	    if (!moving) update()
    }

    function normalizeWheelDelta(e){
	    if(e.detail){
		    if(e.wheelDelta)
			    return e.wheelDelta/e.detail/40 * (e.detail>0 ? 1 : -1) // Opera
		    else
			    return -e.detail/3 // Firefox
	    }else
		    return e.wheelDelta/500 // IE,Safari,Chrome
    }

    function update() {
	    moving = true
	    var delta = (pos - target.scrollTop) / smooth
	    target.scrollTop += delta
	    if (Math.abs(delta) > 0.5)
		    requestFrame(update)
	    else
		    moving = false
    }

    var requestFrame = function() { // requestAnimationFrame cross browser
	    return (
		    window.requestAnimationFrame ||
		    window.webkitRequestAnimationFrame ||
		    window.mozRequestAnimationFrame ||
		    window.oRequestAnimationFrame ||
		    window.msRequestAnimationFrame ||
		    function(func) {
			    window.setTimeout(func, 1000 / 50);
		    }
	    );
    }()
}
</script>
</body>

Just tweak the values to your liking and you should be good to go!


#16

Hello again :grin:

I’ve made something smoother :smile: The scrollbar is fancy too, but I can’t understand how to style the scrollbar here. I have some sites with styled bar, but here is different.

I’m using > https://idiotwu.github.io/smooth-scrollbar/

The solution for a smoother scroll is renderByPixels: false;

Here’s is the project where you can explore and clone if you like > https://webflow.com/website/Smooth-scrollbarsmooth-scrolling

Piter :webflow_heart:


#17

Hi All,

I made a Webflow site awhile ago showcasing the 4 most common implementations for momentum/inertia scrolling:

Site:
http://inertia-momentum-scroll.webflow.io

Clone Link:
Clone URL


#18

Thanks a lot for sharing!


#19

Hey guys,

I’ve tried multiple times to get the smooth site scrolling functioning on my site using the Vanilla.js, SmoothScrolling and Luxy custom code to no avail.

Anyway someone could post a step by step to get one of them running?

Much appreciated guys!


#20

Hello @tjthomsonjones

If you want to use the vanilla.js method you need to do the following:

1. Add a div with a class > main > this will be your sections wrapper

2. Add your sections inside > main > sections inside

3. Add the script before the closing body tag

<script>
// First we get the elements we need, the body and our container on which
// we are going to apply a smooth scroll. You will always need a container
// to apply a smooth scroll. You will not be able to apply it directly to
// the body.
const body = document.body;
const main = document.querySelector('main');

// We define variables we will need later. 
// 2 variables to store the scroll position and 2 variables to store the 
// container position.
let sx = 0;
let sy = 0;

let dx = sx;
let dy = sy;

// The trick is to set a height to the body to keep the browser scroll bar.
body.style.height = main.clientHeight + 'px';

// Then we fix our container so it won't move when the user scrolls.
// We will move it ourself with the Linear Interpolation and translations.
main.style.position = 'fixed';
main.style.top = 0;
main.style.left = 0;

// We bind a scroll event to the window to watch scroll position.
window.addEventListener('scroll', scroll);

function scroll() {
  // We only update the scroll position variables
  sx = window.pageXOffset;
  sy = window.pageYOffset;
}

// Then we start a `requestAnimationFrame` loop. 

window.requestAnimationFrame(render);

function render() {
  // We calculate our container position by using our Linear Interpolation method.
  
  dx = lerp(dx, sx, 0.1);
  dy = lerp(dy, sy, 0.1);
  
  dx = Math.floor(dx * 100) / 100;
  dy = Math.floor(dy * 100) / 100;
  
  // Finally we translate our container to its new positions.
  // Don't forget to add a minus sign because the container needs to move in 
  // the opposite direction of the window scroll.
  main.style.transform = `translate(-${dx}px, -${dy}px)`;
  
  // And we loop again.
  window.requestAnimationFrame(render);
}

// This is our Linear Interpolation method.
function lerp(a, b, n) {
  return (1 - n) * a + n * b;
}
</script>

Luxy.js

1. Add a div with a class > main > this will be your sections wrapper > the main div needs an ID > luxy

2. Add your sections inside > main > sections inside

3. Add the script before the closing body tag

<script src="https://cjh.sfo2.cdn.digitaloceanspaces.com/Smooth-Scroll/luxy.js"></script>

<script charset="utf-8">
    	luxy.init({
			wrapper: '#luxy',
			wrapperSpeed:  0.06
		});
</script>

Done!

Hope this helps!

Piter :webflow_heart: