Demo Library

Whether it's to spark some inspiration or to get a better feel what TypeIt's capable of, here's a growing collection of low-fidelity CodePen demos. Have one of your own? Feel free to add it.


  • Cancel Animation on Input Focus

    Demonstrates how you can cancel an animation within a form input, in order to allow the user enter their own contents. As an added bonues, it's shown how you might restart an animation when the user shifts focus away from that input.


  • Chained Instance Methods

    An example of how TypeIt's instance methods can be used to created dynamic, life-like animations to tell a story.


  • Fill in the Blank

    Examples of how you might use TypeIt to mimic a person typing a value into an empty input. Two types of "blanks" are illustrated -- one with an actual <input>, and the other with a <span>.


  • Moving Cursor

    Shows the capabilities of TypeIt's ability to move the cursor throughout an animation.


  • Rainbow Effect

    Use TypeIt's afterStep callback method to change the color of the text after a new character is printed to the screen.


  • Remove Cursor After Completion

    Demonstrates how you can remove the cursor after an animation is complete by using the .destroy() method.


  • Reset on Click

    See how you can use TypeIt's .reset() method to replay an animation based on some user action (in this case, a click).