htmltypist.js
Advanced tools
demonstration | GitHub | npm | donate | @craigbuckler | craigbuckler.com
typist.js shows a typing effect which can be applied to any HTML element or parent element.
Please use the code as you wish. Tweet me @craigbuckler if you find it useful and donate toward development if you use it commercially.
The page must load the CSS and JavaScript. It can be placed anywhere but, typically, the CSS is loaded in the <head> and the JS is loaded just before the closing </body> tag:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/htmltypist.js/dist/typist.css">
<script src="https://cdn.jsdelivr.net/npm/htmltypist.js/dist/typist.js"></script>
CDN URLs are shown above but you can also npm i htmltypist.js to install via npm and use a bundler.
To apply a typing effect to any element, add class="typist" to any element:
<p class="typist">Type and retype this paragraph forever!</p>
A number of data attributes are available. For example, set data-typist-repeat="1" to type once only:
<p class="typist" data-typist-repeat="1">This paragraph is typed once.</p>
When an element has two or more child elements, their text is typed in sequence:
<p class="typist">
<span>This is typed first.</span>
<span>This is typed second.</span>
<span>This is typed third.</span>
</p>
"This is typed" is consistent across all sentences so it is never deleted.
typist.js can be dynamically applied in JavaScript by passing a single element to a new Typist object:
new Typist( document.getElementById('myelement') );
The following options can be set as HTML5 attributes on any child element or the parent to set across all child elements:
| HTML5 attribute | description |
|---|---|
class="typist" | set element to type |
data-typist-repeat="N" | repeat typing N times (default: repeat forever) |
data-typist-delay-start="M" | delay typing for M milliseconds after the element is scrolled into view (0) |
data-typist-delay-type="M" | pause for M milliseconds between each character (100) |
data-typist-delay-delete="M" | pause for M milliseconds between delete keypresses (50) |
data-typist-delay-vary="F" | randomly vary the typing speed (0.5 - characters are therefore typed between 50ms and 150ms) |
data-typist-delay-end="M" | pause for M milliseconds before typing the next item (2000) |
data-typist-delete="N" | 0 to retain existing text where possible, 1 to delete all (0) |
data-typist-cursor="CLASS" | cursor style CSS class (cursor) |
data-typist-cursor-show="N" | 0 for no cursor, 1 to show cursor until typing completes, 2 to show cursor forever (1) |
data-typist-sequence="NAME" | type elements in page DOM order - each completes one animation before the next element is typed |
The following named sequence example types each list item in turn when the first is scrolled into view:
<ul>
<li class="typist" data-typist-repeat="1" data-typist-sequence="mylist">item one</li>
<li class="typist" data-typist-repeat="1" data-typist-sequence="mylist">item two</li>
<li class="typist" data-typist-repeat="1" data-typist-sequence="mylist">item three</li>
</ul>
The following code types text three times using a delay of 300-500ms between characters once it appears in view:
<p
class="typist"
data-typist-repeat="3"
data-typist-delay-type="400"
data-typist-delay-vary="0.25">This will be typed.</p>
typist.css is optional and only required for the cursor character and animation which can be configured as necessary.
A typist class is applied to all elements being typed, so global styles can be applied if required.
FAQs
web page typing effect animation
We found that htmltypist.js demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
The White House’s Gold Eagle Initiative aims to coordinate AI-discovered vulnerabilities, validate findings, and accelerate patching across critical software.
Security News
A Shai-Hulud infection exposed Suno's source code, which shows the AI music startup stream-ripped tracks to train its models.
Security News
Vercel is formalizing a monthly release program for Next.js. The change follows React2Shell and a sharp rise in AI-assisted vulnerability discovery.