Making Self-Writing and Erasing Text Animation – 2022

Table of Contents

Önemli Uyarı

Bu içerik sahibine reklam engelleyicisini kapatarak destekte bulunabilirsiniz. ?

Hello everyone. If you have examined it, you have noticed that there is a self-writing text animation in many portfolio themes. In articles such as I am developer or I am desinger, you have seen that the developer and desinger part is written and deleted by itself. In this article, I will give you information about how to make this animation effect using html, css and javascript.

First, let’s write the html codes of our text animation.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Text Animations</title>
  </head>
  <body>
    <h5>
      I am a
      <span
        class="txt-rotate"
        data-period="2000"
        data-rotate='[ "web designer.", "wannabe developer.", "Photoshop lover." ]'
      ></span>
    </h5>
  </body>
</html>

The I am a part in h5 is the part that will remain fixed as our text. The part in the span tag will be the text animation part that writes and deletes itself.

data-period : The attribute that you can specify the period for writing and deleting the text.
data-rotate : Attribute that provides a list of posts to be written and deleted.

That was the html part.

Now let’s move on to the css part.

h5 {
  font-weight: 200;
  text-align: center;
  font-family: Poppins, sans-serif;
  font-size: 1.9em;
  color: #000;
  padding: 0;
  line-height: 0.8em !important;
  text-transform: none;
  font-weight: 600;
}

h5 span {
  color: red;
  animation-delay: 2s;
  font-weight: 600;
}

.txt-rotate > .wrap {
  border-right: 0.08em solid #666;
}

After making a small edit in the css part, we now come to the javascript part, which is the father part of the job. ?

Let’s do the JavaScript coding.

let TxtRotate = function (el, toRotate, period) {
  this.toRotate = toRotate;
  this.el = el;
  this.loopNum = 0;
  this.period = parseInt(period, 10) || 2000;
  this.txt = "";
  this.tick();
  this.isDeleting = false;
};

TxtRotate.prototype.tick = function () {
  let i = this.loopNum % this.toRotate.length;
  let fullTxt = this.toRotate[i];

  if (this.isDeleting) {
    this.txt = fullTxt.substring(0, this.txt.length - 1);
  } else {
    this.txt = fullTxt.substring(0, this.txt.length + 1);
  }

  this.el.innerHTML = '<span class="wrap">' + this.txt + "</span>";

  let that = this;
  let delta = 300 - Math.random() * 100;

  if (this.isDeleting) {
    delta /= 2;
  }

  if (!this.isDeleting && this.txt === fullTxt) {
    delta = this.period;
    this.isDeleting = true;
  } else if (this.isDeleting && this.txt === "") {
    this.isDeleting = false;
    this.loopNum++;
    delta = 500;
  }

  setTimeout(function () {
    that.tick();
  }, delta);
};

window.onload = function () {
  let elements = document.getElementsByClassName("txt-rotate");
  for (let i = 0; i < elements.length; i++) {
    let toRotate = elements[i].getAttribute("data-rotate");
    let period = elements[i].getAttribute("data-period");
    if (toRotate) {
      new TxtRotate(elements[i], JSON.parse(toRotate), period);
    }
  }
};

Yes, after writing the javascrip code above, let’s run our index.html file in a browser and test it.

Animation test result

Making Self-Writing and Erasing Text Animation

Our animation is working the way we want. Now you can customize this self-writing and erasing text animation by changing the data in the data-period and data-rotate attributes. In this article, I have explained to you how to make a self-writing and deleting text animation, see you in my next blog post. If you want to be notified of new content instantly, you can confirm to receive notifications from the bottom left corner.

Source : https://codepen.io/LPwd/pen/bGvrmzK