O'Reilly

MooTools Typewriter Effect Plugin

By on  

Last week, I read an article in which the author created a typewriter effect using the jQuery JavaScript framework. I was impressed with the idea and execution of the code so I decided to port the effect to MooTools. After about an hour of coding, I had a smooth, customizable Mootools class that accomplished the same goal. Without further adieu, here's my MooTools 1.2 Typewriter plugin.

The MooTools JavaScript Class

//class is in
var Typewriter = new Class({
	
	//implements
	Implements: [Options],

	//options
	options: {
		container: $(document.body),
		message: '',
		delay: 150,
		cursor: 0
	},
	
	//initialization
	initialize: function(options) {
		//set options
		this.setOptions(options);
	},
	
	//start the typewriter
	start: function() {
		
		//for every letter
		for(x = 0; x < this.options.message.length; x++) {
			//spit out the letter
			var id = this.setLetter.delay(this.options.delay * x, this);
		}
	},
	
	//place the newest letter in the container
	setLetter: function() {
		
		this.options.container.set('html',this.options.container.get('html') + '' + this.options.message.charAt(this.options.cursor));
		
		//increment cursor
		this.options.cursor++;
	}
});

Once the class is initialized, options get set (also note the class defaults). Once the start method is called, we loop through every character and call setLetter() to place the next character into the container after the specified delay.

The Usage

var t = new Typewriter({
	container: $('type-here'),
	message: 'This is output from the typewriter class. This class is small but packs a good punch. Isn\'t MooTools great?',
	delay:100
}).start();

When creating your typewriter, you can pass it the following parameters:

  • container:: What element would you like the typewriter to write to?
  • message:: What do you want the message to be?
  • delay:: How much time would you like between letters?
  • cursor:: What position in the message (which character) do you want the Typewriter to start at?

Once you're ready for to start the typewriter, you'll call the start() method.

Track.js Error Reporting

Recent Features

  • CSS Animations Between Media Queries

    CSS animations are right up there with sliced bread. CSS animations are efficient because they can be hardware accelerated, they require no JavaScript overhead, and they are composed of very little CSS code. Quite often we add CSS transforms to elements via CSS during...

  • Write Simple, Elegant and Maintainable Media Queries with Sass

    I spent a few months experimenting with different approaches for writing simple, elegant and maintainable media queries with Sass. Each solution had something that I really liked, but I couldn't find one that covered everything I needed to do, so I ventured into creating my...

Incredible Demos

  • Create a Simple Slideshow Using MooTools

    One excellent way to add dynamism to any website is to implement a slideshow featuring images or sliding content. Of course there are numerous slideshow plugins available but many of them can be overkill if you want to do simple slideshow without controls or events....

  • Introducing LazyLoad 2.0

    While improvements in browsers means more cool APIs for us to play with, it also means we need to maintain existing code.  With Firefox 4's release came news that my MooTools LazyLoad plugin was not intercepting image loading -- the images were loading regardless of...

