Delay a bit the svg on scroll animation and not straight after they appear on screen

i am currently developing a website where i used some svg technology! However, i have some svg icons that are animated on scroll but this happens as soon as they appear on the screen! The problem is that i need these icons to appear on the screen and instead of getting triggered straight away i need it to wait for the user to scroll i little bit more and then start animating! this is the js i used:

$(window).scroll(function() {

drawLines();

});
function drawLines(){

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

var line = val;

drawLine($(this), line);

});

}
function drawLine(container, line){

var length = 0;

var pathLength = line.getTotalLength();

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

var percentDone = 1 - (distanceFromTop / $(window).height());

length = percentDone * pathLength;

line.style.strokeDasharray = [length,pathLength].join(' ');

}