How to prevent svg on scroll animation from triggering as soon as it appears on screen

[stillaraki]

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() {
drawLines3();
});

//If you have more than one SVG per page this will pick it up
function drawLines3(){
 $.each($(".red-line3"), function(i, val){
 var line = val;
 drawLine3($(this), line);
 });
}

//draw the line
function drawLine3(container, line){
 var length = 0;
 var pathLength = line.getTotalLength() * 2;
 var distanceFromTop= container.offset().top - $(window).scrollTop();
 var percentDone = 1 - (distanceFromTop / $(window).height());
 length = percentDone * pathLength;
 line.style.strokeDasharray = [length,pathLength].join(' ');
 //console.log("strokeDasharray: "+[length,pathLength].join(' '));
}

[stwebonlinebranding]

$(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 - 500;
line.style.strokeDasharray = [length,pathLength].join(' ');
}

[stillaraki]

Unfortunately this does not fix the problem! I’ve tried it before. All it does is make the svg behave all weird instead delaying it from animating! I cant seem to get it right

[stwebonlinebranding]

might be you are up with minor error into your coding. Just do a proof reading once