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