On scroll animation using GSAP

问题:

I am using GSAP for animation, I need on scroll animation when the user scrolls the mouse wheel. Now animation is working on page load. I need content should animate on the scroll. First two articles are working but when I scroll it than animation is not working.

(function() {
  var content = document.getElementById("content");
  var xScroll = 0;  // initialize
    function scrollHorizontally(e) {
        xScroll = xScroll+e.deltaY*20;
        // set limits to avoid overshooting and stucking at beginning or end
         var max = document.getElementById("content").innerWidth;
          if (xScroll <= 0) {
              xScroll = 0;
          } else if (xScroll >= max) {
              xScroll = max; //replace with the width of the scrollable container
          }
        // scroll smooth to xScroll
        TweenLite.to(content, 1, { ease: Power1.easeOut, scrollTo:{x:xScroll} });
        var rt = ($(window).width() - ($(".active_05").offset().left ));
        if(rt>200)
        {
          $(".about_menu").addClass("active");
        }
        else
        {
                    
        $(".about_menu").removeClass("active");
        }
        e.preventDefault();
    }
   if (content.addEventListener) {
        // Standard
        content.addEventListener("wheel", scrollHorizontally, false);
    } else {
        // IE 6/7/8
        content.attachEvent("onmousewheel", scrollHorizontally);
    }


      var article_1=document.getElementById("article_1");
    TweenLite.from(article_1, .5, { ease: Power0.easeOut, y: 10 });


    var article_2=document.getElementById("article_2");
    TweenLite.from(article_2, .5, { ease: Power0.easeOut, y: 10 });
     var article_3=document.getElementById("article_3");
    TweenLite.from(article_3, .5, { ease: Power0.easeOut, y: 15 });

      var article_3=document.getElementById("article_4");
    TweenLite.from(article_3, .5, { ease: Power0.easeOut, y: 15 });

      var article_3=document.getElementById("article_5");
    TweenLite.from(article_3, .5, { ease: Power0.easeOut, y: 15 });


})();

#content {
   position:fixed;
display: inline-block;
overflow-x: scroll;
width: 100%;
overflow-y: hidden;
top: 0;
right:0;
height: 100%;
}
#content #horizontal_scroll{
    overflow: hidden;
    width:400%;/*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;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/plugins/CSSPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/plugins/ScrollToPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenLite.min.js"></script>
<div id="content">
<div id="horizontal_scroll" id="scroll_container">
<div class="full_screen_100">
    <article>
    <p id="article_1">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. </p>

</article>
<article>
    <p id="article_2">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</p>
    <p id="article_3">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.</p>
</article>
<article>
    <p id="article_4">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</p>
    <p id="article_5">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.</p>
</article>
</div>
</div>
</div>    

回答1:

use GSAP with scrollmagic.Check this examples Gsap with scroll animation