horizontal scrolling section starts scrolling vertically as well when a vertical scrolling section is added below.

[Rhaber21]

So  I have made a horizontal scroll component which works fine on it's own or when the component rendered below it doesn't have a scrolltrigger (for vertical scroll) but as soon as I add a scrolling component the horizontal scroll section scrolls horizontally while moving vertically.  This https://stackblitz.com/edit/stackblitz-starters-a8fbo7?file=src%2FApp.js is the code that i have used for the horizontal scrolling. Can anyone help me to fix that component in its place while scrolling horizontally and then scroll on vertically to the next section.Also attaching a video of the behaviour.

 

[GSAP Helper]

Your demo doesn't illustrate the issue, right? It seems to be working as expected. If you're having trouble, please make a very clear minimal demo that illustrates the problem and we'd be happy to take a look. 

 

Here are some tips that will increase your chances of getting a relevant answer:

• A clear description of the expected result - "I am expecting the purple div to spin 360degrees"
• A clear description of the issue -  "the purple div only spins 90deg"
• A list of steps for someone else to recreate the issue - "Open the demo on mobile in IOS safari and scroll down to the grey container" 

[Rhaber21]

If u go through the link again, You'll find the issue has been recreated. Thank You for getting back in no time.

[Rhaber21]

7 hours ago, GSAP Helper said:

Your demo doesn't illustrate the issue, right? It seems to be working as expected. If you're having trouble, please make a very clear minimal demo that illustrates the problem and we'd be happy to take a look. 

 

Here are some tips that will increase your chances of getting a relevant answer:

• A clear description of the expected result - "I am expecting the purple div to spin 360degrees"
• A clear description of the issue -  "the purple div only spins 90deg"
• A list of steps for someone else to recreate the issue - "Open the demo on mobile in IOS safari and scroll down to the grey container" 

If u go through the link again, You'll find the issue has been recreated. Thank You for getting back in no time.

[Rodrigo]

Hi,

 

The issue is that you're pinning an element that is not the outmost element in the DOM, you have to pin the <div> tag that wraps everything in your component:

<div>
  <section className="scroll-section-outer">
    <div ref={triggerRef}> <!-- YOU'RE PINNING THIS -->
    </div>
  </section>
</div>

If you pin the outmost element in the HTML there it works as expected:

https://stackblitz.com/edit/stackblitz-starters-hyyftg?file=src%2FApp.js

 

Hopefully this helps.

Happy Tweening!