Немного задержите SVG при анимации прокрутки, а не сразу после ее появления на экране.

В настоящее время я разрабатываю веб-сайт, где использовал некоторые технологии SVG! Однако у меня есть несколько значков SVG, которые анимируются при прокрутке, но это происходит, как только они появляются на экране! Проблема в том, что мне нужно, чтобы эти значки появлялись на экране, и вместо того, чтобы сразу запускать их, мне нужно подождать, пока пользователь прокрутит меня еще немного, а затем начать анимацию! это js, который я использовал:

$(окно).scroll(функция() {

рисовать линии();

});

функция drawLines(){

$.each($(".red-line"), function(i, val){

вар линия = значение;

drawLine($(это), линия);

});

}

функция drawLine(контейнер, линия){

длина вар = 0;

вар pathLength = line.getTotalLength();

var distanceFromTop =Container.offset().top - $(window).scrollTop();

var процентDone = 1 - (distanceFromTop / $(window).height());

длина = процентDone * pathLength;

line.style.strokeDasharray = [длина,pathLength].join(' ');

}