How to animate linear-gradient without using background-position?

Question

I'm trying to create content loader but got a performance problem with background animation. It's smooth when there are only a few elements on the screen but dramatically drops fps while increasing stub elements count to 20-30. Now I know that animating background-position property is a bad idea and it is better to use transforms for this. but how can I do this? I'd like to keep seamless animation. Gradient should be relative to screen, not to container.

Here is some code:

const cardsRoot = document.getElementById('cards')
const addButton = document.getElementById('add')
const card = document.getElementsByClassName('card')[0]
let cardsCount = 1

addButton.addEventListener('click', () => {
  cardsRoot.innerHTML = ''
  cardsCount++
  for (let i = 0; i < cardsCount; i++) {
    let cardClone = card.cloneNode(true)
    cardsRoot.appendChild(cardClone)
  }
})

body {
  padding: 40px;
}

.card {
  display: flex;
  margin-top: 20px;
}

.stub {
  width: 300px;
  height: 12px;
  margin: 8px;
  border-radius: 8px;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.1) 10%, rgba(0, 0, 0, 0.04) 20%) fixed;
  animation: stub 1.3s linear infinite;
  margin-bottom: 8px;
}

.circle {
  width: 40px;
  height: 40px;
  margin-right: 12px;
  border-radius: 20px;
}

@keyframes stub {
  0% { background-position: 0vw; }
  100% { background-position: 100vw; }
}

<button id="add">
  ADD CARD
</button>

<div id="cards">
  <div class="card">
    <div>
      <div class="stub circle"></div>
    </div>
    <div>
      <div class="stub"></div>
      <div class="stub"></div>
      <div class="stub"></div>
    </div> 
  </div>
</div>

And demo: https://jsfiddle.net/3da4uzm2/57/

Temani Afif · Accepted Answer · 2021-01-16T20:16:11.427

You can replace the animation using pseudo element where you apply translation. The trick is to consider fixed element to replace background-attachment:fixed, then you make the element twice bigger as the screen and you translate it from left to right.

const cardsRoot = document.getElementById('cards')
const addButton = document.getElementById('add')
const card = document.getElementsByClassName('card')[0]
let cardsCount = 1

addButton.addEventListener('click', () => {
  cardsRoot.innerHTML = ''
  cardsCount++
  for (let i = 0; i < cardsCount; i++) {
    let cardClone = card.cloneNode(true)
    cardsRoot.appendChild(cardClone)
  }
})

body {
  padding: 40px;
}

.card {
  display: inline-flex;
  margin-top: 20px;
}

.stub {
  width: 150px;
  height: 12px;
  margin: 8px;
  border-radius: 8px;
  margin-bottom: 8px;
  position:relative;
  z-index:0;
  /*overflow:hidden; this is no more working, using mask instead */
  -webkit-mask:linear-gradient(#fff 0 0);
  /* OR clip-path:inset(0) */
}
.stub:before {
  content:"";
  position:fixed;
  z-index:-1;
  top:0;
  right:0;
  width:200vw;
  bottom:0;
  background: 
    linear-gradient(rgba(0, 0, 0, 0.04),rgba(0, 0, 0, 0.04)) left/50% 100%,
    linear-gradient(to right, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.1) 10%, rgba(0, 0, 0, 0.04) 20%) right/50% 100%;
  background-repeat:no-repeat;
  animation: stub 1.3s linear infinite;
  pointer-events:none;
}

.circle {
  width: 40px;
  height: 40px;
  margin-right: 12px;
  border-radius: 20px;
}

@keyframes stub {
  0% { transform:translate(0); }
  100% { transform:translate(50%); }
}

<button id="add">
  ADD CARD
</button>

<div id="cards">
  <div class="card">
    <div>
      <div class="stub circle"></div>
    </div>
    <div>
      <div class="stub"></div>
      <div class="stub"></div>
      <div class="stub"></div>
    </div> 
  </div>
  <div class="card">
    <div>
      <div class="stub circle"></div>
    </div>
    <div>
      <div class="stub"></div>
      <div class="stub"></div>
      <div class="stub"></div>
    </div> 
  </div>
</div>

To better understand what is happening here is a simplified version with only one element where I also changed the gradient colors.

body:before {
  content:"";
  position:fixed; /*relative to the screen*/
  z-index:-1;
  top:0;
  right:0;
  width:200vw; /*2x100vw*/
  bottom:0;
  background: 
    /*will cover the left area while sliding*/
    linear-gradient(red,red) left/50% 100%, /*the red should be green*/
    /*the main gradient*/
    linear-gradient(to right, green, blue 10%, green 20%) right/50% 100%;
  background-repeat:no-repeat;
  animation: stub 3s linear infinite;
}
@keyframes stub {
  0% { transform:translate(0); }
  100% { transform:translate(50%); } /*50% will be 200vw/2 = 100vw*/
}

Related to understand the trick behind the background values: Using percentage values with background-position on a linear-gradient

It looks like this method isn't working with recent chrome and firefox update. Gradient is visible on all screen — Anton, Jul 01 '19 at 09:57
It's possible to use clip-path instead of overflow. But it's not working in Edge. https://codesandbox.io/s/naughty-moser-d81nl — Anton, Jul 02 '19 at 08:00
Mac Firefox is severely lagging when the background is on the bottom half of the screen, but not when the snippet is on the upper half of the screen. Weird. — Rickard Elimää, Mar 04 '20 at 11:57

How to animate linear-gradient without using background-position?

1 Answers1

Linked

Related