Advanced Timelines GSAP

[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

    }

 

});

[Rodrigo]

Hi @Dusan Nedeljkovic and welcome to the GreenSock forums!

 

It's really hard for us to troubleshoot an issue without a minimal demo. The only thing I can think is that the start and end points of each animation are not matching. One thing you can do for better debugging is to pass some different config to each ScrollTrigger's markers (like different indent values) and different ids.

 

Here are a couple of examples background color change with ScrollTrigger:

See the Pen RwRebNY by cameronknight (@cameronknight) on CodePen

 

See the Pen XWYeagd by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!