smooth change background color (for each section using data-color)

[Mlbb lan]

hi all

I'm trying to figure out how do I make the background color change seamless?
I added duration: 5 to my code, but it didn't work
I want to use my code to achieve a smoothness like in this example

See the Pen 01371330dbdec800579a15bebd463bef by akapowl (@akapowl) on CodePen

 

in my example the transition works fine, but it is too abrupt, too fast

 

See the Pen GRMRxzw by GeorgeDesign2020 (@GeorgeDesign2020) on CodePen

[Cassie]

Hey there George!

 

You're calling tweens in the callbacks, so popping a duration on the scrollTrigger itself won't affect anything.

If you want the transition to last a longer amount of time you'll need to add a duration to the tweens themselves.

 

ScrollTrigger.create({
        trigger: elem,
        start: 'top 30%',
        end: 'bottom 30%',
        markers: true,
        // this won't do anything
        duration: 5,
        onEnter: () => gsap.to('main', {
            backgroundColor: color,
            // this will slow down the transition
            duration: 2
        }),
    });

 

Happy tweening! ✨

[Mlbb lan]

21 minutes ago, Cassie said:

Hey there George!

 

You're calling tweens in the callbacks, so popping a duration on the scrollTrigger itself won't affect anything.

If you want the transition to last a longer amount of time you'll need to add a duration to the tweens themselves.

 

ScrollTrigger.create({
        trigger: elem,
        start: 'top 30%',
        end: 'bottom 30%',
        markers: true,
        // this won't do anything
        duration: 5,
        onEnter: () => gsap.to('main', {
            backgroundColor: color,
            // this will slow down the transition
            duration: 2
        }),
    });

 

Happy tweening! ✨

Yes!
Thank you, I should have known)