JSFiddle - React, Tailwind, and code Playground

HTML

<span class="shiny">here there's some text!</span>
<input id="animate" type="button" value="Animate!" />

CSS

.shiny {
    color:rgba(0, 0, 0, 0);
    -webkit-background-clip:text;
     background-image:-webkit-gradient(linear, 0% 0%, 100% 0%, color-stop(0, #2200C1), color-stop(1, #2200C1));
}

JavaScript

$(function() {
    var progress = 0;
    var width = .3;
    var intervalID = null;
    var getGradient = function() {
        var gradient = "-webkit-gradient(linear, 0% 0%, 100% 0%, color-stop($beginning, #2200C1), color-stop($middle, #58E), color-stop($end, #2200C1));";
        return gradient.replace("$beginning", progress).replace("$middle", progress + width / 2).replace("$end", progress + width);
    }
    
    $('#animate').click(function() {
        if(intervalID)
            clearInterval(intervalID);
        progress = -width / 2;
        intervalID = setInterval(function() {
          progress += 1 / 120;
            $('.shiny').attr('style', 'background-image:' + getGradient()); //for whatever reason, .css failed me
          console.log($('.shiny').css('background-image'))
          if(progress >= 1) {
              clearInterval(intervalID);
              intervalID = null;
          }
        }, 1 / 60); 
    });
});