TypeIt JS works in raw HTML, but not in Hype document

Hi all,

I'm trying to use the TypeIt library in a Hype document. This creates a typewriter effect for text on screen.

Here's a codepen showing the effect: https://codepen.io/dfordata/pen/zYEoQvb

However, when I try to use it inside a Hype document, nothing happens, and I get an error message saying

Uncaught TypeError: right-hand side of 'in' should be an object, got null

Here's the documentation: https://typeitjs.com/#installation

I've attached a ZIP file with my Hype doc. I'm wondering if I need to call the function differently inside of Hype.

Any insight would be appreciated. Thanks!
typeit.hype.zip (12.0 KB)

Here is a corrected version of your example showing how this can work in Hype (w/o JQuery - which isn't necessary).

typeit_revised.hype.zip (15.2 KB)


Thanks very much, this is what I was looking for!

1 Like

You can use another text output function that is more interesting.

function typedFunction(hypeDocument, element, event) {
new TypeIt(".typed", {
speed: 50,
waitUntilVisible: true,
.type("Never", { delay: 300 })
.move(null, { to: "END" })
.type(" let yees")
.type("sterday use up to muc")
.move(null, { to: "END" })
.type("h of today.")
.break({ delay: 500 })
.break({ delay: 500 })
.type("- Will Rogers")


If you want to change the color of the cursor, then use the additional style

for an example:

:root { --ti-cursor-color: #FFD479; }

There is also an TypeText extension that may be helpful