Typeit.JS implementation - Please Help!

Design help Custom code
1

Hey Webflow fam,

so I got this script from Typeit (Documentation | TypeIt)
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/

2

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

3

thank you, any idea how to do that though?

4

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.