DEV Community 👩‍💻👨‍💻

Cover image for Making Self-Writing And Erasing Text Animation – 2022
Musa Yazlık
Musa Yazlık

Posted on

Making Self-Writing And Erasing Text Animation – 2022

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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);
    }
  }
};
Enter fullscreen mode Exit fullscreen mode

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.

Content Source: https://en.musayazlik.com/making-self-writing-and-erasing-text-animation/

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

Top comments (0)

DEV

Thank you.

 
Thanks for visiting DEV, we’ve worked really hard to cultivate this great community and would love to have you join us. If you’d like to create an account, you can sign up here.