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
MarkBoots
MarkBoots•13mo ago
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 already
Joao
JoaoOP•13mo ago
Mmm 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? 😅
MarkBoots
MarkBoots•13mo ago
figma can do that i guess. not for sure (not at my desktop rn)
Joao
JoaoOP•13mo ago
No worries I'll figure it out Thanks for the help!
MarkBoots
MarkBoots•13mo ago
i was thinking, maybe this will work better in css (?).
.blob {
position: fixed;
top: 50%;
left: 50%;
width: 128px;
aspect-ratio: 1/1;
display: grid;
}
.blob > * {
grid-area: 1/1;
}
.blob > .front {
-webkit-backdrop-filter: blur(10px)
backdrop-filter: blur(10px);
scale: 1.5;
}
.blob > .back {
background-color: cyan;
border-radius: 50%;
height: 50%;
align-self: center;
animation: spin 200s infinite;
}
.blob {
position: fixed;
top: 50%;
left: 50%;
width: 128px;
aspect-ratio: 1/1;
display: grid;
}
.blob > * {
grid-area: 1/1;
}
.blob > .front {
-webkit-backdrop-filter: blur(10px)
backdrop-filter: blur(10px);
scale: 1.5;
}
.blob > .back {
background-color: cyan;
border-radius: 50%;
height: 50%;
align-self: center;
animation: spin 200s infinite;
}
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)
Joao
JoaoOP•13mo ago
It's worth a try, let's see how it goes
Joao
JoaoOP•13mo ago
It needs some tweaking as the background doesn't apply to the blobs themselves but to the content behind it.
No description
Joao
JoaoOP•13mo ago
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.
MarkBoots
MarkBoots•13mo ago
bit hard to tell without the example. but yea. radial-gradient would do it probably too
Joao
JoaoOP•13mo ago
Btw was this always available in the dev tools? It tells oyu when some properties are not available on which browsers, I just noticed.
No description
Joao
JoaoOP•13mo ago
Without any spinning things are much smoother actually And I think I can live with that instead 😄
Want results from more Discord servers?
Add your server