animate the color using data-client-color attribute for a project color that is in view?

[MennoPP]

Hello, I have a small feature I need to get working:

Have viewport high sections with on each a client project.
The idea is to animate the color of a fixed position sidebar to the client project color that is in view.

 

<section id="#workColorChange0" class="h-screen colorChange" data-client-color"#6a6a6a">
	<div class="container flex flex-wrap mx-auto items-center">
		<h3>Section 1 content</h3>
	</div>
</section>
<section id="#workColorChange1" class="h-screen colorChange" data-client-color"#8ebc22">
	<div class="container flex flex-wrap mx-auto items-center">
		<h3>Section 2 content</h3>
	</div>
</section>
<section id="#workColorChange2" class="h-screen colorChange" data-client-color"#0e0b80">
	<div class="container flex flex-wrap mx-auto items-center">
		<h3>Section 3 content</h3>
	</div>
</section>

I have a basic version working, but have 3 tl. now (one for each scrollTrigger and color) and I am sure this can be done better (also losing the id="workColorChange0".

If I set the color in a data-client-color attribute, could I somehow grab that value as a backgroundColor?
Maybe use onToggle?

 

My Javascript:
 

var colours = ['#006eab', '#8ebc22', '#0e0b80'];

var colorEffect = function(){

    gsap.set(".colorChange", {
        backgroundColor: "#006eab",
    });

    const tl0 = gsap.timeline();
    tl.to(".colorChange", {
        scrollTrigger: {
            trigger: "#workColorChange0",
            start: "top center",
            scrub: true,
        },
        backgroundColor: "#006eab",
        ease: "none",
    });
    tl.to(".colorChange", {
        scrollTrigger: {
            trigger: "#workColorChange1",
            start: "top center",
            scrub: true,
        },
        backgroundColor: "#8ebc22",
        ease: "none",
    });
    tl.to(".colorChange", {
        scrollTrigger: {
            trigger: "#workColorChange2",
            start: "top center",
            scrub: true,
        },
        backgroundColor: "#0e0b80",
        ease: "none",
    }); 

};

 

[ZachSaucier]

Hey MennoPP and welcome to the GreenSock forums. 

 

I think these threads can help you:

 

Additionally you're making one of the most common ScrollTrigger mistakes: applying ScrollTriggers to tweens inside of a timeline. That doesn't make much sense. I recommend reading the full article to understand why.

 

Happy tweening!

[MennoPP]

This Forum is amazing!

Have it working, many thanks.

 

var colorEffect = function(){
    gsap.utils.toArray(".colorChange").forEach(function(elem) {
        var color = elem.getAttribute('data-color');
        ScrollTrigger.create({
            trigger: elem,
            start:'top 50%',
            end:'bottom 50%',
            onEnter: () => gsap.to('.bgChange', {backgroundColor: color}), 
            onLeave: () => gsap.to('.bgChange', {backgroundColor: 'white'}), 
            onLeaveBack: () => gsap.to('.bgChange', {backgroundColor: 'white'}), 
            onEnterBack: () => gsap.to('.bgChange', {backgroundColor:color})
        });
    });
};