RENCI/renci-dot-org

Reduce dynamic CSS-in-JS for parallax hero

Closed this issue · 0 comments

The hero image parallax effect is causing a new style tag to be added for each minute change in pageX value or whatever. It's worth noting that on the production site it seems like there is a cap or some other logic limiting the number of tags created by that dynamic css, this also has the effect of the parallax looking choppier.

Regardless, I think we can make this much better, either using 3d transformations with no javascript or just changing the 2d translation in the style attribute so a new emotion class doesn't have to keep being added.

output.mp4