typodojo.js
one script tag.
Add typodojo.js, mark a heading with data-typo, and it writes itself on, rises, waves or bounces in a real font's strokes.
patience
discipline
structure
Two lines.
One in your page's head, one on the words. Any element, any size; strokes take the text color.
<script src="https://typodojo.com/typodojo.js" defer></script>
<h1 data-typo="write">hello</h1>
<h2 data-typo="write" data-typo-font="nib">hello</h2>
<p data-typo="rise" data-typo-font="self">any font you already use</p>Every setting is an attribute.
Design a motion on the animation page or in the studio, press Copy for typodojo.js, and paste.
| Attribute | Values | What it does |
|---|---|---|
| data-typo | write, ink, weight, wave, bounce, rise, type | The motion. |
| data-typo-font | display, nib, textura, self, or a link to your strokes file | Which letters move. House fonts are built in. self moves your page's own font as live text. |
| data-typo-duration | milliseconds | How long the whole word takes. |
| data-typo-stagger | milliseconds | Delay between letters. Time is spacing. |
| data-typo-ease | smooth, snappy, springy, linear | How each letter arrives. |
| data-typo-loop | present or absent | Repeat. For wave and weight. |
| data-typo-play | view, load, hover | When it plays. View waits for the words to scroll in. |
| data-typo-motion | JSON | A saved studio motion, every setting at once. |
House fonts
Typo Display, Typo Nib and Typo Textura are built in. Nothing else to load.
Your fonts
In the studio, open Make it move, press Strokes for typodojo.js, host the file by your page and point data-typo-font at it.
Saved motions
Saved motions wait on Your fonts, each attribute line ready to copy.
Still for anyone who asks
With reduced motion on, words appear finished. No movement.
Readable everywhere
Text stays in the page for screen readers and search. Only the drawing moves.
Web only
Motion belongs to screens. Downloaded fonts stay still, as fonts should.