ekshen
(Emily Shen)
February 3, 2022, 9:57pm
#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 )
ekshen
(Emily Shen)
February 5, 2022, 5:56am
#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!
webdev
(Jeff S)
February 7, 2022, 11:41pm
#4
You have to update the selectors in the code to match the element on your page.
ekshen
(Emily Shen)
February 9, 2022, 12:05am
#5
That means the class or ID right? It’s matching!