Volt 22 Posted August 18, 2022 Share Posted August 18, 2022 Hello everyone, I have some color change animations in a site, a fixed button on the top right changes color as the background color of the body changes. When the background of the body changes to yellow, the fixed button background changes to green. Also, the navbar with the logo disappears on scroll down and reappears on scrollup, and the navbar has a green background, so on scroll up when the body background is yellow, the navbar has the same color with the button. I do not want to play the color change animation for the button on scroll up at all. Thank you. See the Pen poLqYYG by voltmeup (@voltmeup) on CodePen Link to comment Share on other sites More sharing options...
Cassie Posted August 18, 2022 Share Posted August 18, 2022 Hey there! You'll need to have a separate timeline for the button animation - then you can control that in a different way from the panel animations. Then you can use toggleActions to tell the animation not to play on the way back up. See the Pen YzadbxM by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
Cassie Posted August 18, 2022 Share Posted August 18, 2022 Either that or you can change the color of the button in the onEnter callbacks for each section, and not in any callBacks on the way up. That would also be quite tidy, and maybe better for your use case? Link to comment Share on other sites More sharing options...
Volt 22 Posted August 19, 2022 Author Share Posted August 19, 2022 Hello Cassie, Thank you for the swift reply. However, what happens when I scroll down pass the onEnter marker, and not scroll beyond the onLeave marker but then start to scroll upward. The button will already be green, and not revert until I scroll pass the onEnter marker again. 1 Link to comment Share on other sites More sharing options...
Cassie Posted August 19, 2022 Share Posted August 19, 2022 Well that sounds like some conditional logic you would have to work out how to handle. Callbacks are just functions at the end of the day, you can write out whatever you need in them. Toggling a boolean for 'isGreen' could be an option. Why don't you give one of the routes I've suggested a go and pop back with a demo if you get stuck! 1 Link to comment Share on other sites More sharing options...
Volt 22 Posted August 21, 2022 Author Share Posted August 21, 2022 Alright. Thank you @Cassie 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