Typer

How it Works.

Controls

There are controls for continuous or only once animation and the color and background of the highlight can be styled.

Animation can begin on page load, after a delay or when the stack comes into view

Tag Setting

You can set Typer to be either paragraph text or any heading level you want from h1 though h6

Fixed Text

You can add lead in and following text that is not animated.

This is a great time saver and saves replication in the animated text input

Delimiters

Choose from a variety of delimiters to separate your animated phrases. If you need to use a comma in your text, just just a different separator character as the delimiter

One Rule

DO NOT attempt to put HTML of any sort into Typer, it is for pure text only.

This includes changing the color of certain letters or words within the text as this will introduce a span into the text, or introducing new lines by pressing enter. Typer is for a single block of text per stack only.

Typer will just output the code and not obey it as HTML, nothing will break but it won't look pretty

Smart Replace

When you have a series of words or phases specified, Smart Replace will just highlight and replace those characters and words that are changed from one phase to the next.

This is exactly the same as if you were highlighting and retyping the text yourself. See below for an example of how it works.

Example

Using Smart Replace we enter the phrases to be displayed separated by commas (or other separator character selected in the settings.

So if we enter this:

Pizza is great, Pizza is tasty, Pizza is fun, See Pizza Cake!

Then just with its default settings Typer will produce this:

Lets add style

We can now add some style and color, even some static lead in text.

The timing and delays can be adjusted a little too.