After launching the homepage, surprisingly, one of the most mentioned parts was the “DT” logo changing colors between sections. For the record, this is one of my favorite parts, too, but I was thrilled to see how many people noticed it. After bringing back the logo from the previous design, I felt the need to pin it to the top as a steady anchor as you scroll. This worked out well until I scrolled into sections with a different color scheme than the default.

On the previous design, I did change the logo (and overscroll) color based on the content of the page, but never between sections on a page. I decided to use --accentColor and --knockoutColor CSS variables that I could set on the document element, then implement wherever I wanted them to change, like in the logo SVG as well as the html background for when you scroll past the edge of the page. Adding a simple color transition made any context change subtle enough to feel right and almost unnoticeable until a couple sections down.

As for triggering the color change, I created a Section wrapper component that listens to the scroll. When the given section scrolls halfway past the height of the logo, the section dispatch its color scheme, and the header listens for it. Once I started working on the Carousel animation for the Dropbox section, however, I realized that something was disrupting performance. I enabled paint flashing in the Chrome dev tools, and quickly discovered that changing the html background color—especially transitioning it—probably wasn’t the smartest idea in terms of performance.

Since you can’t see the overscroll area when scrolling through the page, and both the intro and outro sections follow the same default color scheme, it seemed safe to not change the overscroll color at all. This immediately made a noticeable difference for performance, but will remain a to-do on my list when I end up changing the color scheme per page, like in the previous design.