Raydoan Posted August 22, 2020 Share Posted August 22, 2020 There is a problem with gsap ScrollTrigger issues when try to achive horizontal scroll effect on those section and then end of ehis section going to next section. But the problem is when i added pin:true the specific section it's scroll but not pinned on that moment also the next section is moving up before finish the horizontal scroll finished.what i want to achievehttps://drive.google.com/file/d/1SpJS5NxL0yK2hs1Ou7G3LSQ3gkvdhcWL/viewAnd What i am facing problem with scrollTrigger when pin:truehttps://drive.google.com/file/d/1rHEMFfC8JB6GGOEH6MAa8t2jsvdBSXi4/view Here Is my code for Horizontal Scroll with ScrollTrigger let container: any = document.documentElement.querySelector( '.brand-showcase' ); let tl = gsap .timeline({ scrollTrigger: { pin: true, scrub: 1, trigger: container, end: container.scrollWidth - document.documentElement.clientWidth, }, defaults: { ease: 'none', duration: 1 }, }) .to( '.panel-section', { x: -(container.scrollWidth - document.documentElement.clientWidth), }, 0 ) .to( '.panel-item', { opacity: 1, scale: 1, duration: 0.6, stagger: { amount: 0.8, }, }, 0 ); Here Is The HTML Structure for every scroll-item <div class = 'brand-showcase'> <div class="brand-strategy-showcase-container"> <div class="panel-section"> <div class="panel-item"> <div class="showcase-content"> <div class="bss-title">Brand Research & Strategy 1</div> <div class="bss-content"> Spending quality time with our clients in order to uncover what your brand really stands for is by far the most important step. After taking an objective look at your industry and key audiences, we will articulate your purpose, proposition, and personality. From there, we will be able to create experiences that will connect your brand with your customers. </div> <ul class="bss-list"> <li>Market & Landscape Research</li> <li>Market & Landscape Research</li> <li>Market & Landscape Research</li> <li>Market & Landscape Research</li> </ul> <a href="#" class="btn co-btn"> view Project <div class="icon"> <img src="@/assets/img/next_icon.svg" alt="next" /> </div> </a> </div> <div class="showcase-sticky-img"> <img class="item-img" src="@/assets/img/brand-showcase-sticky-img.jpg" alt="Brand Image" /> </div> </div> </div> </div> </div> Hope you understand my issues. Looking for the help from the team gsap or any other coder with gsap master. Thanks in advance Link to comment Share on other sites More sharing options...
GreenSock Posted August 22, 2020 Share Posted August 22, 2020 Hey @Raydoan. We'd love to help, but it's super difficult to troubleshoot blind, or just with a few snippets because we can't see the problem in context. To me it looks like the issue stems from how you've set up your CSS/structure, but I'm not sure because I can't see any of that. By default, ScrollTrigger will add padding to the bottom of your pinned element to attempt to push other things below it further down (to avoid the very issue you're facing), but if you've got things set to position: absolute, for example, the padding won't push those things down. Or if they're in a totally different container. If you still need some help, I'd strongly recommend creating a minimal demo so we can see what's going on. Please don't just send us your whole project - it's far more productive to just recreate a very simple example as a reduced test case, perhaps in Codepen.io or something like that, even if it just has a couple of plain <div> elements. See https://greensock.com/demo to learn how to do that. Good luck with the project! 1 Link to comment Share on other sites More sharing options...
Raydoan Posted August 23, 2020 Author Share Posted August 23, 2020 17 hours ago, GreenSock said: Hey @Raydoan. We'd love to help, but it's super difficult to troubleshoot blind, or just with a few snippets because we can't see the problem in context. To me it looks like the issue stems from how you've set up your CSS/structure, but I'm not sure because I can't see any of that. By default, ScrollTrigger will add padding to the bottom of your pinned element to attempt to push other things below it further down (to avoid the very issue you're facing), but if you've got things set to position: absolute, for example, the padding won't push those things down. Or if they're in a totally different container. If you still need some help, I'd strongly recommend creating a minimal demo so we can see what's going on. Please don't just send us your whole project - it's far more productive to just recreate a very simple example as a reduced test case, perhaps in Codepen.io or something like that, even if it just has a couple of plain <div> elements. See https://greensock.com/demo to learn how to do that. Good luck with the project! This is the See the Pen GRZrWdY by rabbi598 (@rabbi598) on CodePen i created. I don't why it's not working. you can see my all my code for scrollTrigger here. looking for solution. Thanks Link to comment Share on other sites More sharing options...
GreenSock Posted August 24, 2020 Share Posted August 24, 2020 I noticed a bunch of problems: You're loading the wrong ScrollTrigger file. That one you loaded is from a completely different author (not GreenSock). Please use the one that's inside the official gsap package. You were referencing document.clientWidth which isn't a thing (it's undefined, making your "end" value NaN). Did you mean container.clientWidth? You were hard-coding container.scrollWidth - container.clientWidth for x and for the end value, but I assume you meant to make those function-based values so that they're dynamic and get repopulated when the screen resizes? There seems to be problems with your HTML/CSS, like misspelled class names ("project-cotent" instead of "project-content" for example). The bottom seemed like a very strange layout too. So a lot of this seems totally unrelated to GSAP/ScrollTrigger. I corrected some of the things mentioned above in this fork (below), but I don't have time to analyze all the HTML/CSS issues and I'm not 100% sure what you want it all to look/work like, but hopefully this at least gets you going in the right direction. See the Pen 6cbc49e65fc93f44ebc0feac3960930f?editors=0010 by GreenSock (@GreenSock) on CodePen Enjoy! 3 Link to comment Share on other sites More sharing options...
Raydoan Posted August 25, 2020 Author Share Posted August 25, 2020 23 hours ago, GreenSock said: I noticed a bunch of problems: You're loading the wrong ScrollTrigger file. That one you loaded is from a completely different author (not GreenSock). Please use the one that's inside the official gsap package. You were referencing document.clientWidth which isn't a thing (it's undefined, making your "end" value NaN). Did you mean container.clientWidth? You were hard-coding container.scrollWidth - container.clientWidth for x and for the end value, but I assume you meant to make those function-based values so that they're dynamic and get repopulated when the screen resizes? There seems to be problems with your HTML/CSS, like misspelled class names ("project-cotent" instead of "project-content" for example). The bottom seemed like a very strange layout too. So a lot of this seems totally unrelated to GSAP/ScrollTrigger. I corrected some of the things mentioned above in this fork (below), but I don't have time to analyze all the HTML/CSS issues and I'm not 100% sure what you want it all to look/work like, but hopefully this at least gets you going in the right direction. Enjoy! Apologies for import the wrong ScrollTrigger import. rather than i include same thing that you have done this pen. but still the have the same issues. for this i imported right scrollTrigger plugin in my project and the horizontal scroll is working. but the problem when the pinned section is trigger that section goes position:fixed and the next section is comming like thisURL as i mentioned before.there is no css issues. i checked properly. this pen same css has in my code. Still not getting the right solution. little bit worried about it Link to comment Share on other sites More sharing options...
GreenSock Posted August 26, 2020 Share Posted August 26, 2020 By default, ScrollTrigger doesn't add pinSpacing to elements whose parent is display: flex. Try setting pinSpacing: true. If you still need help, please provide a minimal test case that only has basic <div> elements. I'm just not sure what you're trying to do with your CSS layout and there's a lot of markup and CSS rules in there that I suspect are clouding things up. The best chance you have at solving the issue is breaking things down to the absolute minimum and starting to build up from there. 3 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