Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
GeorgeErshov

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

Go to solution Solved by Cassie,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

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!

  • Like 3
Link to comment
Share on other sites

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) 

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×