I am looking to add a gradient color effect with animation to the h1 element. I found this code on codepen. However, when I uncomment the styles for h1 in the CSS, the text with the applied gradient is not visible.
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
});
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;
} */ <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>