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(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).
<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(
'https://example.com/images/myPic.svg',
animateSvgPath.bind(null, '#svg-holder path', style, 3, 0, 2, animateSvgPath)
);
Enjoy!!