Creating an animated adjustment mask (blend mode)

Question

The animation below was created in Adobe AE by simply moving images' masks with added red tints.

I am trying to figure out how to achieve something similar in CSS/JS (is it even possible?). The tint itself could be handled by blend modes but moving the mask/adjustment layer without moving the masked image seems challenging.

Actually, it's impossible. You should use canvas to implement this. — robdev91, Oct 22 '20 at 01:06

Temani Afif · Accepted Answer · 2020-10-22T01:51:36.990

Using CSS mask it's possible. Below a basic example where the trick is to have 3 masks and we animate the position of each one. The remaining is easy, two layers above each other with the same images and the top one with a blending mode:

.box {
  width:500px;
  height:300px;
  padding:80px 200px 80px 80px;
  background:url(https://picsum.photos/id/1074/800/800) center/contain padding-box content-box;
  box-sizing:border-box;
  position:relative;
}
.box:before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:inherit;
  background-color: red;
  background-blend-mode: darken;
  -webkit-mask:            /* position  / size */
    linear-gradient(#fff 0 0) 90px 0    /80px  100px,
    linear-gradient(#fff 0 0) 50px 100% /60px  60px,
    linear-gradient(#fff 0 0) 100% 50%  /150px 70px;
  -webkit-mask-repeat:no-repeat;
  animation: move 2s linear infinite alternate;
}
@keyframes move {
  to {
    -webkit-mask-position:
        90px 30%,
        50px 70%,
        50%  50%;
  }
}

<div class="box">

</div>

Creating an animated adjustment mask (blend mode)

1 Answers1