Smooth page scrolling with TweenMax

On this tutorial I will show you how to create a smooth scrolling for your website. We’ll be using TweenMax and the ScrollToPlugin.

[button url=”http://bassta.bg/demos/smooth-page-scroll/” style=”green” size=”large” type=”square” icon=”view” target=”_blank”] VIEW DEMO [/button] [button url=”http://bassta.bg/downloads/smooth-page-scroll.zip” style=”blue” size=”large” type=”square” icon=”download” target=”_blank”] DOWNLOAD FILES [/button]

 

The idea behind the script is very simple. First, we will catch the mouse scrolling event, then we will animate the window depending on the event data. We will be using this snippet to catch the mouse wheel event and TweenMax and ScrollToPlugin for the animation. The ScrollToPlugin makes it possible to animate the scroll position on every DOM element, or the window in vertical or/and horizontal direction.

First, we have to include jQuery, TweenMax and ScrollToPlugin. We’re doing this via CDN:

Let’s set up some variables:

var $window = $(window);
var scrollTime = 1.2;
var scrollDistance = 170;

The first variable is the window object. We need it both to listen it for scroll event, and to animate it. The scrollTime variable will be used to define the time of the animation and the scrollDistance to calculate the amount of scroll.

Next, we have to listen for mouse scroll event:

$window.on("mousewheel DOMMouseScroll", function(event){
	event.preventDefault();	
	var delta = event.originalEvent.wheelDelta/120 || -event.originalEvent.detail/3;
});

We use event.preventDefault() to prevent default scrolling. What we need is the event delta – it will tell us how much the user scrolled. Once we know this, we’re able to calculate the new window position:

var scrollTop = $window.scrollTop();
var finalScroll = scrollTop - parseInt(delta*scrollDistance);

Let’s animate the window to this new position:

TweenMax.to($window, scrollTime, {
	scrollTo : { y: finalScroll, autoKill:true },
	ease: Power1.easeOut,
	overwrite: 5							
});

That’s all! Here is the final code:

$(function(){	

        var $window = $(window);
	var scrollTime = 1.2;
	var scrollDistance = 170;

	$window.on("mousewheel DOMMouseScroll", function(event){

		event.preventDefault();	

		var delta = event.originalEvent.wheelDelta/120 || -event.originalEvent.detail/3;
		var scrollTop = $window.scrollTop();
		var finalScroll = scrollTop - parseInt(delta*scrollDistance);

		TweenMax.to($window, scrollTime, {
			scrollTo : { y: finalScroll, autoKill:true },
				ease: Power1.easeOut,
				overwrite: 5							
			});

	});
});

If you want to make the scroll faster, decrease scrollTime variable. If you want to scroll to a longer distance, increase scrollDistance variable.
Advanced jQuery users may think of throttling the scroll event when implementing this technique. If you need advanced smooth scroll plugin, I would recommend Nicescroll and perfect-scrollbar.

 

Demo credits:

Purty Wood background pattern by  Richard Tabor.
*Note: subtlepatterns are now toptal

Mr Dafoe font by Sudtipos.

Hipsteripsum