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