.text {
font-size: 36px;
font-weight: bold;
color: #333;
transition: all 0.5s;
}
.morph {
transform: scaleX(0);
}

How to create Text Morph in JavaScript and CSS

Text morphing is a cool effect that can add some visual interest to your website. With JavaScript and CSS, you can easily create a text morph effect that transitions smoothly from one word to another. In this tutorial, we will show you how to create a simple text morph effect using JavaScript and CSS.

First, let’s set up our HTML structure. We will have a <div> element with a class of “text” that will contain our text. Inside the <div>, we will have two <span> elements with different text content. One will be the initial text and the other will be the text that we want to morph into. We will also add a class of “morph” to the second <span> to hide it initially.

    <div class="text">
      <span>Hello</span>
      <span class="morph">World</span>
    </div>
  

Next, let’s write some JavaScript to add the morphing effect. We will use the setInterval function to toggle the class of the second <span> every few seconds. This will create a smooth transition effect between the two words.

    <script>
      const text = document.querySelector('.text');
      const morph = document.querySelector('.morph');
      
      setInterval(() => {
        morph.classList.toggle('morph');
      }, 2000);
    </script>
  

Finally, let’s add some CSS to style our text and create the morphing effect. We will set the font size, weight, and color of the text in the “text” class. We will also add a transition property to smoothly animate the text when the “morph” class is applied.

And there you have it! You have successfully created a text morph effect using JavaScript and CSS. Feel free to customize the text and styling to create your own unique morphing effect.