How to Design Wave Text Animation using CSS

In this post, we’ll learn step by step how to design wave text animation using CSS. I got this idea from a Codepen user named Álvaro, created in NOVEMBER 27, 2021. Many new coders look for code snippets online. They use Codepen a lot, but sometimes they need help using the codes in their projects. A small change can mess up the whole design. There aren’t many places that help with this problem. That’s why I made this post. I want to make it easy for you to understand. Don’t forget to look at my other Codepen tutorial posts to learn more.

HTML Structure For Wave Text Animation

In the HTML structure, the developer first creates a <section> element. Inside this, a <div> element with the class name “content” is created. Within this div, two <h2> elements are created with the same text “Kemi”.

This structure forms the basis of our wave text animation. The two <h2> elements will be manipulated with CSS to create the wave effect.

<section>
  <div class="content">
    <h2>Kemi</h2>
    <h2>Kemi</h2>
  </div>
</section>

Output:

CSS Code For Wave Text Animation

In the CSS, the developer starts by importing the Poppins font from Google Fonts. Next, a universal selector (*) is used to select all elements on the page. The margin and padding are set to 0 to remove any default spacing from the browser. The box-sizing property is set to border-box, which means the padding and border are included in the element’s total width and height. The font-family is set to “Poppins”, which is the font imported earlier.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

The body of the document is then styled to display its child elements in a flex layout, with a black background. The min-height is set to 100vh, which means the minimum height of the body will be the same as the height of the viewport. The align-items and justify-content properties are used to center the content vertically and horizontally.

body {
  display: flex;
  background: #000;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
}

Now start the main styling. The div with the class “content” is positioned relatively, which means it will be positioned relative to its normal position. The <h2> elements within it are styled with a white color, a large font size, and are positioned absolutely. This means they will be positioned relative to the nearest positioned ancestor (in this case, the “content” div).

.content {
  position: relative;
}

.content h2 {
  color: #fff;
  font-size: 8em;
  position: absolute;
  transform: translate(-50%, -50%);
}

Output:

The first <h2> element is styled with a transparent color and a stroke of 2px with the color #03a9f4. This is done to create an outline effect for the text. The -webkit-text-stroke property is used to specify the width and color of the text’s stroke.

By setting the color property to transparent, the fill color of the text is removed, leaving only the stroke visible. This creates an outline effect where the text appears as a hollow shape with a colored border. The color of the stroke is set to #03a9f4, which is a shade of light blue.

.content h2:nth-child(1) {
  color: transparent;
  -webkit-text-stroke: 2px #03a9f4;
}

Output:

The second <h2> element is styled with the color #03a9f4 and an animation named “animate” with a duration of 4s, ease-in-out timing function, and infinite iteration count.

.content h2:nth-child(2) {
  color: #03a9f4;
  animation: animate 4s ease-in-out infinite;
}

The color property is set to #03a9f4, matching the stroke color of the first <h2> element. This creates a cohesive visual effect where the filled text appears to be the same color as the outline of the first <h2> element.

The animation property is a shorthand property that specifies the name of the animation (in this case, “animate”), the duration of the animation (4s), the timing function (ease-in-out), and the number of times the animation should repeat (infinite).

The “animate” animation is defined elsewhere in the CSS using the @keyframes rule. This animation gradually changes the clip-path property of the <h2> element, creating a wave-like effect.

The ease-in-out timing function means the animation starts slowly, speeds up in the middle, and then slows down again towards the end. This creates a smooth, natural-looking transition.

The infinite value means the animation will repeat indefinitely, creating a continuous wave effect.

In summary, the styling of the two <h2> elements creates a visually striking wave text animation where the filled text appears to move within the outlined text.

Output:

Applied Wave effect on Text

The @keyframes rule is used to create animations in CSS. Inside the @keyframes, different styles are set at different stages of the animation using percentages. The percentage represents the percentage of time that has passed in the animation.

In this case, the animation is named “animate” and it has three stages: 0%, 50%, and 100%.

The clip-path property is used to specify a region of an element to display, with the rest being hidden. In this case, it’s being used to create a wave effect by defining a polygon shape that changes over the course of the animation.

At the 0% and 100% stages (the beginning and end of the animation), the clip-path is set to a polygon shape that starts at 45% from the top, dips slightly to 44% at 16% from the left, rises to 50% at 33% from the left, peaks at 60% at 54% from the left, dips to 52% at 100% from the left, and then extends down to 100% from the top at 100% from the left and 0% from the left.

@keyframes animate {
  0%,
  100% {
    clip-path: polygon(
      0% 45%,
      16% 44%,
      33% 50%,
      54% 60%,
      70% 61%,
      84% 59%,
      100% 52%,
      100% 100%,
      0% 100%
    );
  }
  50% {
    clip-path: polygon(
      0% 60%,
      15% 65%,
      34% 66%,
      51% 62%,
      67% 50%,
      84% 45%,
      100% 46%,
      100% 100%,
      0% 100%
    );
  }
}