Delay SVG animation when scrolling

Question

I'm trying to delay a start of SVG animation. Here a link https://jsfiddle.net/h0bLgc2q/1/

<svg version="1.1" id="line" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100px" height="20px" xml:space="preserve">
  <path class="line-delay" fill="none" stroke="black" stroke-width="1" stroke-dasharray="10,10" d="M5 10 l200 0"></path>
</svg>
.line-delay {
  stroke-dasharray: 200;
  animation: draw-svg 3s linear normal;
}

@keyframes draw-svg {
  from {
    stroke-dashoffset: 200;
  }
  to {
    stroke-dashoffset: 0;
  }
}

But I want to start animation, when the user scroll to this line. So I cant understand how to do this.

basically you need to get a) the offsetTop property of your SVG element and b) the scrollTop of the page (at onscroll event or better if done through requestFrameAnimation). When b >= a then apply a class to the svg that stars the animation. Look on SO for a and b tasks — Fabrizio Calderan, Mar 10 '16 at 10:07

score 1 · Accepted Answer · edited May 23 '17 at 12:07

Based on this answer, I have modified to code accordingly to what you want to obtain. Now animation starts when you scroll at it.

Result: Jsfiddle

function isElementInViewport(elem) {
var $elem = $(elem);

// Get the scroll position of the page.
var scrollElem = ((navigator.userAgent.toLowerCase().indexOf('webkit') != -1) ? 'body' : 'html');
var viewportTop = $(scrollElem).scrollTop();
var viewportBottom = viewportTop + $(window).height();

// Get the position of the element on the page.
var elemTop = Math.round( $elem.offset().top );
var elemBottom = elemTop + $elem.height();

return ((elemTop < viewportBottom) && (elemBottom > viewportTop));
}

// Check if it's time to start the animation.
function checkAnimation() { 
var $elem = $('svg .line-delay');

// If the animation has already been started
if ($elem.hasClass('start')) return;

if (isElementInViewport($elem)) { 
    // Start the animation
    //$elem.addClass('start'); 
    $elem.attr("class", "line-delay start");
}
}

// Capture scroll events
$(window).scroll(function(){

  checkAnimation();
});

Delay SVG animation when scrolling

1 Answers1