Desginer123 Posted January 14, 2022 Share Posted January 14, 2022 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 Link to comment Share on other sites More sharing options...
OSUblake Posted January 14, 2022 Share Posted January 14, 2022 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. Link to comment Share on other sites More sharing options...
Desginer123 Posted January 14, 2022 Author Share Posted January 14, 2022 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 Link to comment Share on other sites More sharing options...
OSUblake Posted January 14, 2022 Share Posted January 14, 2022 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 })) 1 Link to comment Share on other sites More sharing options...
Desginer123 Posted January 14, 2022 Author Share Posted January 14, 2022 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 }); Link to comment Share on other sites More sharing options...
OSUblake Posted January 14, 2022 Share Posted January 14, 2022 That's really not something ScrollTrigger is designed to handle. You would probably have to do some sort of scroll jacking or prevent scrolling. Link to comment Share on other sites More sharing options...
Solution GreenSock Posted January 15, 2022 Solution Share Posted January 15, 2022 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. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now