Horizontal scroll messes up other scroll triggers

[stijn-cube]

Hi, I've added GSAP with ScrollTrigger to my website to add an horizontal scroll section and to animate some elements on scroll. Animating the elements with ScrollTrigger works as expected until I you at the horizontal scroll section. GSAP calculates the  actual scrolling position wrong when you start scrolling horizontally. The actual vertical scrolling position needs to be paused once you start scrolling horizontal, and must resume when you are done. What happens now is that GSAP thinks you've scrolled further down, thus activating the other scroll triggers, while we are in fact just scrolling horizontal. 
 

I've created a simple Codepen example that has the same issue. The text items before the horizontal scroll section animate in as expected, but the items after the horizontal scroll section are all already visible once you arrive there.  How do I resolve this? Any help is appreciated! 

See the Pen KKjbbjR by stijn_cube (@stijn_cube) on CodePen

[Rodrigo]

Hi

 

I’m not in front of my computer now but it seems that the issue is that you’re not creating your scrolltrigger instances in the order they appear on the screen as you scroll down.

 

There are 2 options, one create them in the order they appear or two use refreshPriority on your configuration in combination with the sort method 

 

https://gsap.com/docs/v3/Plugins/ScrollTrigger/?page=1#refreshPriority

 

https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.sort()

 

Hopefully this helps 

Happy Tweening!

[stijn-cube]

Hi Rodrigo, 

Thank you for answering! I've tried playing around with the refreshPriority and I call the sort() and refresh() function at the end of my code but still can't get it working. I'm also not really sure how to correctly apply the refreshPriority, as some of the items that need to be animated are before the horizontal scroll, and some are after. 

If you have the time I would greatly appreciate it if you could show me how to implement it properly.  

Here is a new codepen I created with the changes I've made:

See the Pen poXGoEo by stijn_cube (@stijn_cube) on CodePen

[Rodrigo]

Hi,

 

I don't have a lot of time to go through your code and setup (it's Sunday so I hope you understand), but you're not managing the refresh priority correctly. Your demo has two space sections then the horizontal section and finally three space sections. So you have 6 sections, your first spacer should be 6, then 5, then the horizontal section should be 4, and finally the final 3 spacers should be 3-2-1 respectively. Finally run ScrollTrigger sort in order to have ScrollTrigger arrange everything logically. Those refreshPriority values are based on when those sections appear on the screen as you scroll down:

<div class="main-pin-spacer">
  <div class="main">
    <div class="spacing"></div> <!-- Refreshes first 6 -->
    <div class="spacing"></div> <!-- Refreshes second 5 -->
    
    <div class="horizontal-scroll"></div> <!-- Refreshes third 4 -->
    
    <div class="spacing"></div> <!-- Refreshes fourth 3 -->
    <div class="spacing"></div> <!-- Refreshes fifth 2  -->
    <div class="spacing"></div> <!-- Refreshes sixth 1 -->
  </div>
</div>

Hopefully this clear things up.

Happy Tweening!

[stijn-cube]

Hi, I absolutely understand! I created a new Codepen where I set the refresh priority to each component as you suggest. I do this in a very bad way, but it's just for testing purposes. Even with the refresh priority set 'correctly' to each component I can't get it to work properly. I also would like to now how you would set the refresh priority correctly to the components in a real world scenario, and not hardcoded like in my example.

If you have any spare time I would greatly appreciate it if you could fork my first codepen and could get it to work properly. Thanks again for the help!

See the Pen rNEPyrK by stijn_cube (@stijn_cube) on CodePen

[Rodrigo]

I see, the problem is that your elements are all inside the same parent which is being pinned, so either pin the horizontal wrapper instead or use pinnedContainer in the spacer sections ScrollTrigger config objects:

https://gsap.com/docs/v3/Plugins/ScrollTrigger/?page=1#pinnedContainer

 

gsap.utils.toArray(".fade-up").forEach((element, index) => {
  const totalSections = 6;
  let sectionPriority = totalSections - index;
  sectionPriority > 4 ? sectionPriority++ : sectionPriority;
  console.log(index, sectionPriority)

  gsap.fromTo(element, 
    { 
      y: 50, 
      opacity: 0
    },  
    { 
      y: 0, 
      opacity: 1, 
      duration: 1,
      textContent: sectionPriority,
      ease: "power2.out",
      scrollTrigger: {
        trigger: element,
        start: "top 100%",
        pinnedContainer: ".main", // Tell ST that the container is pinned
        toggleActions: "play none none none",
        refreshPriority: sectionPriority,
        markers: { indent: 150 * index + 1 },
        id: index + 1
      }
    }
  );
});

That seems to work the way you intend.

 

Hopefully this helps.

Happy Tweening!

[stijn-cube]

That's it! Thanks for your help. I've created a working version of my original post by adding  pinnedContainer: ".main" to my ScrollTrigger. 

See the Pen poXGZqg by stijn_cube (@stijn_cube) on CodePen