Gsap ScrollTrigger 与 fullpage.js

Question

我在 React fullpage.js 中使用 GSAP ScrollTrigger 时遇到问题。我有几个带有“部分”类的部分。在它们里面有一些不被认为是立即可见的内容。我需要在加载我的网站并初始化 fullpage.js 时，我有机会滚动浏览我的部分并与 ScrollTrigger 一起运行 GSAP 时间线。我不明白为什么 scrollTrigger 在 scrollOverflow = {true} 的部分内不起作用。 在我的想法中，它看起来像这样：站点加载，React 整页初始化，然后是动画滚动部分（如我附加的代码笔中）。 gsap.timeline 结束后，fullpage.js 部分被切换。 如何实施？我寻求帮助。 Codepen 链接：https://codepen.io/desginer123/pen/WNZLpQj 使用 React fullpage.js 链接到当前网站：https://projectxmain48161.gtsb.io/ 反应整页 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 html一样

Answer 1

我不明白为什么 scrollTrigger 在 scrollOverflow = {true} 的部分内不起作用。

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

fullPage.js 第 4 版在这方面的工作方式有所不同，您可能会更容易在其中做您需要的事情。应该会在本月底发布。