GSAP를 사용하는 스크롤 애니메이션에서

Question

애니메이션에 GSAP을 사용하고 있습니다. 사용자가 마우스 휠을 스크롤하면 스크롤 애니메이션이 필요합니다. 이제 애니메이션이 페이지로드 작업 중입니다. 스크롤해야하는 내용이 애니메이션으로 표시되어야합니다. 처음 두 기사는 작동하지만 애니메이션을 움직이는 것보다 스크롤 할 때 유용합니다. scrollmagic.Check와

(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>

Answer 1

사용 GSAP이 예 Gsap with scroll animation