Horizontal scroll and Smoot scrolling with useGSAP

[ragelol]

So hi, im trying to get used to the new hook useGSAP and gsap.context from GSAP, so since i started with useEffect and useLayoutEffect, i allways had the same issue that  the horizontal scrooll section has a conflict whit smootscroll, all other animations are working as spected. So here is my app component: 

import { useGSAP } from '@gsap/react';
import gsap from 'gsap-trial';
import ScrollSmoother from 'gsap-trial/ScrollSmoother';
import ScrollTrigger from 'gsap-trial/ScrollTrigger';
import { useRef } from 'react';
import BrandsSection from './BrandsSection';
import CodeSection from './CodeSection';
import ContactSection from './ContactSection';
import IntroSection from './IntroSection';
import Navbar from './Navbar';
import PresentationSection from './PresentationSection';
import ProjectSection from './ProjectSection';
import SkillSection from './SkillSection';
import { StyleProvider } from './context/NeumorphicStylesContext';
export const PortfolioApp = () => {

  const componente = useRef();
  gsap.registerPlugin(ScrollTrigger, ScrollSmoother);


  useGSAP(() => {
    const ctx2 = gsap.context(() => {
      const smoother = ScrollSmoother.create({
        smooth: 2,
        effects: true,
        normalizeScroll: true,
      });

      ScrollTrigger.create({
        trigger: ".box-c",
        pin: true,
        start: "10% center",
        end: "+=1750",
        markers: true
      });
      ScrollTrigger.create({
        trigger: ".box-b",
        pin: true,
        start: "45% center",
        end: "+=1750",
        markers: true
      });

    }, componente);
    return () => ctx2.revert();

  }, { scope: componente });

  return (
    <StyleProvider>
      <Navbar />
      <div id="smooth-wrapper" ref={componente}>
        <div id="smooth-content" >
          <IntroSection />
          <PresentationSection />
          <ProjectSection />
          <SkillSection />
          <BrandsSection />
          <CodeSection />
          <ContactSection />
        </div>
      </div>
    </StyleProvider>
  );
};

and here is the horizontal section wich fastly goes to other sectios like it doesnt wanted to reproduce the animation, and it works when smootscrolling is not active: 

import { useGSAP } from '@gsap/react';
import gsap from 'gsap-trial';
import { useRef } from 'react';
import { CarrouselProjects } from './CarrouselProjects';
import { DescriptionProject } from './DescriptionProject';
import style from './projects.module.scss';

const ProyectSection = () => {

  const container = useRef();
  useGSAP(() => {
    const slider = document.querySelector(".container")
    const ctx = gsap.context(() => {
      const panels = gsap.utils.toArray(".panel");
      gsap.to(panels, {
        xPercent: -100 * (panels.length - 1),
        ease: "none",
        scrollTrigger: {
          markers: true,
          trigger: ".container",
          pin: true,
          scrub: 1,
          snap: 1 / (panels.length - 1),
          end: () => "+=" + slider.offsetWidth
        }
      });
    }, container);
    return () => ctx.revert();
  }, { scope: container });

  return (
    <div ref={container}>
      <div className="container">
        <div className="description panel">
          <div className={style.Projects_projectsContainer}>
            <CarrouselProjects />
            <DescriptionProject />
          </div>
        </div>
        <div className="panel red">
          <div className={style.Projects_projectsContainer}>
            <CarrouselProjects />
            <DescriptionProject />
          </div>
        </div>
        <div className="panel orange">
          <div className={style.Projects_projectsContainer}>
            <CarrouselProjects />
            <DescriptionProject />
          </div>
        </div>
        <div className="panel purple">
          <div className={style.Projects_projectsContainer}>
            <CarrouselProjects />
            <DescriptionProject />
          </div>
        </div>
      </div>
    </div>


  );
};

export default ProyectSection;

i would really aprecietted your help and i will try to replacate the issue on codesandbox if this information its not enough

[Cassie]

Hi - A working demo is preferable.

 

Just a small note, useGSAP replaces gsap.context - you don't need to add a context inside useGSAP!
 

useGSAP(() => {
  
  const slider = document.querySelector(".container")
  const panels = gsap.utils.toArray(".panel");
  
  gsap.to(panels, {
        xPercent: -100 * (panels.length - 1),
        ease: "none",
        scrollTrigger: {
          markers: true,
          trigger: ".container",
          pin: true,
          scrub: 1,
          snap: 1 / (panels.length - 1),
          end: () => "+=" + slider.offsetWidth
        }
      });
  
  }, { scope: container });

 

First step - are you sure your animation works in vanilla.js? If you are, then put together a react demo on stackblitz for us and we'll take a look

 

https://stackblitz.com/edit/gsap-react-basic-f48716?file=src%2FApp.js