Skip to content

crazy4groovy/animateSvgPath

Repository files navigation

A simple project, intended to exercise/develop this SVG path animation function called "animateSvgPath". (It's plain JavaScript, no lib dependencies.)

A functional (but ugly!) demo page is here.

animateSvgPath

animateSvgPath(selectorNodes, style, animateSeconds, delaySeconds, cbPauseSeconds, cb)

Return: ID of the cb's setTimeout (for clearTimeout if you want to cancel the cb).

  • selectorNodes - can be a CSS selector, or an array of DOM nodes (SVG paths)
    • 'path'
  • style - map of SVG path styles to be applied
    • { }
    • note: set style.sequential = true to make multiple SVG paths animate one-at-a-time!
  • animateSeconds - duration of SVG path animation
    • 5
  • delaySeconds - delay before animation starts
    • 0
  • cbPauseSeconds - delay after animation ends, before callback
    • 0
  • cb - callback when finished animation (note: all arguments are passed thru)
    • function() {}
    • note: if set to animateSvgPath, it loops!

All params are optional, sensible defaults provided (sub-points above).

Example usage:

<script type="text/javascript" src="https://rawgit.com/crazy4groovy/b9793d573e9b58e1c758a0b6379cfe22/raw/animateSvgPath.min.js"></script>
var style = { fill: 'transparent', stroke: '#FF00AA', 'stroke-width': '2', sequential: true };

//plain vanilla, looped
var cancelLoopId = animateSvgPath('svg path', style, 3, 0, 2, animateSvgPath);
// clearTimeout(cancelLoopId);

//with jQuery, looped, loading an image dynamically:
$('#svg-holder').load(
	'http://example.com/images/myPic.svg',
	animateSvgPath.bind(null, '#svg-holder path', style, 3, 0, 2, animateSvgPath)
);

Enjoy!!

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published