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

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.
};