Closed kadenzipfel closed 5 years ago
This issue also can't be resolved until https://github.com/nerdwise/nerdwise-website/issues/124 is.
To do this, we want to have two background divs with the block. One for the current color. One for the next color. The second one should be z-indexed above the first. The second one should tween between 0 opacity and 1 opacity The tween should run from when they are about to touch and end when they are touching, so that there is no moment when two different colors touch.
To do this you'll need to use tan() and the TOA formula to get how far along the Y axis the two corners have traveled as a result of the Skew. You'll need to set the start/end distance as a formula that returns that amount plus a portion of the screen height plus a portion of the block height.
The idea is to make the current header change to the color of the next one as the next one is getting closer