CODEWITHSUNDEEP
htmlcssgradient
Adarsh Raj
Adarsh Raj

Reputation: 425

Can't apply Gradient Color on Text with Animation

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>

Upvotes: 0

Views: 292

Answers (2)

dantheman
dantheman

Reputation: 3814

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>

Upvotes: 1

Jaswinder Kaur
Jaswinder Kaur

Reputation: 1634

.ml2 .letter {
  display: inline-block;
  line-height: 1em;
   background: -webkit-linear-gradient(#eee, #333);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

Upvotes: 0

Related Questions