Custom mousewheel scroll with ScrollTo Plugin

[Chrysto]

Hi Guys,

 

Just wrote a very basic script that uses TweenMax and ScrollTo plugin to animate window on scrolling with mouse wheel

 

Demo:  http://bassta.bg/demos/smooth-page-scroll/

 

Code:

<script type="text/javascript">		

			/*
				Author	: Chrysto Panayotov
				Date	: 2/28/13
			*/

			$(function(){
				
				var $window = $(window);
				var isTweening = false;
				
				document.onmousewheel = function(){ customScroll(); }
				if(document.addEventListener){
				    document.addEventListener('DOMMouseScroll', customScroll, false);
				}
				 
				function customScroll(event){
				   
				   var delta = 0;
				   
				   if (!event){
					   event = window.event;
				   }
				   
				   if (event.wheelDelta) {
					   delta = event.wheelDelta/120;
				   } else if(event.detail) {
					   delta = -event.detail/3;
				   }
				   
				   if (delta){
				   		
				   		//console.log(isTweening);
				   		
				   		//if(!isTweening){
					   		
					   		//isTweening = true;
					   		
						   	var scrollTop = $window.scrollTop();
						   	var finScroll = scrollTop - parseInt(delta*100) * 3;
						   
						   	//console.log(finScroll);
						   	   					   			   
						   	TweenMax.to($window, 0.5, {
							   	scrollTo : { y: finScroll, autoKill:true },
							   	ease: Power4.easeOut,
							   	autoKill: true,
							   	overwrite: 5,
							   	onComplete: function(){ 
							   		//console.log(isTweening);
							   		//isTweening = false; 
							   	}
							});
					   
					   //}
				   }
				   
				   if (event.preventDefault){
					   event.preventDefault();
				   }
				   
				   event.returnValue = false;
				     				    
				}
				
			});

		</script>

This is just an concept, but it is helpfull for somebody

tweenlitemousewheel.zip

[Carl]

Very nice! Cool idea. 

Thanks a ton for sharing.

 

I changed the duration to 4 and added a Bounce.easeOut --- worst idea ever