Mlbb lan Posted November 30, 2021 Share Posted November 30, 2021 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 More sharing options...
Solution Cassie Posted November 30, 2021 Solution Share Posted November 30, 2021 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! ✨ 3 Link to comment Share on other sites More sharing options...
Mlbb lan Posted November 30, 2021 Author Share Posted November 30, 2021 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) 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now