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