GSAP ScrollTrigger: Horizontal Scroll Not Working Correctly

Design help Custom code
1

I’m trying to implement GSAP horizontal scroll on my page. It works fine, until I reach sections that scroll vertically due to the amount of text.
When reaching this sections I start scrolling down to read the content but it end up misplacing the horizontal scroll sections. This is the URL for the page: Webflow - Pedro Tasca Design Portfolio

This is one of my portfolio projects, where I’ve been learning webflow. I’m happy to share the code in order to solve this problem.

The GSAP code I’m using is:

<script>
gsap.registerPlugin(ScrollTrigger);

const sections = document.querySelectorAll(".haptic-alarm-content-section");
const totalSections = sections.length;
const wrapper = document.querySelector(".horizontal-scroll-wrapper");

const tl = gsap.timeline({
    scrollTrigger: {
        // Use the wrapper as the trigger element. This will pin it when it hits the top.
        trigger: ".horizontal-scroll-wrapper", 
        start: "top top",
        end: () => `+=${totalSections * 1000}vh`,
        pin: true,
        scrub: 1,
        snap: {
            snapTo: 1 / (totalSections - 1),
            duration: 0.75,
            ease: "power1.in"
        }
    }
});

tl.to(".horizontal-scroll-wrapper", {
    xPercent: -((totalSections - 1) * 100),
    ease: "none",
});



</script>

Here is my site Read-Only: Webflow - Pedro Tasca Design Portfolio

2

The All Posts feed uses its own page template, so you’ll need to clear any section-level background and make sure Page Settings → Background is set to transparent or white. Had to fix this on a client’s blog recently , the site-wide background alone didn’t override the feed page.

3

Hey, thanks for the reply.

My background colour is on body, not on it’s sections.

Am I miss interpreting your answer?