Can't apply Gradient Color on Text with Animation

June 27, 2022

I want to apply gradient color on h1 with animation. I have this 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.

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>

>Solution :

The reason it’s getting cut off is because the background gradient does not fill the area where the text is bigger. Add padding to the element with the background gradient on.

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;
  padding: 100px;
}

.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>