Animation causing high CPU
Hi,
I wanted to include some funky looking blobs on the background of a page using blur filter, similar to how a lot of websites are doing it these days. The problem is that after a short while I notice that CPU usage is climbing for some reason.
Here's a pen showing something like what I'm doing at the moment, just a couple of divs with some classes applied to blur it and make it spin: https://codepen.io/D10f/pen/vYbGqbp. I'm using Tailwind for this one, if that makes any difference but I've looked at the output CSS and looks quite straight forward as expected.
I'm really confused as to what's causing this, I suspect the issue may be due to the long animation, or maybe a combination of all opacity and blur, even though I specifically used long animation times to make this spinning effect subtle. Any thoughts? Thanks!
11 Replies
yea, it's the
filter: blur()
that does that. browsers don't like it (lot of calculations).
don't think there is a really nice way to do it with css. you might be better of using a svg that has some blur alreadyMmm yes I think I will go for that instead. I've noticed that most websites do have a simple div with some filter though. But a simple image will do nicely as well, as this is just a subtle cosmetic detail
On that note... do you happen to know how to blur SVGs? 😅
figma can do that i guess. not for sure (not at my desktop rn)
No worries I'll figure it out
Thanks for the help!
i was thinking, maybe this will work better in css (?).
here i lay 2 layers on top of eachother.
the front layer has a backdrop blur
the backlayer is the shape with the rotate animation
like this the animation doesnt have to do the blur maths
(not sure how the browser likes that)
It's worth a try, let's see how it goes
It needs some tweaking as the background doesn't apply to the blobs themselves but to the content behind it.
Mmm you can't see the blur in the screenshot here but it's a big blurry square over the next, not the pill shape
It may work by shifting the CSS a bit but it's probably easier to just go with the pre-made SVG or image anyway so I'll just try that. Or maybe simple gradients will achieve the same effect, for my use case at list.
bit hard to tell without the example. but yea. radial-gradient would do it probably too
Btw was this always available in the dev tools? It tells oyu when some properties are not available on which browsers, I just noticed.
Without any spinning things are much smoother actually
And I think I can live with that instead 😄