Add Typing Text Animation To Divi Theme - Zealous Sites

Have you ever gone to a website and saw some typing effects? It was really popular about a year ago, but in the age of page-speed being everything it has seemed to lose its popularity. That said, it’s still a super cool effect, and one to showcase here!

More Than One Way

Like everything in Web development, there is more than one way to do this. We could use a few different CSS methods, choose between a number of jQuery libraries, or just write up some Javascript.

At the end of the day, the best solution is the one that works in your environment and loads the fastest.

Using CSS

If you’ve been building websites for some time, there’s a really good chance that you’ve found yourself on CSS-Tricks.com. They’ve been around for as long as I can remember and their content has helped me through some tough challenges along the way.

In their post covering this same topic, they used the following CSS to solve the problem.

.typewriter h1 {
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  border-right: .15em solid orange; /* The typwriter cursor */
  white-space: nowrap; /* Keeps the content on a single line */
  margin: 0 auto; /* Gives that scrolling effect as the typing happens */
  letter-spacing: .15em; /* Adjust as needed */
  animation: 
    typing 3.5s steps(40, end),
    blink-caret .75s step-end infinite;
}

/* The typing effect */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: orange; }
}

At the time of writing their post, however, they suggested to include Autoprefixer. Today, three years later, that’s not so much of an issue. It’s still wise to include those prefixes for some past-browser compatibility, but all modern browsers support the CSS variables used above.

Additionally, in order for the code above to work, the width of the container that the typewriter’s h1 class is being used in must be defined.

Using Javascript

This same article goes on to cover a few different ways to solve the problem using some Javascript. My favorite is the following codepen. :)

Using A Plugin

In the world of WordPress, there are few situations where someone hasn’t already made a plugin to make your life easier. This is not one of those times. :) https://wordpress.org/plugins/mrlegend-typedjs/#reviews

A plugin called “Typed JS: A typewriter style animation” by Brendan O’Neill took the powerful Typed JS jquery solution and turned it into a shortcode.

There are better ways

In this article, I covered 3 very basic ways to do this on your site. Truthfully though, there are better ways. If I were to add this feature to a website, I would most likely use the CSS method and build it into the themes’ stylesheet. I’d do this because that would most likely be the fastest, lightest way to achieve that effect.

However, if I found that that wasn’t the case, I would likely use the TypedJS solution and implement that into the theme without the plugin since I’m personally not a big fan of using a bunch of plugins. :)

If you know of a better way, let me know in the comments below! This may not be a super popular design trend today, but it’s a neat feature and might very well be back in the future. :)