gsapfullpage.js

Gsap ScrollTrigger with fullpage.js


I have a problem using GSAP ScrollTrigger inside React fullpage.js . I have several sections with the "section" class. Inside them there is content that is not thought of as immediately visible. I need that when loading my site and initializing fullpage.js I had the opportunity to scroll through my section and run GSAP timeline together with ScrollTrigger. I don't understand why scrollTrigger doesn't work inside a section with scrollOverflow = {true}. In my idea, it looks like this: the site loads, React fullpage initialization, then the section with animation scrolls (as in the codepen I attached). After gsap.timeline ends, fullpage.js sections are switched . How to implement this? I ask for help. Link to codepen: https://codepen.io/desginer123/pen/WNZLpQj Link to the current website with React fullpage.js: https://projectxmain48161.gtsb.io/ React fullpage settings.js: <ReactFullpage

//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: the same as codepen html


Solution

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

    Because sections using scrollOverflow are not using the browser scroll behaviour but a JavaScript simulated one.

    fullPage.js version 4 will work differently in this regard and you'll probably have it easier in there to do what you need. It should come out by the end of this month.