I want to apply gradient color on `h1` with animation. I have [this](https://codepen.io/coderscoding-the-selector/pen/wvmwxjq) code on `codepen`. If i remove comment from `h1` in css then i can't see text with applied gradient, text is there but the color is not visible.

```js
var textWrapper = document.querySelector('.ml2 .letter');
textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");

anime.timeline({loop: true})
  .add({
    targets: '.ml2 .letter',
    scale: [4,1],
    opacity: [0,1],
    translateZ: 0,
    easing: "easeOutExpo",
    duration: 950,
    delay: (el, i) => 70*i
  }).add({
    targets: '.ml2',
    opacity: 100,
    duration: 1000,
    easing: "easeOutExpo",
    delay: 1000
  });

```

```css
body {
  display:flex;
  justify-content:center;
  align-items: center;
  height: 100vh;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;

    background: linear-gradient(to right, #FDFBFB, #EBEDEE 70%);
}
.ml2 {
  font-weight: 900;
  font-size: 3.5em;
}

.ml2 .letter {
  display: inline-block;
  line-height: 1em;
}

/* h1 {
  font-size: 25px;
    background: linear-gradient(to right, #30CFD0 0%, #330867 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
} */
```

```html
  <body>  

          <h1 class="ml2"><span class="letter"> Hello World!</span></h1>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>

</body>
```