new TypeIt("#hero", {
speed: 50,
startDelay: 900,
})
.type("the mot versti", { delay: 100 })
.move(-8, { delay: 100 })
.type("s", { delay: 400 })
.move(null, { to: "START", instant: true, delay: 300 })
.move(1, { delay: 200 })
.delete(1)
.type("T", { delay: 225 })
.pause(200)
.move(2, { instant: true })
.pause(200)
.move(5, { instant: true })
.move(5, { delay: 200 })
.type("a", { delay: 350 })
.move(null, { to: "END" })
.type("le typing utlity")
.move(-4, { delay: 150 })
.type("i")
.move(null, { to: "END" })
.type(' on the <span class="place">internet</span>', { delay: 400 })
.delete(".place", { delay: 800, instant: true })
.type('<em><strong class="font-semibold">planet.</strong></em>', {
speed: 100,
})
.go();
TypeIt is a JavaScript library that makes it easy to create flexible, dynamic typewriter effects for the web.
At it's most basic level, just target an element, define a string, and voilĂ .
<p id="simpleUsage"></p>
new TypeIt("#simpleUsage", {
strings: "This is a simple string.",
speed: 50,
waitUntilVisible: true,
}).go();
To type multiple strings that stack on top of each other, pass an array of them.
<p id="multipleStrings"></p>
new TypeIt("#multipleStrings", {
strings: ["This is a great string.", "But here is a better one."],
speed: 50,
waitUntilVisible: true,
}).go();
Create a typewriter effect on input or textarea elements.
<fieldset>
<label for="formElement">Full Name</label>
<input type="text" id="formElement" />
</fieldset>
new TypeIt("#formElement", {
strings: "Alex MacArthur",
waitUntilVisible: true,
}).go();
Callback methods are available for before and after each string or character is typed, as well as after the entire instance is finished.
<p id="callback"></p>
new TypeIt("#callback", {
strings: ["Look, it's rainbow text!"],
afterStep: function (instance) {
instance.getElement().style.color = getRandomColor();
},
}).go();
Use the included instance methods to control the smallest details, including speed, deletions, pausing, and even cursor movement.
<p id="companionMethods"></p>
new TypeIt("#companionMethods", {
speed: 50,
waitUntilVisible: true,
})
.type("Nvver", { delay: 300 })
.move(-3)
.delete(1)
.type("e")
.move(null, { to: "END" })
.type(" let yees")
.pause(300)
.delete(2)
.type("sterday use up to muc")
.move(-4)
.type("o")
.move(null, { to: "END" })
.type("h of today.")
.pause(500)
.break({ delay: 500 })
.break({ delay: 500 })
.type("<em>- Will Rogers</em>")
.go();
The included `.exec()` method allows you to asynchronously fire code at any point during the animation.
<p id="asyncExec"></p>
new TypeIt("#asyncExec", {
waitUntilVisible: true,
})
.type("Hold up!")
.exec(async () => {
//-- Return a promise that resolves after something happens.
await new Promise((resolve, reject) => {
setTimeout(() => {
return resolve();
}, 2000);
});
})
.type(" OK, now go.")
.go();
Included `freeze()` and `unfreeze()` methods make it easy.
<p id="pauseResume"></p>
const instance = new TypeIt("#pauseResume", {
strings:
"Click the 'freeze' button to freeze and unfreeze this instance as much as you want.",
waitUntilVisible: true,
}).go();
document.querySelector("#freezeButton").addEventListener("click", function (e) {
if (instance.is("frozen")) {
instance.unfreeze();
return;
}
instance.freeze();
});
Record an animation and tweak it to your liking. (Be gracious -- this playground is a work-in-progress!)
Load the script with a script tag (a CDN link is available).
<script src="https://unpkg.com/typeit@8.7.1/dist/index.umd.js"></script>
Or, run 'npm install typeit' and import the module.
import TypeIt from "typeit";
Choose an element to target, define what to type, pick your other options, and kick it off.
new TypeIt("#element", {
strings: "This is my string!",
speed: 75,
loop: true,
}).go();
For easy usage in a wide variety of projects, TypeIt's ready to go in multiple different packages. Purchase a license, and you get to choose which implementation is best for your needs.
It's free for use in any personal or open source project (check out the code on GitHub!). For a less restrictive commercial license, choose one of the following:
Use TypeIt on a single commercial project. Includes lifetime updates.
Unlimited use on any commercial project. Includes lifetime updates.