Custom GSAP "hacked" mousewheel scroll

Question

I made a custom content scroller with jQuery and GSAP in the aim to have a nicer effect than the Chrome basic & stuttered scroll. But I just saw (on Chrome then) that the scroll is laggy and well bugged when I test it with my Wacom tablet (with pen + horizontal scroll, or any trackpad/touch stuff I guess).

Any thoughts about tweaks to render a more natural scroll effect, not hacked like now?
Maybe it's something about the mousewheel DOMMouseScroll event, or my method is bad, the markup/css need some changes…?

$("section").on("mousewheel DOMMouseScroll", function (e) {
    e.preventDefault();

    var delta = e.originalEvent.wheelDelta / 120 || -e.originalEvent.detail; // Chrome || FF

    // Move thumbs
    TweenLite.to($("#photos"), 1.2, {
        scrollLeft: $("#photos").scrollLeft() - parseInt(delta * 35),
        ease: Expo.easeOut,
        overwrite: 5,
        onUpdate: move
    });
});

— http://jsfiddle.net/h66tatp6/

Many thanks for your lights!

Answer 1

Cooked up something. Not really sure if it fits your needs or if it is exactly the type of thing you were looking for, but perhaps it will give you some ideas.

Codepen.

JavaScript:

/*global TweenMax,Power2,Power4*/
var initIntervalID=null,initInterval=10;
var scrollBar=document.querySelector('.scrollbar');
var scrollBarHandle=document.querySelector('.scrollbar__handle');
var scrollBarBg=document.querySelector('.scrollbar__bg');
var container=document.querySelector('.container');
var images=document.querySelector('.images');
var thumbs=document.querySelectorAll('.thumb');
var numThumbs=thumbs.length;
var resizeID=null,resizeTimeout=400,resizeDuration=.4,resizeEase=Power2.easeOut;
var initDuration=.4,initEase=Power2.easeOut,initStagger=.1;
var duration=.4,ease=Power2.easeOut;
var force3D=true;
var windowWidth=window.innerWidth;
var windowHeight=window.innerHeight;
var thumbWidth=200,thumbHeight=200,thumbGutter=20;
var scrollBarBgHeight=10,scrollBarBgWidth=thumbWidth,scrollBarHandleWidth=20,scrollBarGutter=10;
var imagesPositions=[],iterator=0,percentages=[],scrollBarHandlePositions=[];
function init(){
    initImages();
    initScrollbar();
    initPositions();
    assignListeners();
}
function onMouseWheel(event){
    var e=window.event||event;
    var delta=Math.max(-1,Math.min(1,(e.wheelDelta|| -e.detail)));
    if(delta>0){
        iterator-=1;
        if(iterator<0){
            iterator=0;
            TweenMax.to(images,duration*2,{bezier:{type:'thru',values:[{x:imagesPositions[iterator]+(thumbWidth+thumbGutter)*.1},{x:imagesPositions[iterator]}]},ease:ease});
            TweenMax.killTweensOf(scrollBar);
            TweenMax.to(scrollBar,duration,{autoAlpha:1,ease:ease});
            TweenMax.to(scrollBarHandle,duration*2,{
                transformOrigin:'left',
                bezier:{type:'thru',values:[{scaleX:.2},{scaleX:1}]},
                ease:ease,
                onComplete:function(){ TweenMax.to(scrollBar,duration,{autoAlpha:0,ease:ease}); }
            });
        }else{
            TweenMax.to(images,duration,{x:imagesPositions[iterator],ease:ease});
            TweenMax.killTweensOf(scrollBar);
            TweenMax.to(scrollBar,duration,{autoAlpha:1,ease:ease});
            TweenMax.to(scrollBarHandle,duration,{
                x:scrollBarHandlePositions[iterator],
                ease:ease,
                onComplete:function(){ TweenMax.to(scrollBar,duration,{autoAlpha:0,ease:ease}); }
            });
        }
    }else{
        iterator+=1;
        if(iterator>numThumbs-1){
            iterator=numThumbs-1;
            TweenMax.to(images,duration*2,{bezier:{type:'thru',values:[{x:imagesPositions[iterator]-(thumbWidth+thumbGutter)*.1},{x:imagesPositions[iterator]}]},ease:ease});
            TweenMax.killTweensOf(scrollBar);
            TweenMax.to(scrollBar,duration,{autoAlpha:1,ease:ease});
            TweenMax.to(scrollBarHandle,duration*2,{
                transformOrigin:'right',
                bezier:{type:'thru',values:[{scaleX:.2},{scaleX:1}]},
                ease:ease,
                onComplete:function(){ TweenMax.to(scrollBar,duration,{autoAlpha:0,ease:ease}); }
            });
        }else{
            TweenMax.to(images,duration,{x:imagesPositions[iterator],ease:ease});
            TweenMax.killTweensOf(scrollBar);
            TweenMax.to(scrollBar,duration,{autoAlpha:1,ease:ease});
            TweenMax.to(scrollBarHandle,duration,{
                x:scrollBarHandlePositions[iterator],
                ease:ease,
                onComplete:function(){ TweenMax.to(scrollBar,duration,{autoAlpha:0,ease:ease}); }
            });
        }
    }
    return false;
}
function listenToMouseWheel(){
    if(container.addEventListener){
        container.addEventListener('mousewheel',onMouseWheel,false);
        container.addEventListener('DOMMouseScroll',onMouseWheel,false);
    }else{
        container.attachEvent('onmousewheel',onMouseWheel);
    }
}
function adjustContainerOnResize(){
    windowWidth=window.innerWidth;
    windowHeight=window.innerHeight;
    TweenMax.to(container,resizeDuration,{
        x:windowWidth*.5-thumbWidth*.5,
        y:windowHeight*.5-thumbHeight*.5,
        ease:resizeEase,
        force3D:force3D
    });
}
function onResize(){
    clearTimeout(resizeID);
    resizeID=setTimeout(adjustContainerOnResize,resizeTimeout);
}
function listenToResize(){
    (window.addEventListener)?window.addEventListener('resize',onResize,false):window.attachEvent('onresize',onResize);
}
function assignListeners(){
    listenToResize();
    listenToMouseWheel();
}
function initPositions(){
    for(var i=0; i<numThumbs; i+=1){
        imagesPositions[i]=-i*(thumbWidth+thumbGutter);
        percentages[i]=i*(100/numThumbs);
        if(i===0){
            scrollBarHandlePositions[i]=0;
        }else if(i===numThumbs-1){
            scrollBarHandlePositions[i]=scrollBarBgWidth-scrollBarHandleWidth;
        }else{
            scrollBarHandlePositions[i]=i*(scrollBarBgWidth/(numThumbs-1))-scrollBarHandleWidth*.5;
        }
    }
}
function initScrollbar(){
    TweenMax.set(scrollBar,{
        y:scrollBarGutter,
        width:scrollBarBgWidth,
        height:scrollBarBgHeight,
        force3D:force3D
    });
    TweenMax.set(scrollBarHandle,{y:0,force3D:force3D});
    TweenMax.to(scrollBar,initDuration,{delay:initStagger,opacity:1,ease:initEase});
}
function initImages(){
    for(var i=0; i<numThumbs; i+=1){
        TweenMax.set(thumbs[i],{x:i*(thumbWidth+thumbGutter),force3D:force3D});
    }
    var width=numThumbs*(thumbWidth+thumbGutter)-thumbGutter;
    TweenMax.set(container,{y:windowHeight*.5-thumbHeight*.5,x:windowWidth*.5-thumbWidth*.5,height:thumbHeight+scrollBarGutter+scrollBarBgHeight,width:thumbWidth,force3D:force3D});
    TweenMax.set(images,{height:thumbHeight,width:width,force3D:force3D});
    TweenMax.staggerTo(thumbs,initDuration,{opacity:1,ease:initEase},initStagger);
}
initIntervalID=setInterval(function(){
    if(document.readyState==="complete"){
        clearInterval(initIntervalID);
        init();
    }
},initInterval);

Beware of ugly, non-refactored, highly un-tested, un-optimized code. Created only for fun. If I find time, may be I will build upon it later and include other mouse interactions such as mousedown, mousemove, mouseup as well as touch interactions such as touchstart, touchmove, touchend events. Should be fun. For now, use it as you may like.