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

Using JavaScript with Hype
1

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!
3
typeit.hype.zip (12.0 KB)

2

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)

5 Likes
3

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

1 Like
4

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(-3)
.delete(1)
.type("e")
.move(null, { to: "END" })
.type(" let yees")
.pause(300)
.delete(2)
.type("sterday use up to muc")
.move(-4)
.type("o")
.move(null, { to: "END" })
.type("h of today.")
.pause(500)
.break({ delay: 500 })
.break({ delay: 500 })
.type("- Will Rogers")
.go();

)

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

for an example:

:root { --ti-cursor-color: #FFD479; }
2 Likes
5

There is also an TypeText extension that may be helpful