Настройка запуска SVG на прокрутке

Question

У меня есть анимированная временная шкала svg, которая входит в последний раздел.

http://chalke-design-ebbca1.webflow.io/our-process

анимация начинается, как только страница загружена, но я хочу, чтобы вызвать его только тогда, когда пользователи прокручивается этой конкретной части страницы.

Может кто-нибудь помочь!

Спасибо заранее!

Answer 1

Возможно, вам нужно что-то, что изложено в этих вопросах: Check if element is visible on screen или Check if element is visible after scrolling, то есть вы проверяете, находится ли верхнее смещение элемента в вопросе на границах экрана, а затем запустите анимацию, если это условие истинно.

var theElementInQuestion = document.getElementById("theElementInQuestion"); 

if (isScrolledIntoView(theElementInQuestion)) { 
    startAnimation(); 
} 

function isScrolledIntoView(elem) 
{ 
    var docViewTop = $(window).scrollTop(); 
    var docViewBottom = docViewTop + $(window).height(); 

    var elemTop = $(elem).offset().top; 
    var elemBottom = elemTop + $(elem).height(); 

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop)); 
}