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
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)

1 Like

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!

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!

thanks, you saved my life :heart_eyes:

Im following those instruction and using an html embed element
by using this code that is default hided and using divblock element “typewriter_fx” where i can adjust the text typeface and color (without the scroll into view code snippet its working)

<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.9"></script>

    <script>
    
    const viewportObserver = new IntersectionObserver((entries, observer) => {
    
     if (entries[0].isIntersecting) {
    // Run the typed code
    //#typed-text>> '.classname'
    	var typed2 = new Typed('#typewriter_fx',{
        strings: ['text...'],
        typeSpeed: 75,
        backSpeed: 25,
        bindInputFocusEvents: true,
        loop: false,
        cursorChar: '█',
        attr: null,
      });
       observer.unobserve(document.querySelector('#typewriter_fx'))
  }
  viewportObserver.observe(document.querySelector('#typed3'))
    </script>

but with the scroll into view code snippet doesnt work, the page is blank
What am I doing wrong? Any idea appreciated.