Dusan Nedeljkovic

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 } });