Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

anitype

lewis-morris21MIT0.0.1

Animated typing library

animation, animated-typing

readme

anitype

Animated javascript typing

Basic animated typing thats easy to deploy.

Animation example

Import via CDN

Add this tag to the head of your html file.


<script src="https://cdn.jsdelivr.net/gh/lewis-morris/anitype@main/anitype.js" defer></script>

`

Set elements to animate

  • Add data-typer attribute to any element to animate it.
  • Split the innerText with pipes ( | ) to animate multiple lines.
  • Alternatively you can set the text with data-text="my animated text|just wont stop typing"

Example HTML

<html>
    <head>
        <script src="https://cdn.jsdelivr.net/gh/lewis-morris/anitype@main/anitype.js" defer></script>

    </head>
    <body style="text-align: center;">
        <h2 data-typer data-text="I can animate|I make mistakes|We're not all perfect"></h2>
    </body>
</html>

`

Support or Contact

Open a issue or contact me on lewis.morris@gmail.com

Todo

  • <input disabled="" type="checkbox"> add start delay
  • <input disabled="" type="checkbox"> add typing error frequency
  • <input disabled="" type="checkbox"> add styling options per text block
  • <input disabled="" type="checkbox"> add speed multiplier