Poor animations performance

[FoLZer]

It's not as noticable on other pages except on the profile page, but they're still affected greately. On a pretty good pc there's around 60% (on 144hz display, meaning 144 frames should be rendered each second) of frames dropped on profile page due to long animation recalculations(time running excedes 7ms and frame gets dropped) Here's a performance summary from chrome devtools(on top green=rendered, red=dropped) And here's a screenshot of a single frame calculations, where functions e,k,next are what's calculating values for animations.

While the recalculation tasks itself run for around 3ms, they're almost always fired at the end of a frame which makes it impossible to render next frame in time. On top of this there's 15ms delay between each tasks at idle which could be used to improve performance.

[benawad]

yeah I'm not sure how to fix it

[FoLZer]

So after digging for a while, it seems like most of the issue is on the library side and most likely it would require rewriting some parts of said library with optimizations for huge svgs in mind(which is not the intended usage for framer-motion).

Although for now it would be a lot better to consider switching animations to web workers so at least they don't impact the performance of the page itself.

With that said, the issue can be closed as it's not really on your side.