EY global 300x600 done, but without expanding?

@@ -109,7 +109,7 @@
 					<ul>
 					<ul>
 						<li class="dot1"></li>
 						<li class="dot1"></li>
 						<li class="dot2"></li>
 						<li class="dot2"></li>
-						<li class="dot3"></div>
+						<li class="dot3"></li>
 					</ul>	
 					</ul>	
 
 
 				</div>	
 				</div>	

-<svg id="Graphics" xmlns="http://www.w3.org/2000/svg" width="142.93" height="183.74" viewBox="0 0 142.93 183.74"><defs><style>.cls-1{fill:#ffd400;}</style></defs><title>ey-yellow-square</title><path class="cls-1" d="M617.33,203h6.72v-6.72h-6.72V203Zm12.44,0h6.72v-6.72h-6.72V203Zm12.44,0h6.72v-6.72h-6.72V203ZM617.34,44.46v146.1h6.72V50.1L753.53,27.27l0,169H654.64V203H760.23l0-183.74Z" transform="translate(-617.33 -19.26)"/></svg>
\ No newline at end of file

+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="348.92" viewBox="0 0 300 348.92"><defs><style>.cls-1{fill:url(#linear-gradient);}</style><linearGradient id="linear-gradient" x1="150" y1="348.92" x2="150" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#231f20" stop-opacity="0"/><stop offset="1"/></linearGradient></defs><title>gradient</title><rect class="cls-1" width="300" height="348.92"/></svg>
\ No newline at end of file

+/*!
+ * VERSION: 0.0.10
+ * DATE: 2016-02-11
+ * UPDATES AND DOCS AT: http://greensock.com
+ *
+ * @license Copyright (c) 2008-2016, GreenSock. All rights reserved.
+ * DrawSVGPlugin is a Club GreenSock membership benefit; You must have a valid membership to use
+ * this code without violating the terms of use. Visit http://greensock.com/club/ to sign up or get more details.
+ * This work is subject to the software agreement that was issued with your membership.
+ * 
+ * @author: Jack Doyle, jack@greensock.com
+ */
+var _gsScope="undefined"!=typeof module&&module.exports&&"undefined"!=typeof global?global:this||window;(_gsScope._gsQueue||(_gsScope._gsQueue=[])).push(function(){"use strict";function a(a,b,c,d){return c=parseFloat(c)-parseFloat(a),d=parseFloat(d)-parseFloat(b),Math.sqrt(c*c+d*d)}function b(a){return"string"!=typeof a&&a.nodeType||(a=_gsScope.TweenLite.selector(a),a.length&&(a=a[0])),a}function c(a,b,c){var d,e,f=a.indexOf(" ");return-1===f?(d=void 0!==c?c+"":a,e=a):(d=a.substr(0,f),e=a.substr(f+1)),d=-1!==d.indexOf("%")?parseFloat(d)/100*b:parseFloat(d),e=-1!==e.indexOf("%")?parseFloat(e)/100*b:parseFloat(e),d>e?[e,d]:[d,e]}function d(c){if(!c)return 0;c=b(c);var d,e,f,g,i,j,k,l=c.tagName.toLowerCase();if("path"===l){g=c.style.strokeDasharray,c.style.strokeDasharray="none",d=c.getTotalLength()||0;try{e=c.getBBox()}catch(m){}c.style.strokeDasharray=g}else if("rect"===l)d=2*c.getAttribute("width")+2*c.getAttribute("height");else if("circle"===l)d=2*Math.PI*parseFloat(c.getAttribute("r"));else if("line"===l)d=a(c.getAttribute("x1"),c.getAttribute("y1"),c.getAttribute("x2"),c.getAttribute("y2"));else if("polyline"===l||"polygon"===l)for(f=c.getAttribute("points").match(h)||[],"polygon"===l&&f.push(f[0],f[1]),d=0,i=2;i<f.length;i+=2)d+=a(f[i-2],f[i-1],f[i],f[i+1])||0;else"ellipse"===l&&(j=parseFloat(c.getAttribute("rx")),k=parseFloat(c.getAttribute("ry")),d=Math.PI*(3*(j+k)-Math.sqrt((3*j+k)*(j+3*k))));return d||0}function e(a,c){if(!a)return[0,0];a=b(a),c=c||d(a)+1;var e=g(a),f=e.strokeDasharray||"",h=parseFloat(e.strokeDashoffset),i=f.indexOf(",");return 0>i&&(i=f.indexOf(" ")),f=0>i?c:parseFloat(f.substr(0,i))||1e-5,f>c&&(f=c),[Math.max(0,-h),Math.max(0,f-h)]}var f,g=document.defaultView?document.defaultView.getComputedStyle:function(){},h=/(?:(-|-=|\+=)?\d*\.?\d*(?:e[\-+]?\d+)?)[0-9]/gi;f=_gsScope._gsDefine.plugin({propName:"drawSVG",API:2,version:"0.0.10",global:!0,overwriteProps:["drawSVG"],init:function(a,b,f){if(!a.getBBox)return!1;var g,h,i,j=d(a)+1;return this._style=a.style,b===!0||"true"===b?b="0 100%":b?-1===(b+"").indexOf(" ")&&(b="0 "+b):b="0 0",g=e(a,j),h=c(b,j,g[0]),this._length=j+10,0===g[0]&&0===h[0]?(i=Math.max(1e-5,h[1]-j),this._dash=j+i,this._offset=j-g[1]+i,this._addTween(this,"_offset",this._offset,j-h[1]+i,"drawSVG")):(this._dash=g[1]-g[0]||1e-6,this._offset=-g[0],this._addTween(this,"_dash",this._dash,h[1]-h[0]||1e-5,"drawSVG"),this._addTween(this,"_offset",this._offset,-h[0],"drawSVG")),!0},set:function(a){this._firstPT&&(this._super.setRatio.call(this,a),this._style.strokeDashoffset=this._offset,1===a||0===a?this._style.strokeDasharray=this._offset<.001&&this._length-this._dash<=10?"none":this._offset===this._dash?"0px, 999999px":this._dash+"px,"+this._length+"px":this._style.strokeDasharray=this._dash+"px,"+this._length+"px")}}),f.getLength=d,f.getPosition=e}),_gsScope._gsDefine&&_gsScope._gsQueue.pop()();
\ No newline at end of file

+/*!
+ * VERSION: 1.0.1
+ * DATE: 2016-04-28
+ * 
+ * Requires:
+ *     GSAP TweenMax
+ *     GASP drawSVG Plugin ()
+ *          This work is subject to the terms at http://greensock.com/standard-license or for
+ *          Club GreenSock members, the software agreement that was issued with your membership.
+ *
+ * @license Copyright (c) 2016, Tenzing Communications Inc. All rights reserved.
+ * 
+ * @author: Dan Rempel, dan@gotenzing.com
+ 
+ * Usage Example:
+ *    var myEySvg = initEySvgFrame(10, 196, 193); // frame line weight, width, height
+ *    document.getElementById("body").appendChild(myEySvg);
+ *    animateEyFrame(2); // delay in seconds
+ *    animateGradient(2); // delay in seconds
+ *    animateFill(2); // delay in seconds
+ * 
+ **/
+
+var eySvg;var eyStroke;var eyDot1;var eyDot2;var eyDot3;var eyGradient;var eyFill;var tl;var eyStrokeWeight;var eySvgHeight;var eySvgWidth;var eyAngleHeight;var eyDotSpacing;var eyDotDuration=.2;var eyFrameDuration=1;var eyGradientDuration=1;var eyFillDuration=1;var eyColor="#FFD400";var svgNS="http://www.w3.org/2000/svg";var initEySvgFrame=function(a,b,c){tl=new TimelineMax();eyDotSpacing=Math.floor(a*8.5/10);eyStrokeWeight=a;eySvgWidth=b;eySvgHeight=c;var d=10*Math.PI/180;eyAngleHeight=Math.tan(d)*(b-a);var e=document.createElementNS(svgNS,"svg");e.setAttribute("id","ey-frame");e.setAttribute("width",b+"px");e.setAttribute("height",c+"px");e.setAttribute("viewBox","0 0 "+eySvgWidth+" "+eySvgHeight);var f=document.createElementNS(svgNS,"defs");e.appendChild(f);var g=document.createElementNS(svgNS,"linearGradient");g.setAttribute("id","linear-gradient");g.setAttribute("x1","0%");g.setAttribute("x2","0%");g.setAttribute("y1","0%");g.setAttribute("y2","100%");f.appendChild(g);var h;h=createStop({id:"stop-1",offset:"0%",color:"Black",opacity:".7"});g.appendChild(h);h=createStop({id:"stop-2",offset:"100%",color:"Black",opacity:"0"});g.appendChild(h);eyGradient=createShape("ey-gradient","url(#linear-gradient)");e.appendChild(eyGradient);eyDot1=createDot(1);e.appendChild(eyDot1);eyDot2=createDot(2);e.appendChild(eyDot2);eyDot3=createDot(3);e.appendChild(eyDot3);eyStroke=createPath("ey-stroke");eyStroke.setAttribute("d"," M "+((eyStrokeWeight+eyDotSpacing)*3)+" "+(eySvgHeight-a/2)+" H "+(b-a/2)+" V "+a/1.5+" L "+a/2+" "+(eyAngleHeight+a/2)+" V "+(c-a-eyDotSpacing));e.appendChild(eyStroke);eyFill=createShape("ey-gradient",eyColor);e.appendChild(eyFill);return e};var animateEyFrame=function(a){var b=0;tl.fromTo(eyDot1,eyDotDuration,{drawSVG:"0"},{drawSVG:"0 "+(b+=(eyStrokeWeight+eyDotSpacing)),ease:Power1.easeInOut,delay:a});tl.fromTo(eyDot2,eyDotDuration,{drawSVG:"0"},{drawSVG:"0 "+(b+=(eyStrokeWeight+eyDotSpacing)),ease:Power1.easeInOut});tl.fromTo(eyDot3,eyDotDuration,{drawSVG:"0"},{drawSVG:"0 "+(b+=(eyStrokeWeight+eyDotSpacing)),ease:Power1.easeInOut});tl.fromTo(eyStroke,eyFrameDuration,{drawSVG:"0"},{drawSVG:"0 100%",ease:Power1.easeIn})};var animateGradient=function(a){tl.fromTo(eyGradient,.5,{opacity:0},{opacity:1,delay:a})};var animateFill=function(a){tl.fromTo(eyFill,.5,{y:eySvgHeight},{y:0,ease:Power2.easeIn,delay:a})};var createPath=function(a){var b=document.createElementNS(svgNS,"path");b.setAttribute("id",a);b.setAttribute("fill","none");b.setAttribute("stroke",eyColor);b.setAttribute("stroke-width",eyStrokeWeight);b.setAttribute("stroke-miterlimit","10");return b};var createDot=function(a){var b=createPath("ey-dot"+a);b.setAttribute("d"," M "+((eyStrokeWeight+eyDotSpacing)*(a-1))+" "+(eySvgHeight-eyStrokeWeight/2)+" h "+eyStrokeWeight);return b};var createShape=function(a,b){var c=document.createElementNS(svgNS,"path");c.setAttribute("id",a);c.setAttribute("fill",b);c.setAttribute("d"," M 0 "+(eySvgHeight)+" H "+(eySvgWidth)+" V 2 "+" L 0 "+(eyAngleHeight+2)+" Z ");return c};var createStop=function(a){var b=document.createElementNS(svgNS,"stop");b.setAttribute("id",a.id);b.setAttribute("offset",a.offset);b.setAttribute("stop-color",a.color);b.setAttribute("stop-opacity",a.opacity);return b};
\ No newline at end of file

@@ -12,16 +12,15 @@ Requires GSAP TweenMax
 var tl;
 var tl;
 
 
 /**
 /**
-svgURL:String - URL to the EY yellow square that will be used for the frame
+myWeight:Number - the width of the line of the frame in pixels
 myWidth:Number - width of the desired frame in pixels measured from the outside to the outside
 myWidth:Number - width of the desired frame in pixels measured from the outside to the outside
 myHeight:Number - height of the desired frame in pixels measured from the peak to the bottom
 myHeight:Number - height of the desired frame in pixels measured from the peak to the bottom
-duration:Number - seconds the animation will take to elapse from start to finish
+myDuration:Number - seconds the animation will take to elapse from start to finish
+
+Returns div element containing the EY Div Frame. It will automatically animate in.
 **/
 **/
 var drawEyDivFrame = function (myWeight, myWidth, myHeight, myDuration)
 var drawEyDivFrame = function (myWeight, myWidth, myHeight, myDuration)
 {
 {
-    //draw first three dots
-    // can I do it with divs?
-    
     tl = new TimelineMax();
     tl = new TimelineMax();
 
 
     var div = document.createElement("div");
     var div = document.createElement("div");
@@ -32,53 +31,85 @@ var drawEyDivFrame = function (myWeight, myWidth, myHeight, myDuration)
     div.style.overflow = "hidden";
     div.style.overflow = "hidden";
     div.style.left = 10+"px";
     div.style.left = 10+"px";
     div.style.top = 10+"px";
     div.style.top = 10+"px";
-    document.body.appendChild(div);    
     
     
     var myColor = "#FFD400";
     var myColor = "#FFD400";
-    var dotSpacing = myWeight*5.72/6.72; // EY ratio of weight to spacing
+    var dotSpacing = Math.floor(myWeight*8/10); // EY ratio of weight to spacing
     var myX = 0;
     var myX = 0;
     var myY = 0;
     var myY = 0;
-    var myRadians = 10 * (Math.PI/180);
-    var angleHeight = Math.tan(myRadians)*myWidth - myWeight;
+    var myRadians = 10 * Math.PI / 180; // EY angles up at 10 degrees
+    var angleHeight = Math.tan(myRadians)*myWidth - myWeight; // height of the shoulder to top of head
     var myOrigin = "bottom left";
     var myOrigin = "bottom left";
     var myDelay = 0;
     var myDelay = 0;
+    var myEase = Power1.easeInOut; //ease:Linear.easeNone
     
     
     //////// calculate the duration of each line
     //////// calculate the duration of each line
-    var perimeter = (myWidth + myHeight) * 2;
-    
     var myLength = myWeight;
     var myLength = myWeight;
-    var myDotDuration = myLength*myDuration/perimeter;
+    myDuration = myDuration/2; // want to use half the duration for the dots.
+    
+    var dotsCombinedLength = (myWeight + dotSpacing) * 3;
+    var myDotDuration = myLength*myDuration/dotsCombinedLength;
+    var myDotDelay = dotSpacing*myDuration/dotsCombinedLength; // delay after dot is drawn
+
+    var perimeter = (myWidth + myHeight)*2 - angleHeight - myWeight*4 -dotsCombinedLength;
+    
+    
+    
+    
     var dot1 = drawLine({color:myColor, weight:myWeight, fromX:myX,                        
     var dot1 = drawLine({color:myColor, weight:myWeight, fromX:myX,                        
-        fromY:myHeight-myWeight, length:myLength, angle:0, origin:myOrigin, duration:myDotDuration}, div, tl, myDelay);
+        fromY:myHeight-myWeight, length:myLength, angle:0, origin:myOrigin, duration:myDotDuration}, div, tl, myDelay, myEase);
     var dot2 = drawLine({color:myColor, weight:myWeight, fromX:myX+=(dotSpacing+myWeight), 
     var dot2 = drawLine({color:myColor, weight:myWeight, fromX:myX+=(dotSpacing+myWeight), 
-        fromY:myHeight-myWeight, length:myWeight, angle:0, origin:myOrigin, duration:myDotDuration}, div, tl, myDelay);
+        fromY:myHeight-myWeight, length:myLength, angle:0, origin:myOrigin, duration:myDotDuration}, div, tl, myDotDelay, myEase);
     var dot3 = drawLine({color:myColor, weight:myWeight, fromX:myX+=(dotSpacing+myWeight), 
     var dot3 = drawLine({color:myColor, weight:myWeight, fromX:myX+=(dotSpacing+myWeight), 
-        fromY:myHeight-myWeight, length:myWeight, angle:0, origin:myOrigin, duration:myDotDuration}, div, tl, myDelay);
+        fromY:myHeight-myWeight, length:myLength, angle:0, origin:myOrigin, duration:myDotDuration}, div, tl, myDotDelay, myEase);
         
         
+    //tl.addCallback( callback:reversedToDots, position:myDuration, params:[], scope:tl );
+    tl.addCallback( reversedToDots, myDuration+myDotDelay, [], tl );
+
     myLength = myWidth-myX;
     myLength = myWidth-myX;
     var lineBottom = drawLine({color:myColor, weight:myWeight, fromX:myX+=(dotSpacing+myWeight), 
     var lineBottom = drawLine({color:myColor, weight:myWeight, fromX:myX+=(dotSpacing+myWeight), 
-        fromY:myHeight-myWeight, length:myLength, angle:0, origin:myOrigin, duration:myLength*myDuration/perimeter}, div, tl, myDelay);
-    myLength = myHeight-myWeight*2;
+        fromY:myHeight-myWeight, length:myLength, angle:0, origin:myOrigin, duration:myLength*myDuration/perimeter}, div, tl, myDotDelay, myEase);
+    myLength = myHeight-myWeight*1.2;
     var lineRight = drawLine({color:myColor, weight:myWeight, fromX:myWidth, 
     var lineRight = drawLine({color:myColor, weight:myWeight, fromX:myWidth, 
-        fromY:myHeight-myWeight*2, length:myLength, angle:-90, origin:myOrigin, duration:myLength*myDuration/perimeter}, div, tl, -myDotDuration*2);
+        fromY:myHeight-myWeight*2, length:myLength, angle:-90, origin:myOrigin, duration:myLength*myDuration/perimeter}, div, tl, myDelay-=myWeight*myDuration/perimeter, myEase);
     myLength = myWidth+myWeight;
     myLength = myWidth+myWeight;
     var lineTop = drawLine({color:myColor, weight:myWeight, fromX:myWidth, 
     var lineTop = drawLine({color:myColor, weight:myWeight, fromX:myWidth, 
-        fromY:-myWeight, length:myLength, angle:-190, origin:myOrigin, duration:myLength*myDuration/perimeter}, div, tl, -myDotDuration);
+        fromY:-myWeight, length:myLength, angle:-190, origin:myOrigin, duration:myLength*myDuration/perimeter}, div, tl, myDelay, myEase);
     myLength = myHeight-angleHeight-myWeight*2-dotSpacing;
     myLength = myHeight-angleHeight-myWeight*2-dotSpacing;
     var lineLeft = drawLine({color:myColor, weight:myWeight, fromX:0, 
     var lineLeft = drawLine({color:myColor, weight:myWeight, fromX:0, 
-        fromY:angleHeight, length:myLength, angle:-270, origin:myOrigin, duration:myLength*myDuration/perimeter}, div, tl, -myDotDuration);
+        fromY:angleHeight, length:myLength, angle:-270, origin:myOrigin, duration:myLength*myDuration/perimeter}, div, tl, myDelay, myEase);
     
     
+    console.log("drawEyDivFrame total animation time: ", tl.totalDuration() );
     return div;
     return div;
 }
 }
 
 
+var reverseDrawEyDivFrame = function ()
+{
+    return tl.reverse();
+}
+var reversedToDots = function (myTimeLine)
+{
+    if( tl.reversed() )
+    {
+        tl.timeScale(8);
+    };
+}
+
+
 /**
 /**
-svgURL:String - URL to the EY yellow square that will be used for the frame
-myWidth:Number - width of the desired frame in pixels measured from the outside to the outside
-myHeight:Number - height of the desired frame in pixels measured from the peak to the bottom
-duration:Number - seconds the animation will take to elapse from start to finish
+styleObj:Object - with the following properties
+    color:String - CSS colour value as a string "#FFF" or "red" to define the colour of the line
+    weight:Number - Pixels defining the thickness of the line
+    fromX:Number - the x position in pixels where this line will start
+    fromY:Number - the y position in pixels where this line will start
+    length:Number - the length of the line in pixels
+    angle:Number - the degrees defines the direction the line will be drawn
+    origin:myOrigin - 0 = right; -90 = up
+    duration:Number - seconds the drawing of this line should take
+container:HTMLelement - HTML element into which you will draw this element. It should be absolute or relative positioned.
+timeline:TimelineMax - timeline to which you need this line draw animation added.
+myDelay:Number - seconds delay from the previous animation before this one starts
 **/
 **/
-
-var drawLine = function (styleObj, container, timeline, myDelay)
+var drawLine = function (styleObj, container, timeline, myDelay, myEase)
 {
 {
     var div = document.createElement("div");
     var div = document.createElement("div");
     
     
@@ -107,10 +138,12 @@ var drawLine = function (styleObj, container, timeline, myDelay)
     div.style.width = "0px"; /////// needs to be 0 before animating to this width
     div.style.width = "0px"; /////// needs to be 0 before animating to this width
     
     
     container.appendChild(div);
     container.appendChild(div);
-	timeline.to(div, styleObj.duration, {width:styleObj.length, ease:Linear.easeNone, delay:myDelay});
+	timeline.to(div, styleObj.duration, {width:styleObj.length, ease:myEase, delay:myDelay});
     
     
     return div;
     return div;
 }
 }
 
 
 //drawEyDivFrame(myWeight, myWidth, myHeight, duration);
 //drawEyDivFrame(myWeight, myWidth, myHeight, duration);
-drawEyDivFrame(7, 143, 184, 2);
+var div = drawEyDivFrame(10, 196, 193, 2);
+document.body.appendChild(div);    
+

+/*!
+ * VERSION: 1.0.1
+ * DATE: 2016-04-28
+ * 
+ * Requires:
+ *     GSAP TweenMax
+ *     GASP drawSVG Plugin ()
+ *          This work is subject to the terms at http://greensock.com/standard-license or for
+ *          Club GreenSock members, the software agreement that was issued with your membership.
+ *
+ * @license Copyright (c) 2016, Tenzing Communications Inc. All rights reserved.
+ * 
+ * @author: Dan Rempel, dan@gotenzing.com
+ 
+ * Usage Example:
+ *    var myEySvg = initEySvgFrame(10, 196, 193); // frame line weight, width, height
+ *    document.getElementById("body").appendChild(myEySvg);
+ *    animateEyFrame(2); // delay in seconds
+ *    animateGradient(2); // delay in seconds
+ *    animateFill(2); // delay in seconds
+ * 
+ **/
+
+
+var eySvg;
+var eyStroke;
+var eyDot1;
+var eyDot2;
+var eyDot3;
+var eyGradient;
+var eyFill;
+
+var tl;
+var eyStrokeWeight;
+var eySvgHeight;
+var eySvgWidth;
+var eyAngleHeight;
+var eyDotSpacing;
+var eyDotDuration = .2; // seconds for animation
+var eyFrameDuration = 1; // seconds for animation
+var eyGradientDuration = 1; // seconds for animation
+var eyFillDuration = 1; // seconds for animation
+var eyColor = "#FFD400";
+var svgNS = "http://www.w3.org/2000/svg"; 
+
+/**
+myWeight:Number - the width of the line of the frame in pixels
+myWidth:Number - width of the desired frame in pixels measured from the outside to the outside
+myHeight:Number - height of the desired frame in pixels measured from the peak to the bottom
+myDuration:Number - seconds the animation will take to elapse from start to finish
+
+Returns: SVG element
+**/
+var initEySvgFrame = function (myWeight, myWidth, myHeight)
+{
+    //// calculate all the points and variables to assist in drawing ////
+    
+    tl = new TimelineMax();
+    eyDotSpacing = Math.floor(myWeight*8.5/10); // EY ratio of weight to spacing
+    eyStrokeWeight = myWeight;
+    eySvgWidth = myWidth;
+    eySvgHeight = myHeight;
+    
+    var myRadians = 10 * Math.PI / 180; // EY angles up at 10 degrees
+    eyAngleHeight = Math.tan(myRadians)*(myWidth - myWeight); // height of the head (measured vertically from shoulder anchor pt to top of head anchor pt)
+    
+    //// create the properly sized svg container ////
+    
+    var eySvg = document.createElementNS(svgNS, "svg");
+    eySvg.setAttribute("id", "ey-frame");
+    eySvg.setAttribute("width", myWidth+"px");
+    eySvg.setAttribute("height", myHeight+"px");
+    eySvg.setAttribute("viewBox", "0 0 "+eySvgWidth + " " + eySvgHeight );
+    var myDefs = document.createElementNS(svgNS, "defs");
+    eySvg.appendChild(myDefs);
+    
+    
+    //// draw the gradient for def ////
+    
+    var myLinearGradient = document.createElementNS(svgNS, "linearGradient");
+    myLinearGradient.setAttribute("id", "linear-gradient");
+    myLinearGradient.setAttribute("x1", "0%");
+    myLinearGradient.setAttribute("x2", "0%");
+    myLinearGradient.setAttribute("y1", "0%");
+    myLinearGradient.setAttribute("y2", "100%");
+    myDefs.appendChild(myLinearGradient);
+
+    //stops
+
+    var stop;
+    stop = createStop ({id:"stop-1", offset:"0%", color:"Black", opacity:".7" });
+    myLinearGradient.appendChild(stop);
+    stop = createStop ({id:"stop-2", offset:"100%", color:"Black", opacity:"0" });
+    myLinearGradient.appendChild(stop);
+    
+    // gradient shape
+    
+    eyGradient = createShape ("ey-gradient", "url(#linear-gradient)");
+    eySvg.appendChild(eyGradient);
+
+        
+    //// create 3 dots ////
+    
+    eyDot1 = createDot(1);
+    eySvg.appendChild(eyDot1);
+    eyDot2 = createDot(2);
+    eySvg.appendChild(eyDot2);
+    eyDot3 = createDot(3);
+    eySvg.appendChild(eyDot3);
+    
+    //// draw the rest of the path ////
+    
+    eyStroke = createPath("ey-stroke");
+    eyStroke.setAttribute("d", 
+        " M " + ((eyStrokeWeight + eyDotSpacing)*3) + " " + (eySvgHeight-myWeight/2) + 
+        " H " + (myWidth-myWeight/2) +
+        " V " + myWeight/1.5 +
+        " L " + myWeight/2 + " " + (eyAngleHeight+myWeight/2) +
+        " V " + (myHeight-myWeight-eyDotSpacing)
+    );
+    eySvg.appendChild(eyStroke);
+   
+
+    //// draw the fill shape for def ////
+    
+    eyFill = createShape ("ey-gradient", eyColor);
+    eySvg.appendChild(eyFill);
+    
+
+    return eySvg;
+    
+};
+
+var animateEyFrame = function (myDelay)
+{
+    var lastPt = 0;
+    tl.fromTo(eyDot1, eyDotDuration, {drawSVG:"0"}, {drawSVG:"0 "+(lastPt+=(eyStrokeWeight+eyDotSpacing)), ease:Power1.easeInOut, delay:myDelay });
+    tl.fromTo(eyDot2, eyDotDuration, {drawSVG:"0"}, {drawSVG:"0 "+(lastPt+=(eyStrokeWeight+eyDotSpacing)), ease:Power1.easeInOut });
+    tl.fromTo(eyDot3, eyDotDuration, {drawSVG:"0"}, {drawSVG:"0 "+(lastPt+=(eyStrokeWeight+eyDotSpacing)), ease:Power1.easeInOut });
+    tl.fromTo(eyStroke, eyFrameDuration, {drawSVG:"0"}, {drawSVG:"0 100%", ease:Power1.easeIn});
+};
+
+var animateGradient = function (myDelay)
+{
+    tl.fromTo(eyGradient, .5, {opacity:0}, {opacity:1, delay:myDelay});
+};
+var animateFill = function (myDelay)
+{
+    tl.fromTo(eyFill, .5, {y:eySvgHeight}, {y:0, ease:Power2.easeIn, delay:myDelay});
+};
+
+
+
+////////// private functions
+ 
+var createPath = function (myId)
+{
+    var myPath = document.createElementNS(svgNS,"path");
+    myPath.setAttribute("id", myId);
+    myPath.setAttribute("fill", "none");
+    myPath.setAttribute("stroke", eyColor);
+    myPath.setAttribute("stroke-width", eyStrokeWeight);
+    myPath.setAttribute("stroke-miterlimit", "10");
+    return myPath;
+};
+
+var createDot = function (dotNum)
+{
+    var myDot = createPath("ey-dot"+dotNum);
+    myDot.setAttribute("d", 
+        " M " + ((eyStrokeWeight + eyDotSpacing)*(dotNum-1)) + " " + (eySvgHeight-eyStrokeWeight/2) + 
+        " h " + eyStrokeWeight
+    );
+    return myDot;
+};
+
+
+var createShape = function (myId, myFill)
+{
+    var myShape = document.createElementNS(svgNS,"path");
+    myShape.setAttribute("id", myId);
+    myShape.setAttribute("fill", myFill);
+    myShape.setAttribute("d", 
+        " M 0 " + (eySvgHeight) + 
+        " H " + (eySvgWidth) +
+        " V 2 " +
+        " L 0 " + (eyAngleHeight+2) +
+        " Z "
+    );
+    return myShape;
+};
+
+var createStop = function (myStopObj)
+{
+    var myStop = document.createElementNS(svgNS, "stop");
+    myStop.setAttribute("id", myStopObj.id);
+    myStop.setAttribute("offset", myStopObj.offset);
+    myStop.setAttribute("stop-color", myStopObj.color);
+    myStop.setAttribute("stop-opacity", myStopObj.opacity);
+    return myStop;
+};
+
+
+
+