Animating SVG paths using Snap SVG

snap-svg-animation.js

function revealPath (path, options) {
	var revealedAttributes = {'stroke-dashoffset': 0}
			, options = options || {}
			, easing = mina[options.ease] || mina.easein
			, duration = options.duration || 1000

	path.animate(revealedAttributes, duration, easing, options.afterRevealPath)
}

function getHiddenAttributes (path) {
	var length = path.getTotalLength()

	return {
		'stroke-dasharray': length + ' ' + length
		, 'stroke-dashoffset': length
	}
}

function processPaths (paths, options) {
	var options = options || {}
			, callback = options.afterProcessPaths
			, path

	for(var i =0; i < paths.length; i++){
		path = Snap(paths[i])
		path.attr(getHiddenAttributes(path))
		revealPath(path, options)
	}

	if(typeof callback == 'function'){
		callback.call()
	}
}

function animateAllSvgPaths (selector, options) {
	var svg = Snap(selector)
			, allPaths = svg.selectAll('path')

	processPaths(allPaths, options)
}

function animateAllPaths (options) {
	var paths = document.querySelectorAll('path')
	processPaths(paths, options)
}