Enabling Typed.JS on Scroll

Hello Everyone,

I’ve successfully implemented typed.js on my portfolio site (https://preview.webflow.com/preview/okraco?utm_source=okraco&preview=403035bc6b669105800b58b369766595). I looked at both http://typedjs.webflow.io/ and https://webflow.com/website/typed-js (went with the latter technique).

The element is below the fold and I attempted to enable it on scroll. I looked at and used this Call Javascript as scroll action - #5 by bartekkustra?

However, I seem to be doing something wrong; I’m assuming I named the function to start on scroll incorrectly but can’t seem to figure it out through trial and error.

Thanks in advance for any help.

Hi @jayokra!,
Welcome to the forum :smiley:

I am not a Javascript expert, never the less, I think that naming your animation ‘Webflow’ is not a great idea. Try changing that to something unique and see if it helps.

Thanks Aviv! I took the original js code from here: https://webflow.com/website/typed-js so let me double check what it’s all doing.

1 Like

Has anyone figured out how to trigger the typed.js when the div is scrolled into view? Any help as to how to implement this would be greatly appreciated!

There is a web api that helps solving problems like this. Checkout Intersection Observer API - Web APIs | MDN

It is also easy to do using GSAP’s scroll trigger. ScrollTrigger - Plugins - GreenSock