Gsap ScrollTrigger与fullpage.js

Question

我在使用GSAP ScrollTrigger I fullpage.js时遇到了问题。我有几节与“节”类。在它们的内部，有一些内容被认为是不可见的。我需要在加载我的站点和初始化fullpage.js时，我有机会滚动我的部分，并与ScrollTrigger一起运行GSAP时间线。我不明白为什么scrollTrigger在scrollOverflow = {true}的部分中不能工作。在我的想法中，它看起来是这样的:站点加载，响应整个页面初始化，然后使用动画滚动部分(如我所附的代码页中所示)。在gsap.timeline结束后，fullpage.js部分被切换。如何实现这一点？我寻求帮助。链接到codepen：https://codepen.io/desginer123/pen/WNZLpQj链接到当前网站的React fullpage.js：https://projectxmain48161.gtsb.io/ React全文页面settings.js：

//fullpage options
licenseKey = {'There is my license key'}
scrollingSpeed = {1000} 
fixedElements = {'.grow, .logo, .pagination-wrapper, .cursor2'}
menu = {'.pagination-wrapper'}
anchors = {['about', 'mission']}
scrollOverflow = {true}

onLeave =  {function(origin, destination, direction){

             var loadedSection = this;

             changePagination(destination.index + 1)
             //using anchorLink

             if(destination.index == 1){

               gsap.to('.about-1', {opacity: 0, duration: 1.2})
               gsap.to('.mission', {opacity: 1, duration: 1.2})
               gsap.to('.mission-title', {opacity: 1, duration: 1.2})

             }
             if(destination.index == 0){

               gsap.to('.about-1', {opacity: 1, duration: 1.2})
               gsap.to('.mission', {opacity: 0, duration: 1.2})

             }
           }}
render={({ state, fullpageApi }) => {

  return (
    <main className='pageStyles'>
      <Cursor/>
      <Btn/>
      <Pagination/>

      <ReactFullpage.Wrapper>
        <FirstScreen changePagination={changePagination}/>

      </ReactFullpage.Wrapper>
    </main>
  );
}}

/> )；JSX:与codepen相同。

Answer 1

--我不明白为什么scrollTrigger在scrollOverflow = {true}的部分中不能工作。

因为使用scrollOverflow的部分不是使用浏览器滚动行为，而是使用模拟浏览器滚动行为的JavaScript。

在这方面，fullPage.js版本4将以不同的方式工作，您可能会更容易地满足您的需要。它应该会在本月底前发布。