Streaming live at 10am (PST)

Typeit.JS implementation - Please Help!

Hey Webflow fam,

so I got this script from Typeit (https://typeitjs.com/docs#options)
It’s super useful for animating typed text.

However I am trying to have it start typing only when the element becomes visible so that i can trigger it with other animations, so in order to test this I have set up the following:

  1. I made an h1 with the selector “elements” (which is referenced in the script)
  2. I pasted the script Before the body tag in settings
  3. I set the visibility of the h1 to “none”
  4. I set up a button that toggles the visibility of the h1

In the script I have used this property from their documentation:
waitUntilVisible: true

hypothesis: When the button is clicked and the h1 is unhidden, the typing animation should start
reality: the animation starts before the h1 is visible

Please help, I’m almost done with the project


Here is my site Read-Only: Webflow - Typeit.js

Here is the published site: https://typeit-js.webflow.io/

new hypothesis: Call your typeit instance on another event or trigger it manually, since its unclear what determines ‘waitUntilVisible’ is true.

thank you, any idea how to do that though?

You would run your function (the typeit one in your page) inside a new function e.g. an onclick function or whatever trigger make sense for you.