Scrolling animation issue using Greensock

Question

I am using GreenSock(https://greensock.com/get-started-js) for animation.

The issue is, when I am scrolling the mouse wheel downside then animation is working from right to left. This is not a right. I need when mouse scroll wheel up then animates from right to left and mouse scroll wheel down then animate from left to right. I need a fast scroll.

when mouse wheel scroll fast than how can animate the fast from right to left and vice-versa?

I tried some code but not working.

would you help me out in this?

/*scroll the page horizontal*/
(function() {
  var content = document.getElementById("content"); // container of scrollable content
  var xScroll = 0;  // initialize virtual scroll position
  var ignore = false; // ignore flag, decides whether xScroll needs to be updated (user scrolls via scrollbar) or not (user scrolls via mousewheel)
    function scrollHorizontally(e) {
        // every browser gives another e.deltaY -> only get the current direction and set an own speed
        var direction = (e.deltaY>0) ? 1 : -1;
        xScroll = xScroll+direction*120; // calculate new virtual scroll positon -> scroll position at the end of animation
        // set limits to avoid overshooting and stucking at beginning or end
        var max = content.scrollWidth - content.clientWidth;
          if (xScroll <= 0) {
              xScroll = 0;
          } else if (xScroll >= max) {
              xScroll = max;
          }
        ignore = true; // user scrolls via mousewheel -> block updates of xScroll until animation ahs finished
        // scroll smooth to xScroll
        TweenLite.to(content, 1, { ease: Power1.easeOut, scrollTo:{x:xScroll} });
        e.preventDefault();
    }
    function updateXScroll(e) {
        if (xScroll == content.scrollLeft) {
          // scroll animation has finished -> reset ignore flag -> xScroll will be updated again
          ignore = false;
        }
        if (!ignore) {
          // if scroll event was NOT fired by mousewheel, update xScroll
          xScroll = content.scrollLeft;
        }
    }
   if (content.addEventListener) {
        // Standard
        content.addEventListener("scroll", updateXScroll, false); // update xScroll at scrollbar scrolls
        content.addEventListener("wheel", scrollHorizontally, false); // make smooth scroll animation when srolling via mousewheel
    } else {
        // IE 6/7/8
        content.attachEvent("onmousewheel", scrollHorizontally);
    }

})();

#content {
   position:fixed;
display: inline-block;
overflow-x: scroll;
width: 100%;
overflow-y: hidden;
top: 0;
right:0;
height: 100%;
}
#content > div{
    overflow: hidden;
    width:350%;/*to increase the width */
}
.horizontal_scroll .full_screen_100
{
    height: 100%;
    background-color: #fff;
    display: flex;
}
.horizontal_scroll .full_screen_100 article{
    width: 900px;
    height: 100%;
    float:left;
    border-left: solid 1px #E2E2E2;

}

<div id="content">
        <div class="horizontal_scroll">
        <div class="full_screen_100">
            <article>
                <span class="page_slogan">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </span>

        </article>

            <article>
                <span class="page_slogan">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>

        </article>

            <article>
                <span class="page_slogan">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
        </article>

            <article>
                <span class="page_slogan">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </span>
        </article>

            <article>
                <span class="page_slogan">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
        </article>

            <article>
                <span class="page_slogan">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
        </article>

     </div>
    </div>
    </div>

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/plugins/CSSPlugin.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenLite.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/plugins/ScrollToPlugin.min.js"></script>

Answer 1

Just remove the minus (-) before delta*40

TweenLite.to(content, 0.5, {scrollTo:{x:content.scrollLeft - (delta*40)}})

(function() {
    var content = document.getElementById("content");
    function scrollHorizontally(e) {

        e = window.event || e;
        var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
       // ; // Multiplied by 40
        TweenLite.to(content, 0.5, {scrollTo:{x:content.scrollLeft - (delta*40)}})
        e.preventDefault();
    }
    if (content.addEventListener) {
        // IE9, Chrome, Safari, Opera
        content.addEventListener("mousewheel", scrollHorizontally, false);
        // Firefox
        content.addEventListener("DOMMouseScroll", scrollHorizontally, false);
    } else {
        // IE 6/7/8
        content.attachEvent("onmousewheel", scrollHorizontally);
    }
})();

#content {
   position:fixed;
display: inline-block;
overflow-x: scroll;
width: 100%;
overflow-y: hidden;
top: 0;
right:0;
height: 100%;
}
#content > div{
    overflow: hidden;
    width:250%;/*to increase the width */
}
.horizontal_scroll .full_screen_100
{
    height: 100%;
    background-color: #fff;
    display: flex;
}
.horizontal_scroll .full_screen_100 article{
    width: 900px;
    height: 100%;
    float:left;
    border-left: solid 1px #E2E2E2;

}

<div id="content">
        <div class="horizontal_scroll">
        <div class="full_screen_100">
            <article>
                <span class="page_slogan">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </span>

        </article>

            <article>
                <span class="page_slogan">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>

        </article>

            <article>
                <span class="page_slogan">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
        </article>

            <article>
                <span class="page_slogan">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </span>
        </article>

            <article>
                <span class="page_slogan">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
        </article>

            <article>
                <span class="page_slogan">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
        </article>

     </div>
    </div>
    </div>

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/plugins/CSSPlugin.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenLite.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/plugins/ScrollToPlugin.min.js"></script>