Delay the Headline Typing effect until scrolled into view?

[devinelston]

I have one of the V2 Headline elements with Typing enabled. Is there a way to have it “wait” to start looping through the typing animation until the user has scrolled that element into view?

For example, I have a fairly long page – and have placed the Typing Headline far enough down that a user won’t see it until they’ve scrolled a few times. So, I don’t want the animation to start on page load because it would finish before the user ever got to it (and I don’t want to let the animation loop continually for a variety of other reasons).

I know other animated elements have offset controls, but the headline doesn’t. So, is there a way to achieve something similar with some simple CSS or JS? (I’ve tried a variety of things, but feel like I must be missing something obvious).

Thanks!

[christopher]

Hi Devin,

Unfortunately, that is not possible with the headline element. Please kindly consider that the typing animation of the headline is intended for the above the fold and big bold titles at the beginning of the page originally. You have a specific use case which is not what the original element was designed for.

The customization that you asked for is a complicated process of finding the actual code in the whole JS file of the theme, inject a custom event there to trigger the animation, detect when the element goes above the fold after scrolling and finally trigger that custom event to in turn trigger the type animation.

The customization process above is outside of our support scope, and unfortunately, we can not be of a help. We suggest that you hire a developer to implement the functionality.

The only thing that I can suggest despite the fact that you already mentioned is that you enable the loop animation to continue the type effect.

Thank you for your understanding.