Problem with scrollTrigger

[Desginer123]

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

See the Pen WNZLpQj by desginer123 (@desginer123) on CodePen

[OSUblake]

Welcome to the forums @Desginer123

 

ScrollTrigger was not designed to work with fullpage.js and we really don't offer support for the 3rd party libraries on this forum. My guess is that you are going to have a really hard time getting the two to play together nicely as they work in completely different ways. fullpage.js translates pages while ScrollTrigger bases everything on scroll position.

 

Since fullpage.js translates your content, that is probably going to mess up ScrollTrigger's start and end calculations. My advice would be to try and create your own version of fullpage using ScrollTrigger.

 

[Desginer123]

3 hours ago, OSUblake said:

Welcome to the forums @Desginer123

 

ScrollTrigger was not designed to work with fullpage.js and we really don't offer support for the 3rd party libraries on this forum. My guess is that you are going to have a really hard time getting the two to play together nicely as they work in completely different ways. fullpage.js translates pages while ScrollTrigger bases everything on scroll position.

 

Since fullpage.js translates your content, that is probably going to mess up ScrollTrigger's start and end calculations. My advice would be to try and create your own version of fullpage using ScrollTrigger.

 

Hello. Thanks for the reply.
In that case, yes. I need to do everything with scrollTrigger.
Could you answer a few questions for me?
1) Suppose I have a timeline where several animations go sequentially and are dependent on scrolling.
For example:
tl.from To('.about-descr-2', {y: 80}, {y: -540})
tl.from To('.about-descr-2', {y: -540}, {y: -620, opacity: 0,})
How can I "between them" insert a regular gsap.to () which will execute quickly and then continue the timeline?
2) How to make it work in 2 ways? In the direction of the scroll both up and down

[OSUblake]

I'm not exactly sure what you mean. Is this animation supposed to be part of the time and scrubbed, or separate? If it's part of the timeline, you can use the position parameter. If the animation is separate from the timeline, you could add a callback to trigger the animation kind of like this.

 

tl.add(() => gsap.to(".foo", { x: 100 }))

 

[Desginer123]

4 hours ago, OSUblake said:

I'm not exactly sure what you mean. Is this animation supposed to be part of the time and scrubbed, or separate? If it's part of the timeline, you can use the position parameter. If the animation is separate from the timeline, you could add a callback to trigger the animation kind of like this.

 

tl.add(() => gsap.to(".foo", { x: 100 }))

 

For example, I have a timeline that is triggered simultaneously with mouse scrolling. I would like an animation independent of the user's scrolling to be triggered between the first and second fromTo paire  , and after its end, the timeline is again controlled by the user's scroll

tl.fromTo('.mission-descr-1', {y: 500}, {y: 0})
        tl.fromTo('.mission-descr-1', {y: 0}, {y: -100, opacity: 0})
        tl.fromTo('.mission-descr-2', {y: 80}, {y: -470})
        tl.fromTo('.mission-descr-2', {y: -470}, {y: -520, opacity: 0})

            ScrollTrigger.create({
              animation: tl,
              trigger: '.scene',
              start: 'top top',
              end: 'bottom',
              scrub: true,
              markers: true,
              pin: true
        });

 

[OSUblake]

That's really not something ScrollTrigger is designed to handle. You would probably have to do some sort of scroll jacking or prevent scrolling.

 

 

[GreenSock]

I suppose you could set overflow to hidden to make scrolling impossible at that point, but honestly that makes me cringe. As a user, I would hate that. That's just my personal opinion, though, which I realize is irrelevant here.