Skrollr: Smooth scrolling

Question

I would like to achieve a smooth scrolling when turning a mouse wheel. Currently, when I do one turn, the scrollbar kinda jumps and the animation is jumpy.

Example of this behaviour: http://areaaperta.com/nicescroll/

Can this scrolling be achieved using skrollr only? If so, how? I tried following code

var s = skrollr.init({
render: function(data) {
 //Debugging - Log the current scroll position.
 console.log(data.curTop);
 },
 smoothScrolling: true,
 smoothScrollingDuration: 500,
 easing: {
 WTF: Math.random,
 inverted: function(p) {
 return 1-p;
 }
 }
 });

but it doesn't make a big difference. The animation is little bit smoother (i.e. background slides for a while and then stops), but the scrolling itself is still jumpy.

I would prefer to solve this with skrollr only as I think it is prepared for it instead of adding another plugin.

Answer 1

This is a quote from Petr Tichy (ihatetomatoes.net):

For smooth animations, animate cheap properties.

The best result you'll get, when you keep animating only the cheap CSS properties.

• transform: scale(1.2)
• transform: translateX(100px)
• transform: rotate(90deg)
• opacity: 0.5

These 4 properties will let you change the size, position, rotation and opacity of your elements.

Combination of these CSS properties will enable you to create pretty much most of you ideas and will get you the best results.

If you come across lagging and choppy scrolling animations, give the animated element transform: translateZ(0).

This will promote the element into composite layers and will get rid of the lag.

Answer 2

Try to include this script

jQuery(function () {
 var $window = jQuery(window);
 var scrollTime = 0.5;
 var scrollDistance = 150;
 $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
 });
 });
 });

Answer 3

I had this problem also (With Chrome on Mac)

I solved by this plug-in : https://github.com/simov/simplr-smoothscroll

<!-- After jQuery -->
<script src="jquery.mousewheel.min.js"></script>
<script src="jquery.simplr.smoothscroll.min.js"></script>
<script type="text/javascript">$.srSmoothscroll();</script>

• heytricia: This is not applicable re: skrollr options.