Open xdesro opened 3 years ago
Deprioritizing this for now, but not closing. I think most of the jank was fixed by moving to a more performant animator (RAF loop and IntersectionObserver), but converting the SVG to three separate layers and using CSS hardware-accelerated transforms might take it even further.
[RE: #19] This one's gonna be a bit of a challenge:
Scroll event listeners are like fairly expensive, cause they get called literally any time scrolling happens and do some calculation. In this case, it causes a bit of lag and jittering depending on the browser. In my performance audit of the animation, the framerate dipped to ~15fps at the lowest, and an average of 45. There are a few approaches we can take to solve this:
requestAnimationFrame
loop to A. detect if the wheel is on the screen and B. update it without recalculating style.debounce()
-style function to reduce the number of timesscrollRotate()
is called per tick.This is fairly low priority, but fixing it will do a lot towards making the site feel less janky, especially in FF.