[SOLVED] Animated Netflix watch next button with css mix-blend-mode

Animated Netflix watch next button with css mix-blend-mode

I am trying to build an animated Watch Next button with Netflix-like progress fill.

Here is a small demo: https://jsfiddle.net/j5af2oc0/4/

The problem is with an icon, that "glitches" over the progress fill. I am not sure if that is a browser bug, or mix-blend-mode is not good when using transform over complex svg shapes. Any workaround for this ?

Solution

Seems to be a Chrome related issue, works fine in Firefox. An easy solution is to wrap the svg in a div and apply the mix-blend-mode to it. Updated example:

document.getElementById('button').addEventListener('click', function() {
  if (this.classList.contains('loaded')) {
    this.classList.remove('loaded')
  } else {
    this.classList.add('loaded')
  }
})

body {
  background: #000000;
}

.button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 265px;
  height: 56px;
  background-color: #222222;
  position: relative;
  border-radius: 32px;
  overflow: hidden;
  font-size: 18px;
  cursor: pointer;
}

.button .bg {
  background: #F0F0F0;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  transform: translateX(-100%);
  transition: transform 1s linear;
}

.button.loaded .bg {
  transform: none;
}

.button span {
  color: white;
  mix-blend-mode: difference;
}

.button .svg {
  margin-right: 10px;
  mix-blend-mode: difference;
  line-height: 0;
}

.button svg path {
  stroke: white;
}

<div id="button" class="button">
  <div class="bg"></div>
  <div class="svg">
    <svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M21.6353 12.8965C21.6353 17.8675 17.6063 21.8965 12.6353 21.8965C7.66425 21.8965 3.63525 17.8675 3.63525 12.8965C3.63525 7.92548 7.66425 3.89648 12.6353 3.89648C17.6063 3.89648 21.6353 7.92548 21.6353 12.8965Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
      <path d="M11.5763 9.95455L15.4583 12.2506C15.9493 12.5406 15.9493 13.2516 15.4583 13.5416L11.5763 15.8376C11.0763 16.1336 10.4443 15.7726 10.4443 15.1916V10.6006C10.4443 10.0196 11.0763 9.65855 11.5763 9.95455Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
    </svg>
  </div>
  <span>Watch Next Episode</span>
</div>