Discussion

  1. would be nice if as an option you could implement some “typo” function, so randomly to mistype some chars and delete it.
    i think is just some “fancy” feature, but i thought you might like it :)

  2. @rborn: Awesome idea! I’ll think about those possibilities. Good suggestion.

  3. Catar4x

    Yes, Mootools is great !

  4. Amazing! Thanks you!

  5. I also think you should have the _ after the character its typing :D

  6. Darren

    Good work. It would be nice to be able to pass a string to the start function so you can add more to the string again with a second call. Or overwrite the first string. I also second the typo option and underscore option.

  7. Just a brain fart

    But it would be really cool if it was possible to overlay the text with something grunge, that would crack up the text link text

    Fontface embedding is properly the easiest way, but anyone have a idea with a image overlay/underlay that moves with the text?

  8. @Esben: I think the only way to this is writing a script which works with sIFR because this is the best way to embed only fonts I think.

  9. @Esben and @Mattias

    what about some png overlay, as css gradient text technique?

    would this be possible with a grunge pattern ?
    will not become a really typewriter font, but….

  10. @rborn:
    Nice idea! It should work I think. You need to know the height of your typewriting font and then you could create a seamless grunge-texture (as transparent PNG). The method could be creating a DIV-overlay (with the PNG as background-image) that changes it “width”-value referring to the amount of the typewrited letters. A problem would be the whitespaces I think but it would be a way.

  11. @Mattias

    if u go here

    http://www.webdesignerwall.com/demo/css-gradient-text/

    there is a “wow zebra” that seem to do the trick

    i think is just a matter image from there :)

  12. Ah yes alright – there isn’t a problem if you a have plain-colored background. I thought of a complex background (like a graphic or stripes). But the trick is very nice although. I’ll try that out later!

  13. Badchenn

    Another enhancement idea… As you know, we don’t always type at a steady speed. How about adding a speed variation? Maybe a range? Let’s say delay:100 variance:20 (where the variance could be a percentage of the delay setting). This along with the random worng letter/backspace feature would be cool.

  14. @Badchenn: Another great idea!

    Keep them coming everyone.

  15. @All: Version “2” is coming very soon. Any more suggestions before I release it to the world?

  16. Hi David,

    good work.

    My suggestions:

    Multiple messsges.
    Leading character (as seen on http://www.bbc.co.uk/news ticker)

    Hmm… not sure about rborn’s random mistype addition – from a user’s point of view I can see that being quite annoying.

    Still – I guess implementers don’t have to use that feature ;)

  17. Hey,

    I saw that you had used trackbacked me and thought I’d see what was going on.

    Awesome stuff. I’m glad that my code inspired you, and even across two different javascript frameworks. I was looking at the blinking underscore idea as someone else suggested and I actually finished doing it but never though that it was a feature anybody wanted. Guess I was wrong.

    Again thanks for the trackback and good luck with you Mootools class. :-)

  18. Greg

    Hey David,

    I was excited to find your Typewriter class. However, I’m using mootools 1.1 and receive the following error when I try to use it:

    this.options.container.get is not a function

    Any idea why? I assume it’s a version issue. Is it possible to tweak the class slightly to work with 1.1? I prefer not to deal with using 1.2; doing so breaks a lot of other script.

    Thanks,
    Greg

  19. sam

    Hi is there a way to have a few of these on one page each starting with an onclick

  20. Javascript newbie here. How would I make this start from an onClick instead.

  21. You would change the usage code to only fire on the click event.

  22. Rashy

    Hey David,

    Can you make a jQuery version of this plugin too ? Can you also add an option to add a arbitary text like “_” (Underscore) to the effect and delete it when the effect finishes. Eg:

    T_
    Te_
    Tes_
    Test

  23. Nice article but I think it needs to support rich format really… I.e. allow the text to have html tags within it so people can type out text that becomes a hyperlink. Admittedly could attach an event within the panel that loads the content, i.e. change the cursor to a hand, and even addClass to the text so it behaves like a normal hyperlink but I’m wondering whether or not that’s the best approach? Probably is, just a thought…

  24. Great script! Can you tell me how I can use a chain on this script? I want another script to be executed when the typewriter finishes. Thanks in advance!

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!

Recently on David Walsh Blog

  • GSAP + SVG For Power Users: Motion Along A Path

    Now that the GreenSock API is picking up steam, there are many tutorials and Getting Started guides out there to provide good introductions to the library, not to mention GreenSock’s own Forum and Documentation. This article isn’t intended for beginners, but rather a...

  • Copy a Directory from Command Line

    Copying a directory for the sake of backup is something I do often, especially when I'm trying to figure out why something isn't working when I use an external library.  I'll copy the directory structure as a backup, mess around with the original source until I find a solution,...

  • Hotjar &#8211; All-in-one Analytics and Feedback

    Website analytics are a massive business -- the more data you can collect with regard to your users' behaviors on your site, the more you can increase and maximise conversion...and increased conversion is always good.  Sometimes increase conversion means more money, improved user experience, viewer retention,...

  • Crafting a 3D React Carousel

    There is something in me that is amazed but beautiful 3D interfaces. And it doesn’t matter whether they’re functional like Gyroscope features menu, technology demonstrators like the amazing periodic table demo from famous or they’re artistic representation pushing the limits of...

  • Collaborative Editing in JavaScript: An Intro to Operational Transformation

    I've set out to build a robust collaborative code editor for the web. It’s called Codr, and it lets developers work together in real time - like Google Docs for code. For web developers, Codr doubles as a shared reactive work surface where every change is...