I am in the process of building a website that incorporates SVG technology. My issue is with some SVG icons that have animated effects when scrolling, but the animation triggers as soon as they come into view. What I really need is for these icons to start animating only after the user has scrolled a bit further. Below is the JavaScript code I am currently using:
$(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(' ');
}