SVG Path example

example.js

var TweenLite = require("TweenLite"),
	  SVGPath = require("../utils/SVGPath.js");

var specticles = $("#specticles"),
		bridge = $("#bridge"),
		lenses = $(".lense"),
		frameLeft = $("#frameLeft"),
		frameRight = $("#frameRight"),
		tl = new TimelineMax();

	$(".try-on-btn").on("mouseenter", function () {

		SVGPath.set(bridge, ["50%", "50%"]);
		SVGPath.set(lenses, ["50%", "50%"]);
		SVGPath.set(frameLeft, ["100%", "100%"]);
		SVGPath.set(frameRight, ["0%", "0%"]);

		SVGPath.to(bridge, 0.25, ["0%", "100%"], 0);
		SVGPath.to(lenses, 0.5, ["0%", "100%"], 0.25);
		SVGPath.to(frameLeft, 0.5, ["0%", "100%"], 0.5);
		SVGPath.to(frameRight, 0.5, ["0%", "100%"], 0.5);
	});

Spectacles.svg

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="spectacles" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="47px" height="47px" viewBox="0 0 47 47" enable-background="new 0 0 47 47" xml:space="preserve">
<path id="frameRight" class="frame" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" d="M41,21.5h6"/>
<path id="frameLeft" class="frame" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" d="M0,21.5h6"/>
<path id="bridge" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" d="M20.7,19c0,0,2.7-3,5.4,0"/>
<path id="lenseRight_1_" class="lense" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" d="M13.5,29C9.4,29,6,25.6,6,21.5
	c0-4.1,3.3-7.5,7.5-7.5c4.1,0,7.5,3.3,7.5,7.5C20.9,25.6,17.6,29,13.5,29z"/>
<path id="lenseRight_2_" class="lense" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" d="M33.6,29c-4.1,0-7.5-3.3-7.5-7.5
	c0-4.1,3.3-7.5,7.5-7.5s7.5,3.3,7.5,7.5C41,25.6,37.7,29,33.6,29z"/>
</svg>

SVGPath.js

var TweenLite = require("TweenLite");
var proxy = {};


function getSize(ratio, total) {
	return total * ratio;
}

function getProps(el, values) {

	if (values.length < 2) {
		values.unshift("0%");
	}

	if (values.length > 2) {
		values.splice(2);
	}

	if (el.length) {
		el = el[0];
	}

	var segmentStartRatio = parseInt(values[0], 10) * 0.01,
		segmentEndRatio = parseInt(values[1], 10) * 0.01 - segmentStartRatio,
		strokeLength = el.getTotalLength(),
		segmentStart = getSize(segmentStartRatio, strokeLength),
		segmentEnd =  getSize(segmentEndRatio, strokeLength);

	return {
		segmentStartRatio : segmentStartRatio,
		segmentEndRatio : segmentEndRatio,
		strokeLength : strokeLength,
		strokeDashoffset : segmentStart,
		strokeDasharray :  segmentEnd
	};
}

function PathTween (el, time, props, timeline) {

	var strokeLength = props.strokeLength,
		delay = props.delay !== undefined ? props.delay : 0,
		tween,
		proxy = {
			strokeDashoffset : el.style.strokeDashoffset !== "" ? el.style.strokeDashoffset : 0,
			strokeDasharray : el.style.strokeDasharray !== "" ? el.style.strokeDasharray : props.strokeLength
		};


	if (props.end && props.start === undefined) {
		tween = TweenLite.to(proxy, time,
			{
				strokeDashoffset : props.end.strokeDashoffset,
				strokeDasharray: props.end.strokeDasharray,
				onUpdate: update,
				ease: Sine.easeInOut,
				delay: delay
			});
	} else if (props.start && props.end === undefined) {
		tween = TweenLite.from(proxy, time,
			{
				strokeDashoffset : props.start.strokeDashoffset,
				strokeDasharray: props.start.strokeDasharray,
				onUpdate: update,
				ease: Sine.easeInOut,
				delay: delay
			});
	} else if (props.start && props.end) {
		tween = TweenLite.fromTo(proxy, time,
			{
				strokeDashoffset : props.start.strokeDashoffset,
				strokeDasharray: props.start.strokeDasharray
			},
			{
				strokeDashoffset : props.end.strokeDashoffset,
				strokeDasharray: props.end.strokeDasharray,
				onUpdate: update,
				ease: Sine.easeInOut,
				delay: delay
			});
	} else {
		throw "You need start or end props to tween with....";
	}

	function update() {
		el.style.strokeDashoffset = proxy.strokeDashoffset;
		el.style.strokeDasharray = proxy.strokeDasharray + ' ' + strokeLength;
	}

	return tween;
}

module.exports.set = function (el, segment) {
	var props = getProps(el, segment);
	for (var i = 0, l = el.length, item; i< l; i++) {
		item = el[i];
		item.style.strokeDashoffset = -props.strokeDashoffset;
		item.style.strokeDasharray = props.strokeDasharray + ' ' + props.strokeLength;

		//console.log("segments", item.style.strokeDashoffset, item.style.strokeDasharray);
	}
};


module.exports.to = function (el, time, values, delay) {

	// SVGPath.from(bridge, 0.25, "50% 50%", 0.5);

	for (var i = 0, l = el.length, item; i< l; i++) {
		item = el[i];

		var props = getProps(item, values),
			endProps = {
				strokeDashoffset : props.strokeDashoffset,
				strokeDasharray : props.strokeDasharray
			},
			tween = new PathTween(item, time, {end: endProps, strokeLength: props.strokeLength, delay: delay});
	}

};

module.exports.from = function (el, time, values, delay) {

	for (var i = 0, l = el.length, props, item; i< l; i++) {
		item = el[i];

		props = getProps(item, values);

		var startProps = {
				strokeDashoffset : props.strokeDashoffset,
				strokeDasharray : props.strokeDasharray
			},
			endProps = {
				strokeDashoffset : item.style.strokeDashoffset !== "" ? item.style.strokeDashoffset : 0,
				strokeDasharray : item.style.strokeDasharray !== "" ? item.style.strokeDasharray : startProps.strokeLength
			},
			tween = new PathTween(item, time, {start:startProps, strokeLength: props.strokeLength, delay: delay});
	}
};

module.exports.fromTo= function (el, time, values, delay) {
	// TODO : make fromTo work... when you need it to.
};