gsap-typed-plugin

A Greensock plugin that mimics the typing of words. It also supports arbitrary HTML content.

Installation
------------
Include TweenMax or TweenLite.

Then include gsap-typed-plugin.js like so:




Usage
-----
You must have TweenMax or TweenLite set up first.
Optionally, you can use TimelineMax or TimelineLite as well.

The target you pass in will have its content replaced as the animation takes place.
For example, the following will replace the text inside a div after 3 seconds.

TweenMax.to('#target', 3, {typed:{to:"the div will have this content now", stopOnCommon:false}});

You can pass in HTML by passing in an HTMLElement or a jQuery element:

TweenLite.to('#target', 1, {typed:{to:$('').text('hi'), stopOnCommon:true}});


You can also pass in HTML as a string if it is not part of an array:

TweenLite.to('#target', 1, {typed:{to:["this is not bold and renders the start and end tags"], stopOnCommon:true}});
TweenLite.to('#target', 1, {typed:{to:"this IS bold, notice no []", stopOnCommon:true}});

Setting stopOnCommon to true will stop erasing characters when it reaches content that is common to the start and the end.

You can easily make a cursor by using some css and 2 spans:

.blinking-cursor {
font-weight: 100;
color: #2E3D48;
-webkit-animation: 1s blink step-end infinite;
-moz-animation: 1s blink step-end infinite;
-ms-animation: 1s blink step-end infinite;
-o-animation: 1s blink step-end infinite;
animation: 1s blink step-end infinite;
}

@keyframes "blink" {
from, to {
color: transparent;
}
50% {
color: black;
}
}

@-moz-keyframes blink {
from, to {
color: transparent;
}
50% {
color: black;
}
}

@-webkit-keyframes "blink" {
from, to {
color: transparent;
}
50% {
color: black;
}
}

@-ms-keyframes "blink" {
from, to {
color: transparent;
}
50% {
color: black;
}
}

@-o-keyframes "blink" {
from, to {
color: transparent;
}
50% {
color: black;
}
}

...and then...

TweenLite.to('#b', 5, {typed:{to: "this will have a cursor in the caret position", stopOnCommon:true}});

... and finally...

|

You can provide your own matching and rendering functions to customize the way content is displayed. A good example of this
is rendering icons like those from font awesome or from glyphicons. The following illustrates how you could display icons
as if they were characters.


var matcher = {
isMatch:function(node)
{
return node instanceof HTMLElement && node.classList.contains('fa');
},
getDisplayStrategy: function(node){
return {
displayNode: function(node, numKeyPresses){
return node;
},
numberKeyPressesToReveal: 1
};
}
};

TweenMax.to('#target', 3, {typed:{to:"", stopOnCommon:false, customMatchers:[matcher]}, ease: Linear.easeNone});

You provide an object that exposes 2 properties: isMatch and getDisplayStrategy. isMatch is a function that
should return true if the matcher is capable of processing the Node passed to it, and false if it cannot. getDisplayStrategy
is a function that takes a Node and returns an object. The object it returns should have 2 properties: displayNode
and numberKeyPressesToReveal. displayNode is a function that takes a Node an integer. The Node is the DOM element
that was matched in isMatch. numKeyPresses is how the number of "key presses" that should be consumed on this node. It will
be a number between 0 and numberKeyPressesToReveal. numKeyPressesToReveal lets the plugin know how many keypresses it takes to
completely reveal this node.

Options
-------