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
1 Like
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!

6

thanks, you saved my life :heart_eyes:

7

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.