Horizontal Scroll with GSAP

horizontal-scroll-script.html

<!-- HORIZONTAL SCROLL -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollTrigger.min.js"></script>

<script type="text/javascript">
if(jQuery('.page-id-735')){
    gsap.registerPlugin(ScrollTrigger);
    var allSections = jQuery('.horizontal-section');
    allSections.wrapAll('<div class="horizontal-container"/>'); 

    const sections = gsap.utils.toArray(".horizontal-section");
    let maxWidth = 0;

    const getMaxWidth = () => {
        maxWidth = 0;
        sections.forEach((section) => {
            maxWidth += section.offsetWidth;
        });
    };
    getMaxWidth();
    ScrollTrigger.addEventListener("refreshInit", getMaxWidth);

    gsap.to(sections, {
        x: () => `-${maxWidth - window.innerWidth}`,
        ease: "none",
        scrollTrigger: {
            trigger: ".horizontal-container",
            pin: true,
            scrub: 1,
            end: () => `+=${maxWidth}`,
            invalidateOnRefresh: true
        }
    });
}
</script>