Animated javascript typing
Basic animated typing thats easy to deploy.
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>- Add
data-typerattribute 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"
<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>Open a issue or contact me on lewis.morris@gmail.com
- add start delay
- add typing error frequency
- add styling options per text block
- add speed multiplier