SVG Path Animation On Scroll Using jQuery - SVG Scroll

SVG Scroll is a lightweight jQuery SVG Path Animation plugin which applies line drawing animations to the SVGs as they're scrolled into view.

See also:

• SVG Path Animation Plugin with jQuery - Lazy Line Painter
• jQuery Plugin For SVG Path Animation - SVG Path Painter

How to use it:

1. Prepare your SVG image and insert it into the document using object tag.

<object id="demo" data="demo.svg" type="image/svg+xml"></object>

2. Load the latest version of jQuery library and the jQuery SVG scroll plugin at the bottom of the document.

<script src="jquery.min.js"></script>
<script src="jquery.scroll.svg.js"></script>

3. Start drawing the path animation as the SVG becomes visible in the browser viweport.

$('#demo').ScrollSvg({
  // OPTIONE HERE
});

4. Setup plugin options.

$('#demo').ScrollSvg({

// start position to star the svg path animation
'startSlack': 100,

// fill color
'fill': 'none',

// stroke color
'stroke': '#930',

// stoke width
'strokeWidth': 3,

// transition options
'transitionProperty': 'all',
'transitionDuration': '5s',
'transitionTimingFunction': 'ease',
'transitionDelay': '0s',

});

---

This awesome jQuery plugin is developed by akifo. For more Advanced Usages, please check the demo page or visit the official website.