ScrollTrigger pin Issues on Horizontal Scroll in GSAP 3

[Raydoan]

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 achieve
https://drive.google.com/file/d/1SpJS5NxL0yK2hs1Ou7G3LSQ3gkvdhcWL/view

And What i am facing problem with scrollTrigger when pin:true
https://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

[GreenSock]

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!

[Raydoan]

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 

 

[GreenSock]

I noticed a bunch of problems: 

1. 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. 
2. You were referencing document.clientWidth which isn't a thing (it's undefined, making your "end" value NaN). Did you mean container.clientWidth?
3. 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? 
4. 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!

[Raydoan]

23 hours ago, GreenSock said:

I noticed a bunch of problems: 

1. 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. 
2. You were referencing document.clientWidth which isn't a thing (it's undefined, making your "end" value NaN). Did you mean container.clientWidth?
3. 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? 
4. 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

[GreenSock]

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.