How to add those nifty Typewriter (Typing) and other animated text effects to WordPress

One feature I have always wanted to add to my website is they “typing” effect. It’s that thing where you animate text so you can show it being typed one character at a time. I’ve always liked the look, but never used it.

A conversation on Twitter late Saturday night brought my attention to the Ignis WordPress theme. This theme has one notable feature, and it’s the typing effect. I love the effect but don’t like this theme (it isn’t well made), and so in order to satisfy my curiosity I decided to pull together a list of plugins, tools, scripts, and other ways one might implement the typing effect and other text animations.

Note: I have only tested the two free WP plugins. They worked reasonably well; you can see the Typing Effect plugin in action over at my project site, Third Body Press.

WP Plugins

There are at least 3 plugins that can pull off the typing effect. One costs $12 over on Envato Market, but others are free. I plan to start with the free plugins, and then maybe try the paid option.

Crunchify

If you like doing things the hard way,  Crunchify explains how to hand code the typing effect.

Animate It!

This is a free plugin that lets you add CSS animations. It can’t do the typing effect I want, but it can make your text and image bounce, fly around, etc.

Animate.Css

WPMU Devs has a post that explains how you can animate text the hard way by installing JS and CSS files and then writing your own code. That is usually more work than I want to invest, but it could be useful in some situations.

Bashooka

Bashooka has a roundup post that links to 15 WP animation plugins. This goes beyond text animations to include page transitions and other tricks. Again, it’s not what I want today, but I am including it in case it proves useful tomorrow.

Posted in tips & tricks.

Leave a Reply

Your email address will not be published. Required fields are marked *