DonDraper

Adding pinReparent to horizontal scroll script make it works. But there is still a problem with the trigger start point due to smooth scroll. gsap.to(sections, { xPercent: -100 * (sections.length - 1), ease: "none", scrollTrigger: { markers: true, trigger: ".flow-chart-container", pin: true, pinReparent: true, scrub: 1, snap: 1 / (sections.length - 1), end: () => "+=" + document.querySelector(".flow-chart-container").offsetWidth } }); Can you help me?

Hi guys, can you help me with this script? I am using this codepen for horizontal scroll in a certain section: this codepen for horizontal scroll It works fine, however i'm already using this portion of code for smooth-scroll and adding this code breaks it: //CSS #viewport {overflow: hidden; position: fixed; height: 100%; width: 100%; top: 0; left: 0; right: 0; bottom: 0;} #scroll-container { position: absolute; overflow: hidden; width: 100%;} //Smooth Scroll const container = document.querySelector("#scroll-container") let height function setHeight() { height = container.clientHeight document.body.style.height = height + "px" } ScrollTrigger.addEventListener("refreshInit", setHeight) gsap.to(container, { y: () => -(height - document.documentElement.clientHeight), ease: "none", scrollTrigger: { trigger: document.body, start: "top top", end: "bottom bottom", scrub: 0.8, invalidateOnRefresh: true } }); Can you guys help me to fix it? I would need them both to work. Thanks!