Text morph | text morph using css - codewithrandom

Text morph | text morph using css - codewithrandom

text morph | text morph using css - codewithrandom


 Welcome🎉 to Code With Random blog. In this blog, we learn that how to create text morph. We use HTML & CSS  for this simple css text morph . Hope you enjoy our blog so let's start with a basic HTML structure for a css text morph.

HTML code for text morph

 <div id="container">  
      <span id="text1"></span>  
      <span id="text2"></span>  
 </div>  
 <svg id="filters">  
      <defs>  
           <filter id="threshold">  
                <feColorMatrix in="SourceGraphic"  
                          type="matrix"  
                          values="1 0 0 0 0  
                                              0 1 0 0 0  
                                              0 0 1 0 0  
                                              0 0 0 255 -140" />  
           </filter>  
      </defs>  
 </svg>  
There is all HTML code for the CSStext morph. Now, you can see output without CSS, then we write CSS for text morph.
Output
there is no output just a blank screen | Let write css for effect   

CSS for text morph 

 @import url('https://fonts.googleapis.com/css?family=Raleway:900&display=swap');  
 body {  
      margin: 0px;  
 }  
 #container {  
      position: absolute;  
      margin: auto;  
      width: 100vw;  
      height: 80pt;  
      top: 0;  
      bottom: 0;  
      filter: url(#threshold) blur(0.6px);  
 }  
 #text1, #text2 {  
      position: absolute;  
      width: 100%;  
      display: inline-block;  
      font-family: 'Raleway', sans-serif;  
      font-size: 80pt;  
      text-align: center;  
      user-select: none;  
 }  

Output

there is no output just a blank screen | Lets write js for letter text and animation. 

Javascript code  for text morph 

 const elts = {  
  text1: document.getElementById("text1"),  
  text2: document.getElementById("text2") };  
 const texts = [  
 "CODEWITHRANDOM",  
 "is",  
 "so",  
 "satisfying",  
 "to",  
 "watch?"];  
 const morphTime = 1;  
 const cooldownTime = 0.25;  
 let textIndex = texts.length - 1;  
 let time = new Date();  
 let morph = 0;  
 let cooldown = cooldownTime;  
 elts.text1.textContent = texts[textIndex % texts.length];  
 elts.text2.textContent = texts[(textIndex + 1) % texts.length];  
 function doMorph() {  
  morph -= cooldown;  
  cooldown = 0;  
  let fraction = morph / morphTime;  
  if (fraction > 1) {  
   cooldown = cooldownTime;  
   fraction = 1;  
  }  
  setMorph(fraction);  
 }  
 function setMorph(fraction) {  
  // fraction = Math.cos(fraction * Math.PI) / -2 + .5;  
  elts.text2.style.filter = `blur(${Math.min(8 / fraction - 8, 100)}px)`;  
  elts.text2.style.opacity = `${Math.pow(fraction, 0.4) * 100}%`;  
  fraction = 1 - fraction;  
  elts.text1.style.filter = `blur(${Math.min(8 / fraction - 8, 100)}px)`;  
  elts.text1.style.opacity = `${Math.pow(fraction, 0.4) * 100}%`;  
  elts.text1.textContent = texts[textIndex % texts.length];  
  elts.text2.textContent = texts[(textIndex + 1) % texts.length];  
 }  
 function doCooldown() {  
  morph = 0;  
  elts.text2.style.filter = "";  
  elts.text2.style.opacity = "100%";  
  elts.text1.style.filter = "";  
  elts.text1.style.opacity = "0%";  
 }  
 function animate() {  
  requestAnimationFrame(animate);  
  let newTime = new Date();  
  let shouldIncrementIndex = cooldown > 0;  
  let dt = (newTime - time) / 1000;  
  time = newTime;  
  cooldown -= dt;  
  if (cooldown <= 0) {  
   if (shouldIncrementIndex) {  
    textIndex++;  
   }  
   doMorph();  
  } else {  
   doCooldown();  
  }  
 }  
 animate();  
Final output

text morph | text morph using css - codewithrandom

text morph | text morph using css - codewithrandom

Now we have completed our javascript section,  Here is our updated output with javascriptHope you like the text morph you can see output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕.
credit codepen user: @3screativez

In this post, we learn how to create an text morph  using simple HTML & CSS and javascript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by - Code With Random/Anki 

1 Comments

Post a Comment

Previous Post Next Post