jemma Posted December 18, 2020 Share Posted December 18, 2020 hello guys, i'm facing a problem with my code, trying to use the scrollTrigger function to scroll through brands in section three, but the scroll is flipping the fullpage sections, even though i disabled autoscroll and tried normalScrollElements but with no success please any help ? See the Pen RwGgYQb by jemmawakim (@jemmawakim) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted December 18, 2020 Share Posted December 18, 2020 Hey jemma and welcome to the GreenSock forums. Thanks for putting the project on CodePen. Can you please try to make the demo a minimal one? Often times it's helpful to start from the ground up, only adding the relevant parts to recreate the issue that you're asking about. That will help us figure out what's going on a lot more easily. Link to comment Share on other sites More sharing options...
jemma Posted December 19, 2020 Author Share Posted December 19, 2020 20 hours ago, ZachSaucier said: Hey jemma and welcome to the GreenSock forums. Thanks for putting the project on CodePen. Can you please try to make the demo a minimal one? Often times it's helpful to start from the ground up, only adding the relevant parts to recreate the issue that you're asking about. That will help us figure out what's going on a lot more easily. thank you Zach, i edited the link Link to comment Share on other sites More sharing options...
ZachSaucier Posted December 19, 2020 Share Posted December 19, 2020 Thanks for doing that. A few comments: How are you expecting pinning to work with fullpage? Fullpage switches the content as soon as the user scrolls at all, so I don't think there's enough room for ScrollTrigger to pin anything. Perhaps there's a setting for fullpage that I don't know about that allows this but that's a question for the fullpage support, not the GreenSock one. s is not a valid unit for a ScrollTrigger's start or end properties. It should either be px or % pinSpacing is true by default so you can leave that out if you'd like. ScrollTrigger should be set up once the rest of your page is fully ready. So it likely should be within the document ready function that you have. If you remove the fullpage stuff and enable scrolling, the ScrollTriggers do what you tell it to but the content ends up layered. I think it might help to create the page fully without fullpage, getting ScrollTrigger acting exactly the way you want to, then try getting fullpage to work with. But I'm not sure if they're compatible in the way that you're hoping that they. Again, I'd ask the fullpage support about this sort of situation as it's not really related to GSAP. 1 Link to comment Share on other sites More sharing options...
akapowl Posted December 19, 2020 Share Posted December 19, 2020 43 minutes ago, ZachSaucier said: Perhaps there's a setting for fullpage that I don't know about that allows this but that's a question for the fullpage support, not the GreenSock one. Indeed, fullpage.js has a setting, that allows for 'normal' scrolling inside of sections, but a) it is not native scrolling but it translates the content up and down instead, b) out of my own experience I find it to be very finicky and c) since this is not native scrolling, it could become sort of tricky to integrate ScrollTrigger with it. https://alvarotrigo.com/fullPage/examples/scrolling.html#secondPage 3 Link to comment Share on other sites More sharing options...
ZachSaucier Posted December 19, 2020 Share Posted December 19, 2020 1 minute ago, akapowl said: it is not native scrolling but it translates the content up and down instead In that case you'd have to set things up with .scrollerProxy(). But exactly how to do so is a bit out of scope for what we can do for free in these forums @jemma. If you have a specific question about GSAP please let us know and we'll do our best to help! 3 Link to comment Share on other sites More sharing options...
jemma Posted December 19, 2020 Author Share Posted December 19, 2020 11 hours ago, akapowl said: Indeed, fullpage.js has a setting, that allows for 'normal' scrolling inside of sections, but a) it is not native scrolling but it translates the content up and down instead, b) out of my own experience I find it to be very finicky and c) since this is not native scrolling, it could become sort of tricky to integrate ScrollTrigger with it. https://alvarotrigo.com/fullPage/examples/scrolling.html#secondPage yeah actually scrollTrigger didnt function at all when i used the normalScrolling, I already tried it, thank you @akapowl Link to comment Share on other sites More sharing options...
jemma Posted December 19, 2020 Author Share Posted December 19, 2020 12 hours ago, ZachSaucier said: Thanks for doing that. A few comments: How are you expecting pinning to work with fullpage? Fullpage switches the content as soon as the user scrolls at all, so I don't think there's enough room for ScrollTrigger to pin anything. Perhaps there's a setting for fullpage that I don't know about that allows this but that's a question for the fullpage support, not the GreenSock one. s is not a valid unit for a ScrollTrigger's start or end properties. It should either be px or % pinSpacing is true by default so you can leave that out if you'd like. ScrollTrigger should be set up once the rest of your page is fully ready. So it likely should be within the document ready function that you have. If you remove the fullpage stuff and enable scrolling, the ScrollTriggers do what you tell it to but the content ends up layered. I think it might help to create the page fully without fullpage, getting ScrollTrigger acting exactly the way you want to, then try getting fullpage to work with. But I'm not sure if they're compatible in the way that you're hoping that they. Again, I'd ask the fullpage support about this sort of situation as it's not really related to GSAP. Thank you Zach for your comments, honestly I was frustrated, and I ended messing the code, from all the above, I guess i'm gonna ditch the fullpage library, coz it wont function properly thank you so much for your help.. 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