I only want Typed.js animation to play when scrolled into view

Hi! I’m using Typed.js to create headings for my website, but I only want the typewriter effect to start when the text scrolls into view. Is there a way to code this? If not, I’m guessing a workaround with using a Lottie might work.

here is the website

Much appreciated, thanks!

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Thank you, it’s not working properly for me though.

const viewportObserver = new IntersectionObserver((entries, observer) => {

  if (entries[0].isIntersecting) {

    // Run the typed code

    var typed2 = new Typed('#typed-words', {

      strings: ['Case Studies'],

      typeSpeed: 70,

      loop: false,

      showCursor: true,

      cursorChar: "|",

      attr: null,





this is what I have. Am I missing something? Thank you!

You have to update the selectors in the code to match the element on your page.

That means the class or ID right? It’s matching!