fullpage.js 的 Gsap ScrollTrigger

Question

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

I don't understand why scrollTrigger doesn't work inside a section with scrollOverflow = {true}.

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

fullPage.js 版本 4 在这方面的工作方式有所不同，您可能会更容易在那里做您需要的事情。应该会在这个月底出来。

fullpage.js 的 Gsap ScrollTrigger

Gsap ScrollTrigger with fullpage.js

gsap

fullpage.js