SVG Path Animation On Scroll Using jQuery - SVG Scroll

SVG Path Animation On Scroll Using jQuery - SVG Scroll
File Size: 9.53 KB KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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:

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.