Как сделать изменения текста при скролле если используется библиотека typeit?

Хотел сделать путеводителя по странице. При достижении определенного блока с информацией, текст у путеводителя должен меняться. Для печатания текста, был использован JS c библиотекой typeit, она делает анимацию печатания. Изначально пытался сделать через ивент, но случался баг, при котором текст начинал печататься вместе с другим. Как реализовать, чтобы при достижении блока с информацией, стартовый текст стирался и начинал печататься новый?

index.html

<div class="dialog_window">
    <p id="sample_typeit"></p>
    <img src="/assets/assistant.gif" alt="assistant">
</div>

style.scss

.dialog_window{
    -ms-flex-item-align: end;
    position: sticky;
    margin-top: 20px;
    top: 20px;
    justify-content: flex-end;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    z-index: 25;

    img{
        width: 350px;
        height: 350px;
        animation: img_header_animate 2s infinite ease-in-out;
    }
    p{
        background-color: rgba(0,0,0,.7);
        color:#fff;
        padding:20px;
        font-size: 20px;
        border-radius: 30px 30px 0px 30px;
        width: 450px;
        align-self: flex-start  ;
        line-height: 30px;
        white-space: pre-wrap;
        backdrop-filter: blur(5px);
    }
}

script

<script src="/js/typeit.min.js"></script>
<script>
    new TypeIt("#sample_typeit", {
        strings: [
            "Привет, я Царевна Лягушка. ",
            "Я буду твоим путеводителем.",
            "Давай узнаем достопримечательности",
            "Курганской области."
        ],
        speed: 35,
    }).go();
</script>