Big White Duck

Written By:

Scroll Down to Find out More


How it Works.

Stacks Image 1407


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

Stacks Image 1400

Tag Setting

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

Stacks Image 1469

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

Stacks Image 1413


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

Stacks Image 1425

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

Stacks Image 1435

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.

Stacks Image 1312


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:

Stacks Image 1360

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.