ScrollTrigger Vertical scroll front of Horizontal scroll

[Adrien Snoos]

Hello guys,

 

So I tried to put an horizontal scroll in the middle of my page, with React JS, I look at the demos, check the messages, and tried many things between CSS and GSAP, but nothing works. 

Problem is, when I scroll first vertically, all's good, horizontal section comes, and if it's at the end of the page, works great. But when I put another vertical section behind, the vertical section pass through / in front of or behind the horizontal section ( depends on the div position), but it does not blocks the section behind horizontal, I don't get it.

 

So I tried to make you a minimal demo, but on CodePen I did not succeed with all the component in other pages, so I make it in CodeSandbox, for you to have all informations that I put on my code.

 

Thanks to all of you, I'm getting mad

 

https://codesandbox.io/s/compassionate-sinoussi-z842z7?file=/src/App.js

[OSUblake]

Hi Adrien, 

 

I think you're just using the wrong trigger to pin.

 

https://codesandbox.io/s/stoic-kirch-v2z38o?file=/src/components/Gallery.jsx

 

[Adrien Snoos]

Ho my ... 😞🤦‍♂️ Shame on me...

 

And I tried other triggers. Solution is often simpler than I search for. Thank you for your time chef

[Narvick]

On 3/18/2022 at 2:07 PM, OSUblake said:

Hi Adrien, 

 

I think you're just using the wrong trigger to pin.

 

https://codesandbox.io/s/stoic-kirch-v2z38o?file=/src/components/Gallery.jsx

 

Hi, sorry to bother. I'm having the same problem. I already follow this solution however it did not work for me. Would you take a look at project. I created a codesanbox.

 

Thank you for your time.

 

https://codesandbox.io/s/funny-hoover-2fkz44?file=/src/App.js

[Rodrigo]

Hi @Narvick and welcome to the GreenSock forums!

 

You just need to use GSAP Context in order to prevent any issues that stem from the double useEffect calls in React's Strict Mode. This seems to work the way you intend:

useEffect(() => {
  let sections = gsap.utils.toArray(`.${style.page}`);
  const ctx = gsap.context(() => {
    gsap.to(sections, {
      xPercent: -100 * (sections.length - 1),
      ease: "none",
      scrollTrigger: {
        start: "top top",
        end: "+=" + ref.current.offsetWidth,
        trigger: ref.current,
        pin: true,
        invalidateOnRefresh: true,
        scrub: 1,
        markers: true,
      }
    });
  });
  return () => ctx.revert();
}, []);

Also please take a look at this article in order to get a better grasp about using GSAP in a React App:

 

Let us know if you have more questions.

 

Happy Tweening!

[Narvick]

@Rodrigo Thank you so much for your time. I will have a look at the article. Once again thank you and have a great day!