gitmyhub

typed.js

JavaScript ★ 16k updated 4mo ago

A JavaScript Typing Animation Library

A lightweight JavaScript library that animates text on a webpage as if someone is typing and erasing it live, used for dynamic headlines, landing pages, and terminal-style demos.

JavaScriptNPMCDNsetup: easycomplexity 1/5

Typed.js is a JavaScript library that creates animated typing effects on a webpage. You give it a list of text strings, and it displays them one character at a time — as if someone is typing them live — then erases and types the next one. This creates a dynamic, eye-catching effect often seen on landing pages.

You control the speed of typing and erasing, how long to pause between strings, whether to loop the animation, and whether to show a blinking cursor. There's a "smart backspace" feature that only erases the part of a sentence that differs from the next one, so if you're cycling through phrases that share a common beginning, the shared words stay put.

The library can read its text from an HTML element already on the page rather than from a JavaScript array, which is useful for search engine optimization (SEO) — search engines can still see the text even when JavaScript is disabled.

You'd use Typed.js when building a website that needs animated headline text — a startup landing page showing rotating value propositions, a portfolio site cycling through job titles, or a terminal-style demo interface. It works by being added to a page via a package manager like NPM or directly via a script tag from a CDN (content delivery network, meaning a hosted file you can link to). It's free for personal and open-source projects, with paid licenses available for commercial use. The full README is longer than what was provided.

Where it fits