Kevin Powell - Community•9mo ago

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•9mo 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•9mo 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•9mo ago

figma can do that i guess. not for sure (not at my desktop rn)

Joao•9mo ago

No worries I'll figure it out Thanks for the help!

MarkBoots•9mo 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•9mo ago

It's worth a try, let's see how it goes

Joao•9mo ago

It needs some tweaking as the background doesn't apply to the blobs themselves but to the content behind it.

Joao•9mo 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•9mo ago

bit hard to tell without the example. but yea. radial-gradient would do it probably too

Joao•9mo 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.

Joao•9mo ago

Without any spinning things are much smoother actually And I think I can live with that instead 😄

Gaming

Programming

Animation causing high CPU