Jump to content
GreenSock

MindGamer

Dark Mode: Tweening colors in Chrome scrollbars

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I just wrote a simple "dark mode" switch for an SPA I'm building and I use GSAP to tween/toggle the application colors from light to dark colors, and back.

 

It's working fine, but I'm having trouble tweening the colors of the scrollbars on the page.  I have two divs with overflow-y: scroll; and the initial scrollbar styling is handled in the CSS with the ::-webkit-scrollbar-track pseudo-selector.   Unfortunately the scrollbars remain a bright white color after everything else goes "dark" and it ruins the whole effect. 

 

I've tried

 

TweenMax.to('::-webkit-scrollbar-track',1,{backgroundColor: "#000000"});

 

But that doesn't seem to work.

 

And I've tried 

 

TweenMax.to('body',1,{scrollbarTrackColor: "#000000"});

 

...and no dice. 

 

Is there any way to use GSAP to tween the scrollbar colors along with the rest of the page elements I'm adjusting?

 

 

Link to comment
Share on other sites

Unfortunately, [as far as I know] pseudo elements aren't accessible in the DOM, so GSAP can't get to them. The browser literally doesn't offer any hooks. The only way around this that I've seen is to use something like CSSRulePlugin to animate the CSS rules themselves. See https://greensock.com/docs/Plugins/CSSRulePlugin

 

Another option is to use CSS variables which GSAP can handle as well. See https://greensock.com/css-variables

  • Like 3
Link to comment
Share on other sites

Awesome!  That worked!

 

I set ::-webkit-scrollbar-track using a CSS variable, and then tweened the variable with GSAP per your Codepen above. 

 

'Works perfectly. Scrollbars now looking very sexy in dark mode  : )

 

Thanks!

 

 

  • Like 3
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.
×