Using Elementor, I have a slide widget with 2 slides, each slide has text that gets typed out using a typewriter effect. The problem is when the slide widget loads it runs the typing effect on all slides, so when you scroll to the second slide the text has already been typed out, so I need to only run this effect when the slide is active. Is there a way to only run the JS code below when the slide is active?

This is the slide class when not active:
elementor-repeater-item-279a19f swiper-slide swiper-slide-next

This is when active:
elementor-repeater-item-279a19f swiper-slide swiper-slide-active

This is the JS:

let textLength = 0;
let text = 'What follows is Lorem ipsum translated to English: But I must explain to you how all this mistaken idea of reprobating pleasure and extolling pain arose.';

function type() {
    let textChar = text.charAt(textLength++);
    let paragraph = document.getElementById("typed");
    let charElement = document.createTextNode(textChar);
    paragraph.appendChild(charElement);
    if(textLength < text.length+1) {
        setTimeout('type()', 50);
    } else {
        text = '';
    }
}

document.addEventListener("DOMContentLoaded", function() {
    type();
});