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