TypeIt Demos

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.
  • 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.

  • Custom Cursor Animation

    As of v8.7.0, TypeIt’s cursor animation relies on the Web Animation API, and permits you to customize the underlying animation.

  • 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>.

  • Using the .flush() Method

    The .flush() method can be used in place of .go() to kick off an animation you’ve built. It’s handy if you’d like to type out some one-off content that’s unknown until runtime. For example, you begin with a pre-defined animation (using .go()), and then wait to accept some user input

  • 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).