typodojo.js
one script tag.
Put words in motion on any page. Add typodojo.js, mark a heading with data-typo, and it writes itself on, rises, waves or bounces, drawn from the strokes of a real font.
patience
discipline
structure
Two lines.
One in the head of your page, one on the words you want to move. It works on any element, at any size, in light or dark: the 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. The settings come with it.
| 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. The 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 | The 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 until the words scroll into sight. |
| data-typo-motion | JSON | A saved motion from the studio, every setting at once. |
House fonts
Typo Display, Typo Nib and Typo Textura are inside the library. Nothing else to load.
Your fonts
In the studio, open Make it move and press Strokes for typodojo.js. Host the file next to your page and point data-typo-font at it.
Saved motions
Motions you save wait on Your fonts, each with its attribute line ready to copy.
Still for anyone who asks
With reduced motion turned on, words appear finished, with no movement at all.
Readable everywhere
The text stays in the page for screen readers and search engines. Only the drawing moves.
Web only
Motion belongs to screens. The fonts you download stay still, as fonts should.