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

Design help Custom code
#1

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
https://www.emilyshen.co
https://preview.webflow.com/preview/emilyshen?utm_medium=preview_link&utm_source=designer&utm_content=emilyshen&preview=90f951e13707503449b0083744923c0c&workflow=preview

Much appreciated, thanks!

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

#2
#3

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,

    });


    observer.unobserve(document.querySelector('#typed-words'))
  }

})

viewportObserver.observe(document.querySelector('#typed3'))

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

#4

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

#5

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