Animate text while using background-clip with text

Question

I'm trying to animate text and change the color in the middle of the screen, like this

HTML

<div class="text-mask">
    <div class="scrolling-text">MASKED TEXT</div>
</div>

CSS

body {
  background-color: #000;
}
.text-mask {
  font-size: 100px;
  font-weight: bold;
  background: linear-gradient(to right, orange 50%, white 50%);
  background-clip: text;
  color: transparent;
  position: relative;
  height: 120px;
}

.scrolling-text {
  /* transform: translateX(10px); */
  /* position: relative */
  
} 

DEMO

As soon as I apply the styling of .scrolling-text the text is gone. The idea I had was to change the value of the transform in order to get the walking/animated text.

Is there a way I can achieve this?

Answer 1

transform and background-clip should belong to the same element

body {
  background-color: #000;
  overflow: hidden;
}

.scrolling-text {
   --offset: 10px; /* adjust this to control the movement */
 
  transform: translateX(var(--offset));
  font-size: 50px;
  font-weight: bold;
  background: 
    linear-gradient(90deg, orange 50%, white 0)
    calc(50% - var(--offset))/400% 100%;
  background-clip: text;
  color: transparent;
}

<div class="scrolling-text" style="--offset: 150px;">MASKED TEXT</div>
<div class="scrolling-text" style="--offset: 100px;">MASKED TEXT</div>
<div class="scrolling-text">MASKED TEXT</div>