osama00785

Hi there, hope everyone is doing well I've an issue using gsap, scrollTrigger to be more specific for smooth scrolling (horizontal and vertical) currently everything is working well. The only issue i'm having is the lag that can be hardly noticed at the start of the page on desktop, but its really noticed on mobile. Here is the website link: https://beyond-the-veil.vercel.app Here is my code bellow, i've sent my whole code because it is really simple that work for vertical (mobile) and horizontal (desktop) and i'm having a bit of lag on both, thanks in advance for whoever helps. import { useRef, useState, useEffect } from "react"; import gsap from "gsap"; import ScrollTrigger from "gsap/dist/ScrollTrigger"; gsap.registerPlugin(ScrollTrigger); const HorizontalScrollComponent = () => { const component = useRef(); const slider = useRef(null); const [isVerticalScroll, setIsVerticalScroll] = useState(false); useEffect(() => { const handleResize = () => { if (window.innerWidth < 1024) { setIsVerticalScroll(true); } else { setIsVerticalScroll(false); } }; window.addEventListener("resize", handleResize); handleResize(); // Initial check return () => { window.removeEventListener("resize", handleResize); }; }, []); useEffect(() => { // Target the container element to be scrolled const container = slider.current; const panels = gsap.utils.toArray(".panel"); const scrollDirection = isVerticalScroll ? "y" : "x"; const scrollSize = panels.reduce( (acc, panel) => acc + (isVerticalScroll ? panel.offsetHeight : panel.offsetWidth), 0 ); gsap.to(panels, { [scrollDirection]: () => -scrollSize + window[isVerticalScroll ? "innerHeight" : "innerWidth"], ease: "linear", scrollTrigger: { trigger: container, pin: true, scrub: isVerticalScroll ? 2 : 3.5, start: "top top", end: `+=${ scrollSize + window[isVerticalScroll ? "innerHeight" : "innerWidth"] }`, }, }); // Clean up ScrollTrigger when the component unmounts return () => { ScrollTrigger.getAll().forEach((trigger) => trigger.kill(true)); }; }, [isVerticalScroll]); return ( <> <div ref={component}> <div ref={slider} className="app flex flex-col h-[100vh] w-[100vw] lg:flex-row lg:flex-nowrap lg:overflow-hidden" > <div id="header" className="panel w-full lg:h-[100vh] -z-[10] relative" > <LandingPage /> </div> <div id="tracking" className="panel lg:h-[100vh] sbg-red-500 pt-[300px] md:pt-[250px] lg:pt-0" > <Tracking /> </div> <div id="investigating" className="panel lg:h-[100vh] sbg-blue-500 pt-[300px] md:pt-[250px] lg:pt-0" > <Investigating /> </div> <div id="revealing" className="panel lg:h-[100vh] sbg-green-500 pt-[300px] md:pt-[250px] lg:pt-0" > <Revealing /> </div> <div id="unveiling" className="panel lg:h-[100vh] sbg-purple-500 pt-[300px] md:pt-[250px] lg:pt-0" > <Unveiling /> </div> <div id="footer" className="panel lg:h-[100vh] sbg-red-500 pt-[300px] md:pt-[250px] lg:pt-0" > <Footer /> </div> </div> </div> </> ); }; export default HorizontalScrollComponent;