Start a javascript when section is scrolled into view

Design help Custom code
1

Hello, hope all is well with you fellow Webflowers!

I would need some help to get a javascript to start when I scroll into the section that the javascript is regarding. Right now it has already typed it out when I reach the section.

This is a basic typer.js script. But my peanut of a brain cannot fathom the onScroll concept and so on.

This is the code I am using:

<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.10/typed.min.js"></script>

<script>

  var typed = new Typed(".typed-words", {
  strings: ["Denna presentation är gjord i Webflow. Frågor? :)", ],
  typeSpeed: 75,
  backSpeed: 50,
  backDelay: 800,
  startDelay: 500,
  loop: false,
  showCursor: false,
  cursorChar: "|",
  attr: null,
});
</script>```

Thank you in advance!

All the best,
Arvid, a confused Webflower
2

You should look at the Intersection Observer API. It is a powerful tool that can be used to detect when an element comes into view on a web page. With callback functions you could trigger an animation when it scrolls into view. See IntersectionObserver - Web APIs | MDN

3

Hello Jeff,

Thank you for your fast response. I will look into that and see if I can find a solution!

Wish you an amazing day!

All the best,
Arvid Brorsson