[Advanced Timelines GSAP]

Hey gang, 
I recently started working with the GSAP library and want to achieve some advanced effects. If you go to this link (https://dusan-portfolio.divhunt.art/#projects) and check the case studies section you will see that I'm trying to combine some horizontal scrolling effect with the background color that changes for each project. I kind of achieved some results but it's far from perfect. 

Hope someone can suggest to me the best way to recreate this, here is my code:

//PROJECTS - scroll animation

 

gsap.to("#project-list", {

    x: "-444%",

    ease: "none",

    scrollTrigger: {

        trigger: ".t-125",

        endTrigger: ".t-173",

        start: "top center",

        end: "center 45%",

        scrub: 1,

        markers: true

    }

});

 

//PROJECTS - Color yellow

gsap.to(".t-117", {

    backgroundColor: "#FBFE67",

    ease: "none",

    scrollTrigger: {

        trigger: ".t-125",

        start: "top center",

        end: "bottom center",

        toggleActions: "play none reverse none",

        scrub: 1,

        markers: true

    }

 

});

 

//PROJECTS - Color Orange

gsap.to(".t-117", {

    backgroundColor: "#FC7753",

    ease: "none",

    scrollTrigger: {

        trigger: ".t-141",

        start: "top center",

        end: "bottom center",

        toggleActions: "play none reverse none",

        scrub: 1,

        markers: true

    }

 

});

 

//PROJECTS - Color Blue

gsap.to(".t-117", {

    backgroundColor: "#3185FC",

    ease: "none",

    scrollTrigger: {

        trigger: ".t-157",

        start: "top center",

        end: "bottom center",

        toggleActions: "play none reverse none",

        scrub: 1,

        markers: true

    }

 

});

 

//PROJECTS - Color Green

gsap.to(".t-117", {

    backgroundColor: "#38FB6F",

    ease: "none",

    scrollTrigger: {

        trigger: ".t-173",

        start: "top bottom",

        end: "bottom center",

        toggleActions: "play none reverse none",

        scrub: 1,

        markers: true

    }

 

});