A handler for scrolling inside elements with different eases
Take a look to the demo --> Demo
var ScrollManager = require('scroll-manager');
this.scroller = new ScrollManager();
var elementTo = document.getElementById('elementID');
var callback = function(){
console.log("I'm done with scroll stuff");
};
var options = {
duration: 0.8,
to: elementTo.offsetTop
element: document.body,
ease: 'easeLinear'
};
this.scroller.scrollTo(options, callback);
//If you want to scroll to an element without using the offset you can use:
var element = document.getElementById('elementID');
this.scroller.scrollToElement({element: document.body, to: element, duration: 0.6, ease: 'easeOutExpo'});
//This scroll the element to the offsetToScroll in the required duration with the default ease
this.scroller.scrollTo({element: document.body, to: 100, duration: 0.6});
//This scroll the element to the offsetToScroll in the required duration with the selected ease and finally execute the callback
this.scroller.scrollTo({element: document.body, to: 100, duration: 0.6, ease: 'easeOutCubic'}, callback);
//You also can use the method scrollTo to scroll horizontal in the element, you only need to set the direction
this.scroller.scrollTo({direction:'horizontal', element: document.body, to: 100, duration: 0.6, ease: 'easeOutCubic'}, callback);
//This scroll the element to the top in the required duration with the selected ease and finally execute the callback
this.scroller.scrollTop({element: document.body, duration: 0.6, ease: 'easeOutCubic'}, callback);
//This scroll the element to the bottom in the required duration with the default ease
this.scroller.scrollBottom({element: document.body, duration: 0.6});
//This scroll the element to the right of an element in the required duration with the selected ease and finally execute the callback
this.scroller.ScrollRight({element: document.body, duration: 0.6, ease: 'easeOutCubic'}, callback);
//This scroll the element to the left of an element in the required duration with the default ease
this.scroller.ScrollLeft({element: document.body, duration: 0.6});
//If you want to scroll with the same velocity without taking into acount the duration you can use:
this.scroller.scrollEqual({element: document.body, velocity: 100, to: 100, ease: 'easeOutCubic'});
//This is useful if you want the user feel the difference between short and long distances.
'easeLinear'
'easeInQuad'
'easeOutQuad'
'easeInOutQuad'
'easeInCubic'
'easeOutCubic'
'easeInOutCubic'
'easeInExpo'
'easeOutExpo'
'easeInOutExpo'
'easeInCirc'
'easeOutCirc'
'easeInOutCirc'
Note: If you dont choose any ease, easeLinear is going to be run.