CODEWITHSUNDEEP
javascripthtmlcss
foxer
foxer

Reputation: 901

Fixing GPU intensive animating frame

Thanks to @Temani Afif we have this beautiful frame. The code works fine but unfortunately, there is an issue that made the code completely useless.

It cost more than 90 percent of my GPU resources! apparently my laptop getting hot in 10 seconds of running it!

Why this happens and how to fix it?

UPDATE: I think the issue is the code renders the animation even behind the image, if you comment addimage() you can see that.

You can test it yourself: Please Run the code in CodePen

And here is the code: (We add an image to the page using addimage() function, all the rest are CSS and HTML)

addimage(); 
function addimage() {

  let pictureSource = 'https://www.architectureartdesigns.com/wp-content/uploads/2013/03/ArchitectureArtdesigns-8.jpg';

  var node = document.getElementsByClassName('content');
  node[0].style.background = 'url("' + pictureSource + '") center/cover'

}
body {
  height: 100vh;
  margin:0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: black;
}

.box {  
 border-radius: 10px;
  background: 
    repeating-linear-gradient(-45deg, white 0 7.5px, hotpink 0 15px) 
    0 0/21.21px 21.21px;  /* 21.21px = sqrt(2) * 15px */
  animation: animate 1s linear infinite;
}

.box .content {
  width: calc(90vw - 30px);
  height: calc(85vh - 30px);  
  border-radius: 10px;
  box-shadow: 0 0 2px deeppink, 0 0 5px rgba(0, 0, 0, 1), inset 0 0 5px rgba(0, 0, 0, 1);
  margin:15px;
}


@keyframes animate {
  to {
    background-position: 21.21px 21.21px; 
  }
}
<div class="box">
  <div class="content">

  </div>
</div>

Upvotes: 1

Views: 101

Answers (1)

Ravichandran
Ravichandran

Reputation: 1039

I think the background-position for animation is a bit expensive. Check if the below code works fine. I just used the transform property for animation instead of background-position.

addimage(); 
function addimage() {

  let pictureSource = 'https://www.architectureartdesigns.com/wp-content/uploads/2013/03/ArchitectureArtdesigns-8.jpg';

  var node = document.getElementsByClassName('content');
  node[0].style.background = 'url("' + pictureSource + '") center/cover'

}
body {
  height: 100vh;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: gray;
}

.box {
  border-radius: 10px;
  position: relative;
  overflow: hidden;
}
.box::after {
    content: '';
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background:
      repeating-linear-gradient(-45deg, white 0 7.5px, hotpink 0 15px) 0 0/21.21px 21.21px;

    width: calc(100% + 21.21px);
    height: calc(100% + 21.21px);
    transform: translate(-21.21px, -21.21px);
    /* transform: translate(-15px, -15px); */
    /* transform: translate(0, 0); */
    animation: animate 1s linear infinite;


  }
.box .content {
  width: calc(90vw - 30px);
  height: calc(85vh - 30px);
  border-radius: 10px;
  box-shadow: 0 0 2px deeppink, 0 0 5px rgba(0, 0, 0, 1), inset 0 0 5px rgba(0, 0, 0, 1);
  margin: 15px;
}


@keyframes animate {
  to {
    /*     background-position: 21.21px 21.21px;  */
    transform: translate(0, 0);
  }
}
<div class="box">
  <div class="content">

  </div>
</div>

Upvotes: 1

Related Questions