Skip to content

Tenzing / banners-with-skip

Go to a project
Toggle navigation
Toggle navigation pinning
65f170d2 by Dan Rempel
Options

EY frame animates reverse

1 parent 1cbc03fe
Inline Side-by-side
Showing 9 changed files with 134 additions and 110 deletions
1 /*!
2 * VERSION: 1.0.2
3 * DATE: 2016-05-03
4 *
5 * Requires:
6 * GSAP TweenMax
7 * GASP drawSVG Plugin ()
8 * This work is subject to the terms at http://greensock.com/standard-license or for
9 * Club GreenSock members, the software agreement that was issued with your membership.
10 *
11 * @license Copyright (c) 2016, Tenzing Communications Inc. All rights reserved.
12 *
13 * @author: Dan Rempel, dan@gotenzing.com
14
15 * Usage Example:
16 * var myEySvg = initEySvgFrame(10, 196, 193); // frame line weight, width, height
17 * document.getElementById("body").appendChild(myEySvg);
18 * animateEyFrame(2); // delay in seconds
19 * animateGradient(2); // delay in seconds
20 * animateFill(2); // delay in seconds
21 *
22 **/
23
24 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=0.2;var eyFrameDuration=1;var eyGradientDuration=1;var eyFillDuration=1;var eyColor='#FFD400';var svgNS='http://www.w3.org/2000/svg';var initEySvgFrame=function(b,d,f){tl=new TimelineMax(),eyDotSpacing=Math.floor(b*8.5/10),eyStrokeWeight=b,eySvgWidth=d,eySvgHeight=f;var h=10*Math.PI/180;eyAngleHeight=Math.tan(h)*(d-b);var a=document.createElementNS(svgNS,'svg');a.setAttribute('id','ey-frame'),a.setAttribute('width',d+'px'),a.setAttribute('height',f+'px'),a.setAttribute('viewBox','0 0 '+eySvgWidth+' '+eySvgHeight);var g=document.createElementNS(svgNS,'defs');a.appendChild(g);var c=document.createElementNS(svgNS,'linearGradient');c.setAttribute('id','linear-gradient'),c.setAttribute('x1','0%'),c.setAttribute('x2','0%'),c.setAttribute('y1','0%'),c.setAttribute('y2','100%'),g.appendChild(c);var e;return e=createStop({id:'stop-1',offset:'0%',color:'Black',opacity:'.7'}),c.appendChild(e),e=createStop({id:'stop-2',offset:'100%',color:'Black',opacity:'0'}),c.appendChild(e),eyGradient=createShape('ey-gradient','url(#linear-gradient)'),a.appendChild(eyGradient),eyDot1=createDot(1),a.appendChild(eyDot1),eyDot2=createDot(2),a.appendChild(eyDot2),eyDot3=createDot(3),a.appendChild(eyDot3),eyStroke=createPath('ey-stroke'),eyStroke.setAttribute('d',' M '+(eyStrokeWeight+eyDotSpacing)*3+' '+(eySvgHeight-b/2)+' H '+(d-b/2)+' V '+b/1.5+' L '+b/2+' '+(eyAngleHeight+b/2)+' V '+(f-b-eyDotSpacing)),a.appendChild(eyStroke),a;};var animateEyFrame=function(b){var a=0;tl.fromTo(eyDot1,eyDotDuration,{drawSVG:'0'},{drawSVG:'0 '+(a+=eyStrokeWeight+eyDotSpacing),ease:Power1.easeInOut,delay:b}),tl.fromTo(eyDot2,eyDotDuration,{drawSVG:'0'},{drawSVG:'0 '+(a+=eyStrokeWeight+eyDotSpacing),ease:Power1.easeInOut}),tl.fromTo(eyDot3,eyDotDuration,{drawSVG:'0'},{drawSVG:'0 '+(a+=eyStrokeWeight+eyDotSpacing),ease:Power1.easeInOut}),tl.fromTo(eyStroke,eyFrameDuration,{drawSVG:'0'},{drawSVG:'0 100%',ease:Power1.easeIn});};var animateGradient=function(a){tl.fromTo(eyGradient,0.5,{opacity:0},{opacity:1,delay:a});};var animateFill=function(a){(typeof eyFill==='undefined'||variable===null)&&(eyFill=createShape('ey-gradient',eyColor),eySvg.appendChild(eyFill)),tl.fromTo(eyFill,0.5,{y:eySvgHeight},{y:0,ease:Power2.easeIn,delay:a});};var createPath=function(b){var a=document.createElementNS(svgNS,'path');return a.setAttribute('id',b),a.setAttribute('fill','none'),a.setAttribute('stroke',eyColor),a.setAttribute('stroke-width',eyStrokeWeight),a.setAttribute('stroke-miterlimit','10'),a;};var createDot=function(b){var a=createPath('ey-dot'+b);return a.setAttribute('d',' M '+(eyStrokeWeight+eyDotSpacing)*(b-1)+' '+(eySvgHeight-eyStrokeWeight/2)+' h '+eyStrokeWeight),a;};var createShape=function(b,c){var a=document.createElementNS(svgNS,'path');return a.setAttribute('id',b),a.setAttribute('fill',c),a.setAttribute('d',' M 0 '+eySvgHeight+' H '+eySvgWidth+' V 2 '+' L 0 '+(eyAngleHeight+2)+' Z '),a;};var createStop=function(b){var a=document.createElementNS(svgNS,'stop');return a.setAttribute('id',b.id),a.setAttribute('offset',b.offset),a.setAttribute('stop-color',b.color),a.setAttribute('stop-opacity',b.opacity),a;};
...\ No newline at end of file ...\ No newline at end of file
1 /*!
2 * VERSION: 1.0.3
3 * DATE: 2016-05-04
4 *
5 * Requires:
6 * GSAP TweenMax (import com.greensock.*;)
7 * GASP drawSVG Plugin ()
8 * This work is subject to the terms at http://greensock.com/standard-license or for
9 * Club GreenSock members, the software agreement that was issued with your membership.
10 *
11 * @license Copyright (c) 2016, Tenzing Communications Inc. All rights reserved.
12 *
13 * @author: Dan Rempel, dan@gotenzing.com
14
15 * Usage Example:
16 * var myEySvg = initEySvgFrame(10, 196, 193); // frame line weight, width, height
17 * document.getElementById("body").appendChild(myEySvg);
18 * animateEyFrame(2); // delay in seconds
19 * animateGradient(2); // delay in seconds
20 * animateFill(2); // delay in seconds
21 *
22 **/
23
24 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=0.2;var eyFrameDuration=1;var eyGradientDuration=1;var eyFillDuration=1;var eyColor='#FFD400';var svgNS='http://www.w3.org/2000/svg';var isForward=!0;var initEySvgFrame=function(b,d,f){tl=new TimelineMax({onStart:tlStart,onUpdate:tlUpdate,onComplete:tlComplete,onReverseComplete:tlReverseComplete}),eyDotSpacing=Math.floor(b*8.5/10),eyStrokeWeight=b,eySvgWidth=d,eySvgHeight=f;var h=10*Math.PI/180;eyAngleHeight=Math.tan(h)*(d-b);var a=document.createElementNS(svgNS,'svg');a.setAttribute('id','ey-frame'),a.setAttribute('width',d+'px'),a.setAttribute('height',f+'px'),a.setAttribute('viewBox','0 0 '+eySvgWidth+' '+eySvgHeight);var g=document.createElementNS(svgNS,'defs');a.appendChild(g);var c=document.createElementNS(svgNS,'linearGradient');c.setAttribute('id','linear-gradient'),c.setAttribute('x1','0%'),c.setAttribute('x2','0%'),c.setAttribute('y1','0%'),c.setAttribute('y2','100%'),g.appendChild(c);var e;return e=createStop({id:'stop-1',offset:'0%',color:'Black',opacity:'.7'}),c.appendChild(e),e=createStop({id:'stop-2',offset:'100%',color:'Black',opacity:'0'}),c.appendChild(e),eyGradient=createShape('ey-gradient','url(#linear-gradient)'),a.appendChild(eyGradient),eyDot1=createDot(1),a.appendChild(eyDot1),eyDot2=createDot(2),a.appendChild(eyDot2),eyDot3=createDot(3),a.appendChild(eyDot3),eyStroke=createPath('ey-stroke'),eyStroke.setAttribute('d',' M '+(eyStrokeWeight+eyDotSpacing)*3+' '+(eySvgHeight-b/2)+' H '+(d-b/2)+' V '+b/1.5+' L '+b/2+' '+(eyAngleHeight+b/2)+' V '+(f-b-eyDotSpacing)),a.appendChild(eyStroke),a;};var animateEyFrame=function(b){isForward=!0,tl.timeScale(1);var a=0;tl.fromTo(eyDot1,eyDotDuration,{drawSVG:'0'},{drawSVG:'0 '+(a+=eyStrokeWeight+eyDotSpacing),ease:Power1.easeInOut,delay:b}),tl.fromTo(eyDot2,eyDotDuration,{drawSVG:'0'},{drawSVG:'0 '+(a+=eyStrokeWeight+eyDotSpacing),ease:Power1.easeInOut}),tl.fromTo(eyDot3,eyDotDuration,{drawSVG:'0'},{drawSVG:'0 '+(a+=eyStrokeWeight+eyDotSpacing),ease:Power1.easeInOut}),tl.call(tlDotToLine,[]),tl.fromTo(eyStroke,eyFrameDuration,{drawSVG:'0'},{drawSVG:'0 100%',ease:Power1.easeIn});};var animateEyReverse=function(a){TweenMax.delayedCall(a,intAnimateEyReverse,[0]);};var animateGradient=function(a){tl.fromTo(eyGradient,0.5,{opacity:0},{opacity:1,delay:a});};var animateFill=function(a){(typeof eyFill==='undefined'||variable===null)&&(eyFill=createShape('ey-gradient',eyColor),eySvg.appendChild(eyFill)),tl.fromTo(eyFill,0.5,{y:eySvgHeight},{y:0,ease:Power2.easeIn,delay:a});};var createPath=function(b){var a=document.createElementNS(svgNS,'path');return a.setAttribute('id',b),a.setAttribute('fill','none'),a.setAttribute('stroke',eyColor),a.setAttribute('stroke-width',eyStrokeWeight),a.setAttribute('stroke-miterlimit','10'),a;};var createDot=function(b){var a=createPath('ey-dot'+b);return a.setAttribute('d',' M '+(eyStrokeWeight+eyDotSpacing)*(b-1)+' '+(eySvgHeight-eyStrokeWeight/2)+' h '+eyStrokeWeight),a;};var createShape=function(b,c){var a=document.createElementNS(svgNS,'path');return a.setAttribute('id',b),a.setAttribute('fill',c),a.setAttribute('d',' M 0 '+eySvgHeight+' H '+eySvgWidth+' V 2 '+' L 0 '+(eyAngleHeight+2)+' Z '),a;};var createStop=function(b){var a=document.createElementNS(svgNS,'stop');return a.setAttribute('id',b.id),a.setAttribute('offset',b.offset),a.setAttribute('stop-color',b.color),a.setAttribute('stop-opacity',b.opacity),a;};var intAnimateEyReverse=function(a){isForward=!1,tl.reverse(a),tl.timeScale;};var tlStart=function(){};var tlDotToLine=function(){isForward||tl.timeScale(4);};var tlUpdate=function(){};var tlComplete=function(){};var tlReverseComplete=function(){};
...\ No newline at end of file ...\ No newline at end of file
...@@ -185,7 +185,6 @@ ...@@ -185,7 +185,6 @@
185 </head> 185 </head>
186 186
187 <body> 187 <body>
188 <!-- <a id="click-tag" href="javascript:window.open(window.clickTag)"> -->
189 <a href="javascript:eyeBuild.doClick(0)" class="cta"> 188 <a href="javascript:eyeBuild.doClick(0)" class="cta">
190 <div id="border"> 189 <div id="border">
191 <img id="boy" src="assets/boy.png" alt="boy"> 190 <img id="boy" src="assets/boy.png" alt="boy">
...@@ -219,14 +218,10 @@ ...@@ -219,14 +218,10 @@
219 </div> 218 </div>
220 </a> 219 </a>
221 220
222 <!-- jQuery-->
223 <script src="//code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script>
224
225 <!-- GREENSOCK--> 221 <!-- GREENSOCK-->
226 <!-- <script src="//www.greensock.com/js/src/utils/SplitText.min.js"></script> enables character or word animation -->
227 <script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script> 222 <script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
228 <script src="assets/DrawSVGPlugin.min.js"></script> 223 <script src="assets/DrawSVGPlugin.min.js"></script>
229 <script src="assets/ey-frame-svg-1.0.2.min.js"></script> 224 <script src="assets/ey-frame-svg-1.0.3.min.js"></script>
230 225
231 <script> 226 <script>
232 227
...@@ -240,7 +235,7 @@ ...@@ -240,7 +235,7 @@
240 tl.to("#logo", .7, {opacity:1, ease:Power1.easeInOut, delay:-.5 }); 235 tl.to("#logo", .7, {opacity:1, ease:Power1.easeInOut, delay:-.5 });
241 236
242 var myeySvg = initEySvgFrame(12, 259, 218); 237 var myeySvg = initEySvgFrame(12, 259, 218);
243 $("#border").append(myeySvg); 238 document.getElementById("border").appendChild(myeySvg);
244 animateEyFrame(1); 239 animateEyFrame(1);
245 animateGradient(.2); 240 animateGradient(.2);
246 241
...@@ -249,24 +244,20 @@ ...@@ -249,24 +244,20 @@
249 tl.to("#txt1b", d, {opacity:1, ease:Power1.easeInOut, delay:.1 }); 244 tl.to("#txt1b", d, {opacity:1, ease:Power1.easeInOut, delay:.1 });
250 tl.to("#box-2", d, {opacity:1, ease:Power1.easeInOut, delay:-.2 }); 245 tl.to("#box-2", d, {opacity:1, ease:Power1.easeInOut, delay:-.2 });
251 246
252 tl.to("#txt1a", d, {opacity:0, ease:Power1.easeInOut, delay:2 }); 247 tl.to("#txt1a", d, {opacity:0, ease:Power1.easeInOut, delay:1.5 });
253 tl.to("#box-1", d, {opacity:0, ease:Power1.easeInOut, delay:-d }); 248 tl.to("#box-1", d, {opacity:0, ease:Power1.easeInOut, delay:-d });
254 tl.to("#txt1b", d, {opacity:0, ease:Power1.easeInOut, delay:-d }); 249 tl.to("#txt1b", d, {opacity:0, ease:Power1.easeInOut, delay:-d });
255 tl.to("#box-2", d, {opacity:0, ease:Power1.easeInOut, delay:-d }); 250 tl.to("#box-2", d, {opacity:0, ease:Power1.easeInOut, delay:-d });
256 251
257 //animateFill(3.3); 252 //animateFill(3.3);
258 tl.to("#txt2", d, {opacity:1, ease:Power1.easeInOut, delay:.5 }); 253 tl.to("#txt2", d, {opacity:1, ease:Power1.easeInOut, delay:0 });
259 tl.to("#txt2", d, {opacity:0, ease:Power1.easeInOut, delay:4 }); 254 tl.to("#txt2", d, {opacity:0, ease:Power1.easeInOut, delay:4 });
260 255
261 tl.to("#dot-1", .1, {opacity:1, ease:Power1.easeIn, delay:0 }); 256 animateEyReverse(10);
262 tl.to(myeySvg, d, {scaleY:.01, scaleX:.01, left:-102, top:0, ease:Power1.easeIn, delay:0 });
263 tl.to(myeySvg, .1, {opacity:0, ease:Power1.easeIn, delay:-.1 });
264 tl.to("#dot-1", .2, {opacity:0, ease:Power1.easeIn, delay:-.2});
265 257
266
267 // phase 2 258 // phase 2
268 259
269 tl.to("#gradient", d, {opacity:1, ease:Power1.easeInOut, delay:-.2 }); 260 tl.to("#gradient", d, {opacity:1, ease:Power1.easeInOut, delay:1 });
270 261
271 tl.fromTo("#tag-mask", d, {width:0}, {width:320, ease:Linear.easeNone, delay:-.2 }); 262 tl.fromTo("#tag-mask", d, {width:0}, {width:320, ease:Linear.easeNone, delay:-.2 });
272 tl.fromTo("#dot-txt", d, {left:-12}, {left:312, ease:Linear.easeNone, delay:-d}); 263 tl.fromTo("#dot-txt", d, {left:-12}, {left:312, ease:Linear.easeNone, delay:-d});
...@@ -294,9 +285,7 @@ ...@@ -294,9 +285,7 @@
294 } 285 }
295 286
296 //--------------------- 287 //---------------------
297 $(document).ready(function(){ 288 stage1();
298 stage1();
299 });
300 289
301 290
302 291
......
1 /*!
2 * VERSION: 1.0.2
3 * DATE: 2016-05-03
4 *
5 * Requires:
6 * GSAP TweenMax
7 * GASP drawSVG Plugin ()
8 * This work is subject to the terms at http://greensock.com/standard-license or for
9 * Club GreenSock members, the software agreement that was issued with your membership.
10 *
11 * @license Copyright (c) 2016, Tenzing Communications Inc. All rights reserved.
12 *
13 * @author: Dan Rempel, dan@gotenzing.com
14
15 * Usage Example:
16 * var myEySvg = initEySvgFrame(10, 196, 193); // frame line weight, width, height
17 * document.getElementById("body").appendChild(myEySvg);
18 * animateEyFrame(2); // delay in seconds
19 * animateGradient(2); // delay in seconds
20 * animateFill(2); // delay in seconds
21 *
22 **/
23
24 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=0.2;var eyFrameDuration=1;var eyGradientDuration=1;var eyFillDuration=1;var eyColor='#FFD400';var svgNS='http://www.w3.org/2000/svg';var initEySvgFrame=function(b,d,f){tl=new TimelineMax(),eyDotSpacing=Math.floor(b*8.5/10),eyStrokeWeight=b,eySvgWidth=d,eySvgHeight=f;var h=10*Math.PI/180;eyAngleHeight=Math.tan(h)*(d-b);var a=document.createElementNS(svgNS,'svg');a.setAttribute('id','ey-frame'),a.setAttribute('width',d+'px'),a.setAttribute('height',f+'px'),a.setAttribute('viewBox','0 0 '+eySvgWidth+' '+eySvgHeight);var g=document.createElementNS(svgNS,'defs');a.appendChild(g);var c=document.createElementNS(svgNS,'linearGradient');c.setAttribute('id','linear-gradient'),c.setAttribute('x1','0%'),c.setAttribute('x2','0%'),c.setAttribute('y1','0%'),c.setAttribute('y2','100%'),g.appendChild(c);var e;return e=createStop({id:'stop-1',offset:'0%',color:'Black',opacity:'.7'}),c.appendChild(e),e=createStop({id:'stop-2',offset:'100%',color:'Black',opacity:'0'}),c.appendChild(e),eyGradient=createShape('ey-gradient','url(#linear-gradient)'),a.appendChild(eyGradient),eyDot1=createDot(1),a.appendChild(eyDot1),eyDot2=createDot(2),a.appendChild(eyDot2),eyDot3=createDot(3),a.appendChild(eyDot3),eyStroke=createPath('ey-stroke'),eyStroke.setAttribute('d',' M '+(eyStrokeWeight+eyDotSpacing)*3+' '+(eySvgHeight-b/2)+' H '+(d-b/2)+' V '+b/1.5+' L '+b/2+' '+(eyAngleHeight+b/2)+' V '+(f-b-eyDotSpacing)),a.appendChild(eyStroke),a;};var animateEyFrame=function(b){var a=0;tl.fromTo(eyDot1,eyDotDuration,{drawSVG:'0'},{drawSVG:'0 '+(a+=eyStrokeWeight+eyDotSpacing),ease:Power1.easeInOut,delay:b}),tl.fromTo(eyDot2,eyDotDuration,{drawSVG:'0'},{drawSVG:'0 '+(a+=eyStrokeWeight+eyDotSpacing),ease:Power1.easeInOut}),tl.fromTo(eyDot3,eyDotDuration,{drawSVG:'0'},{drawSVG:'0 '+(a+=eyStrokeWeight+eyDotSpacing),ease:Power1.easeInOut}),tl.fromTo(eyStroke,eyFrameDuration,{drawSVG:'0'},{drawSVG:'0 100%',ease:Power1.easeIn});};var animateGradient=function(a){tl.fromTo(eyGradient,0.5,{opacity:0},{opacity:1,delay:a});};var animateFill=function(a){(typeof eyFill==='undefined'||variable===null)&&(eyFill=createShape('ey-gradient',eyColor),eySvg.appendChild(eyFill)),tl.fromTo(eyFill,0.5,{y:eySvgHeight},{y:0,ease:Power2.easeIn,delay:a});};var createPath=function(b){var a=document.createElementNS(svgNS,'path');return a.setAttribute('id',b),a.setAttribute('fill','none'),a.setAttribute('stroke',eyColor),a.setAttribute('stroke-width',eyStrokeWeight),a.setAttribute('stroke-miterlimit','10'),a;};var createDot=function(b){var a=createPath('ey-dot'+b);return a.setAttribute('d',' M '+(eyStrokeWeight+eyDotSpacing)*(b-1)+' '+(eySvgHeight-eyStrokeWeight/2)+' h '+eyStrokeWeight),a;};var createShape=function(b,c){var a=document.createElementNS(svgNS,'path');return a.setAttribute('id',b),a.setAttribute('fill',c),a.setAttribute('d',' M 0 '+eySvgHeight+' H '+eySvgWidth+' V 2 '+' L 0 '+(eyAngleHeight+2)+' Z '),a;};var createStop=function(b){var a=document.createElementNS(svgNS,'stop');return a.setAttribute('id',b.id),a.setAttribute('offset',b.offset),a.setAttribute('stop-color',b.color),a.setAttribute('stop-opacity',b.opacity),a;};
...\ No newline at end of file ...\ No newline at end of file
1 /*!
2 * VERSION: 1.0.3
3 * DATE: 2016-05-04
4 *
5 * Requires:
6 * GSAP TweenMax (import com.greensock.*;)
7 * GASP drawSVG Plugin ()
8 * This work is subject to the terms at http://greensock.com/standard-license or for
9 * Club GreenSock members, the software agreement that was issued with your membership.
10 *
11 * @license Copyright (c) 2016, Tenzing Communications Inc. All rights reserved.
12 *
13 * @author: Dan Rempel, dan@gotenzing.com
14
15 * Usage Example:
16 * var myEySvg = initEySvgFrame(10, 196, 193); // frame line weight, width, height
17 * document.getElementById("body").appendChild(myEySvg);
18 * animateEyFrame(2); // delay in seconds
19 * animateGradient(2); // delay in seconds
20 * animateFill(2); // delay in seconds
21 *
22 **/
23
24 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=0.2;var eyFrameDuration=1;var eyGradientDuration=1;var eyFillDuration=1;var eyColor='#FFD400';var svgNS='http://www.w3.org/2000/svg';var isForward=!0;var initEySvgFrame=function(b,d,f){tl=new TimelineMax({onStart:tlStart,onUpdate:tlUpdate,onComplete:tlComplete,onReverseComplete:tlReverseComplete}),eyDotSpacing=Math.floor(b*8.5/10),eyStrokeWeight=b,eySvgWidth=d,eySvgHeight=f;var h=10*Math.PI/180;eyAngleHeight=Math.tan(h)*(d-b);var a=document.createElementNS(svgNS,'svg');a.setAttribute('id','ey-frame'),a.setAttribute('width',d+'px'),a.setAttribute('height',f+'px'),a.setAttribute('viewBox','0 0 '+eySvgWidth+' '+eySvgHeight);var g=document.createElementNS(svgNS,'defs');a.appendChild(g);var c=document.createElementNS(svgNS,'linearGradient');c.setAttribute('id','linear-gradient'),c.setAttribute('x1','0%'),c.setAttribute('x2','0%'),c.setAttribute('y1','0%'),c.setAttribute('y2','100%'),g.appendChild(c);var e;return e=createStop({id:'stop-1',offset:'0%',color:'Black',opacity:'.7'}),c.appendChild(e),e=createStop({id:'stop-2',offset:'100%',color:'Black',opacity:'0'}),c.appendChild(e),eyGradient=createShape('ey-gradient','url(#linear-gradient)'),a.appendChild(eyGradient),eyDot1=createDot(1),a.appendChild(eyDot1),eyDot2=createDot(2),a.appendChild(eyDot2),eyDot3=createDot(3),a.appendChild(eyDot3),eyStroke=createPath('ey-stroke'),eyStroke.setAttribute('d',' M '+(eyStrokeWeight+eyDotSpacing)*3+' '+(eySvgHeight-b/2)+' H '+(d-b/2)+' V '+b/1.5+' L '+b/2+' '+(eyAngleHeight+b/2)+' V '+(f-b-eyDotSpacing)),a.appendChild(eyStroke),a;};var animateEyFrame=function(b){isForward=!0,tl.timeScale(1);var a=0;tl.fromTo(eyDot1,eyDotDuration,{drawSVG:'0'},{drawSVG:'0 '+(a+=eyStrokeWeight+eyDotSpacing),ease:Power1.easeInOut,delay:b}),tl.fromTo(eyDot2,eyDotDuration,{drawSVG:'0'},{drawSVG:'0 '+(a+=eyStrokeWeight+eyDotSpacing),ease:Power1.easeInOut}),tl.fromTo(eyDot3,eyDotDuration,{drawSVG:'0'},{drawSVG:'0 '+(a+=eyStrokeWeight+eyDotSpacing),ease:Power1.easeInOut}),tl.call(tlDotToLine,[]),tl.fromTo(eyStroke,eyFrameDuration,{drawSVG:'0'},{drawSVG:'0 100%',ease:Power1.easeIn});};var animateEyReverse=function(a){TweenMax.delayedCall(a,intAnimateEyReverse,[0]);};var animateGradient=function(a){tl.fromTo(eyGradient,0.5,{opacity:0},{opacity:1,delay:a});};var animateFill=function(a){(typeof eyFill==='undefined'||variable===null)&&(eyFill=createShape('ey-gradient',eyColor),eySvg.appendChild(eyFill)),tl.fromTo(eyFill,0.5,{y:eySvgHeight},{y:0,ease:Power2.easeIn,delay:a});};var createPath=function(b){var a=document.createElementNS(svgNS,'path');return a.setAttribute('id',b),a.setAttribute('fill','none'),a.setAttribute('stroke',eyColor),a.setAttribute('stroke-width',eyStrokeWeight),a.setAttribute('stroke-miterlimit','10'),a;};var createDot=function(b){var a=createPath('ey-dot'+b);return a.setAttribute('d',' M '+(eyStrokeWeight+eyDotSpacing)*(b-1)+' '+(eySvgHeight-eyStrokeWeight/2)+' h '+eyStrokeWeight),a;};var createShape=function(b,c){var a=document.createElementNS(svgNS,'path');return a.setAttribute('id',b),a.setAttribute('fill',c),a.setAttribute('d',' M 0 '+eySvgHeight+' H '+eySvgWidth+' V 2 '+' L 0 '+(eyAngleHeight+2)+' Z '),a;};var createStop=function(b){var a=document.createElementNS(svgNS,'stop');return a.setAttribute('id',b.id),a.setAttribute('offset',b.offset),a.setAttribute('stop-color',b.color),a.setAttribute('stop-opacity',b.opacity),a;};var intAnimateEyReverse=function(a){isForward=!1,tl.reverse(a),tl.timeScale;};var tlStart=function(){};var tlDotToLine=function(){isForward||tl.timeScale(4);};var tlUpdate=function(){};var tlComplete=function(){};var tlReverseComplete=function(){};
...\ No newline at end of file ...\ No newline at end of file
...@@ -192,14 +192,10 @@ ...@@ -192,14 +192,10 @@
192 </div> 192 </div>
193 </a> 193 </a>
194 194
195 <!-- jQuery-->
196 <script src="//code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script>
197
198 <!-- GREENSOCK--> 195 <!-- GREENSOCK-->
199 <!-- <script src="//www.greensock.com/js/src/utils/SplitText.min.js"></script> enables character or word animation -->
200 <script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script> 196 <script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
201 <script src="assets/DrawSVGPlugin.min.js"></script> 197 <script src="assets/DrawSVGPlugin.min.js"></script>
202 <script src="assets/ey-frame-svg-1.0.2.min.js"></script> 198 <script src="assets/ey-frame-svg-1.0.3.min.js"></script>
203 199
204 <script> 200 <script>
205 201
...@@ -213,26 +209,24 @@ ...@@ -213,26 +209,24 @@
213 tl.to("#arm", .8, {left:-20, top:9, ease:Power1.easeInOut, delay:.2 }); 209 tl.to("#arm", .8, {left:-20, top:9, ease:Power1.easeInOut, delay:.2 });
214 210
215 var myeySvg = initEySvgFrame(12, 259, 218); 211 var myeySvg = initEySvgFrame(12, 259, 218);
216 $("#border").append(myeySvg); 212 document.getElementById("border").appendChild(myeySvg);
217 animateEyFrame(1); 213 animateEyFrame(1);
218 animateGradient(.2); 214 animateGradient(.2);
219 215
220 tl.to("#txt1", d, {opacity:1, ease:Power1.easeInOut, delay:1.8 }); 216 tl.to("#txt1", d, {opacity:1, ease:Power1.easeInOut, delay:1.8 });
221 tl.to("#txt1", d, {opacity:0, ease:Power1.easeInOut, delay:2.5 }); 217 tl.to("#txt1", d, {opacity:0, ease:Power1.easeInOut, delay:2.5 });
222 218
223 //animateFill(2.3); 219 //animateFill(3.3);
220
224 tl.to("#txt2", d, {opacity:1, ease:Power1.easeInOut, delay:0 }); 221 tl.to("#txt2", d, {opacity:1, ease:Power1.easeInOut, delay:0 });
225 tl.to("#txt2", d, {opacity:0, ease:Power1.easeInOut, delay:3 }); 222 tl.to("#txt2", d, {opacity:0, ease:Power1.easeInOut, delay:3 });
223
224 animateEyReverse(10);
226 225
227 tl.to("#dot-1", .1, {opacity:1, ease:Power1.easeIn, delay:-.5 });
228 tl.to(myeySvg, d, {scaleY:.01, scaleX:.01, left:-102, top:0, ease:Power1.easeIn, delay:0 });
229 tl.to(myeySvg, .1, {opacity:0, ease:Power1.easeIn, delay:-.1 });
230 tl.to("#dot-1", .2, {opacity:0, ease:Power1.easeIn, delay:-.2});
231
232 226
233 // phase 2 227 // phase 2
234 228
235 tl.fromTo("#tag-mask", d, {width:0}, {width:320, ease:Linear.easeNone, delay:-.2 }); 229 tl.fromTo("#tag-mask", d, {width:0}, {width:320, ease:Linear.easeNone, delay:1.25 });
236 tl.fromTo("#dot-txt", d, {left:-12}, {left:321, ease:Linear.easeNone, delay:-d}); 230 tl.fromTo("#dot-txt", d, {left:-12}, {left:321, ease:Linear.easeNone, delay:-d});
237 tl.to("#tag1", d, {opacity:1, ease:Linear.easeNone, delay:-d }); 231 tl.to("#tag1", d, {opacity:1, ease:Linear.easeNone, delay:-d });
238 tl.fromTo("#dot-1", d, {left:-12, opacity:1}, {left:77, opacity:1, ease:Power3.easeOut, delay:0}); 232 tl.fromTo("#dot-1", d, {left:-12, opacity:1}, {left:77, opacity:1, ease:Power3.easeOut, delay:0});
...@@ -258,9 +252,7 @@ ...@@ -258,9 +252,7 @@
258 } 252 }
259 253
260 //--------------------- 254 //---------------------
261 $(document).ready(function(){ 255 stage1();
262 stage1();
263 });
264 256
265 257
266 258
......
1 /*!
2 * VERSION: 1.0.2
3 * DATE: 2016-05-03
4 *
5 * Requires:
6 * GSAP TweenMax
7 * GASP drawSVG Plugin ()
8 * This work is subject to the terms at http://greensock.com/standard-license or for
9 * Club GreenSock members, the software agreement that was issued with your membership.
10 *
11 * @license Copyright (c) 2016, Tenzing Communications Inc. All rights reserved.
12 *
13 * @author: Dan Rempel, dan@gotenzing.com
14
15 * Usage Example:
16 * var myEySvg = initEySvgFrame(10, 196, 193); // frame line weight, width, height
17 * document.getElementById("body").appendChild(myEySvg);
18 * animateEyFrame(2); // delay in seconds
19 * animateGradient(2); // delay in seconds
20 * animateFill(2); // delay in seconds
21 *
22 **/
23
24 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=0.2;var eyFrameDuration=1;var eyGradientDuration=1;var eyFillDuration=1;var eyColor='#FFD400';var svgNS='http://www.w3.org/2000/svg';var initEySvgFrame=function(b,d,f){tl=new TimelineMax(),eyDotSpacing=Math.floor(b*8.5/10),eyStrokeWeight=b,eySvgWidth=d,eySvgHeight=f;var h=10*Math.PI/180;eyAngleHeight=Math.tan(h)*(d-b);var a=document.createElementNS(svgNS,'svg');a.setAttribute('id','ey-frame'),a.setAttribute('width',d+'px'),a.setAttribute('height',f+'px'),a.setAttribute('viewBox','0 0 '+eySvgWidth+' '+eySvgHeight);var g=document.createElementNS(svgNS,'defs');a.appendChild(g);var c=document.createElementNS(svgNS,'linearGradient');c.setAttribute('id','linear-gradient'),c.setAttribute('x1','0%'),c.setAttribute('x2','0%'),c.setAttribute('y1','0%'),c.setAttribute('y2','100%'),g.appendChild(c);var e;return e=createStop({id:'stop-1',offset:'0%',color:'Black',opacity:'.7'}),c.appendChild(e),e=createStop({id:'stop-2',offset:'100%',color:'Black',opacity:'0'}),c.appendChild(e),eyGradient=createShape('ey-gradient','url(#linear-gradient)'),a.appendChild(eyGradient),eyDot1=createDot(1),a.appendChild(eyDot1),eyDot2=createDot(2),a.appendChild(eyDot2),eyDot3=createDot(3),a.appendChild(eyDot3),eyStroke=createPath('ey-stroke'),eyStroke.setAttribute('d',' M '+(eyStrokeWeight+eyDotSpacing)*3+' '+(eySvgHeight-b/2)+' H '+(d-b/2)+' V '+b/1.5+' L '+b/2+' '+(eyAngleHeight+b/2)+' V '+(f-b-eyDotSpacing)),a.appendChild(eyStroke),a;};var animateEyFrame=function(b){var a=0;tl.fromTo(eyDot1,eyDotDuration,{drawSVG:'0'},{drawSVG:'0 '+(a+=eyStrokeWeight+eyDotSpacing),ease:Power1.easeInOut,delay:b}),tl.fromTo(eyDot2,eyDotDuration,{drawSVG:'0'},{drawSVG:'0 '+(a+=eyStrokeWeight+eyDotSpacing),ease:Power1.easeInOut}),tl.fromTo(eyDot3,eyDotDuration,{drawSVG:'0'},{drawSVG:'0 '+(a+=eyStrokeWeight+eyDotSpacing),ease:Power1.easeInOut}),tl.fromTo(eyStroke,eyFrameDuration,{drawSVG:'0'},{drawSVG:'0 100%',ease:Power1.easeIn});};var animateGradient=function(a){tl.fromTo(eyGradient,0.5,{opacity:0},{opacity:1,delay:a});};var animateFill=function(a){(typeof eyFill==='undefined'||variable===null)&&(eyFill=createShape('ey-gradient',eyColor),eySvg.appendChild(eyFill)),tl.fromTo(eyFill,0.5,{y:eySvgHeight},{y:0,ease:Power2.easeIn,delay:a});};var createPath=function(b){var a=document.createElementNS(svgNS,'path');return a.setAttribute('id',b),a.setAttribute('fill','none'),a.setAttribute('stroke',eyColor),a.setAttribute('stroke-width',eyStrokeWeight),a.setAttribute('stroke-miterlimit','10'),a;};var createDot=function(b){var a=createPath('ey-dot'+b);return a.setAttribute('d',' M '+(eyStrokeWeight+eyDotSpacing)*(b-1)+' '+(eySvgHeight-eyStrokeWeight/2)+' h '+eyStrokeWeight),a;};var createShape=function(b,c){var a=document.createElementNS(svgNS,'path');return a.setAttribute('id',b),a.setAttribute('fill',c),a.setAttribute('d',' M 0 '+eySvgHeight+' H '+eySvgWidth+' V 2 '+' L 0 '+(eyAngleHeight+2)+' Z '),a;};var createStop=function(b){var a=document.createElementNS(svgNS,'stop');return a.setAttribute('id',b.id),a.setAttribute('offset',b.offset),a.setAttribute('stop-color',b.color),a.setAttribute('stop-opacity',b.opacity),a;};
...\ No newline at end of file ...\ No newline at end of file
1 /*! 1 /*!
2 * VERSION: 1.0.2 2 * VERSION: 1.0.3
3 * DATE: 2016-05-03 3 * DATE: 2016-05-04
4 * 4 *
5 * Requires: 5 * Requires:
6 * GSAP TweenMax 6 * GSAP TweenMax (import com.greensock.*;)
7 * GASP drawSVG Plugin () 7 * GASP drawSVG Plugin ()
8 * This work is subject to the terms at http://greensock.com/standard-license or for 8 * This work is subject to the terms at http://greensock.com/standard-license or for
9 * Club GreenSock members, the software agreement that was issued with your membership. 9 * Club GreenSock members, the software agreement that was issued with your membership.
...@@ -45,6 +45,7 @@ var eyGradientDuration = 1; // seconds for animation ...@@ -45,6 +45,7 @@ var eyGradientDuration = 1; // seconds for animation
45 var eyFillDuration = 1; // seconds for animation 45 var eyFillDuration = 1; // seconds for animation
46 var eyColor = "#FFD400"; 46 var eyColor = "#FFD400";
47 var svgNS = "http://www.w3.org/2000/svg"; 47 var svgNS = "http://www.w3.org/2000/svg";
48 var isForward = true;
48 49
49 /** 50 /**
50 myWeight:Number - the width of the line of the frame in pixels 51 myWeight:Number - the width of the line of the frame in pixels
...@@ -58,7 +59,8 @@ var initEySvgFrame = function (myWeight, myWidth, myHeight) ...@@ -58,7 +59,8 @@ var initEySvgFrame = function (myWeight, myWidth, myHeight)
58 { 59 {
59 //// calculate all the points and variables to assist in drawing //// 60 //// calculate all the points and variables to assist in drawing ////
60 61
61 tl = new TimelineMax(); 62 tl = new TimelineMax({onStart:tlStart, onUpdate:tlUpdate, onComplete:tlComplete, onReverseComplete:tlReverseComplete });
63
62 eyDotSpacing = Math.floor(myWeight*8.5/10); // EY ratio of weight to spacing 64 eyDotSpacing = Math.floor(myWeight*8.5/10); // EY ratio of weight to spacing
63 eyStrokeWeight = myWeight; 65 eyStrokeWeight = myWeight;
64 eySvgWidth = myWidth; 66 eySvgWidth = myWidth;
...@@ -129,12 +131,19 @@ var initEySvgFrame = function (myWeight, myWidth, myHeight) ...@@ -129,12 +131,19 @@ var initEySvgFrame = function (myWeight, myWidth, myHeight)
129 131
130 var animateEyFrame = function (myDelay) 132 var animateEyFrame = function (myDelay)
131 { 133 {
134 isForward = true;
135 tl.timeScale(1);
132 var lastPt = 0; 136 var lastPt = 0;
133 tl.fromTo(eyDot1, eyDotDuration, {drawSVG:"0"}, {drawSVG:"0 "+(lastPt+=(eyStrokeWeight+eyDotSpacing)), ease:Power1.easeInOut, delay:myDelay }); 137 tl.fromTo(eyDot1, eyDotDuration, {drawSVG:"0"}, {drawSVG:"0 "+(lastPt+=(eyStrokeWeight+eyDotSpacing)), ease:Power1.easeInOut, delay:myDelay });
134 tl.fromTo(eyDot2, eyDotDuration, {drawSVG:"0"}, {drawSVG:"0 "+(lastPt+=(eyStrokeWeight+eyDotSpacing)), ease:Power1.easeInOut }); 138 tl.fromTo(eyDot2, eyDotDuration, {drawSVG:"0"}, {drawSVG:"0 "+(lastPt+=(eyStrokeWeight+eyDotSpacing)), ease:Power1.easeInOut });
135 tl.fromTo(eyDot3, eyDotDuration, {drawSVG:"0"}, {drawSVG:"0 "+(lastPt+=(eyStrokeWeight+eyDotSpacing)), ease:Power1.easeInOut }); 139 tl.fromTo(eyDot3, eyDotDuration, {drawSVG:"0"}, {drawSVG:"0 "+(lastPt+=(eyStrokeWeight+eyDotSpacing)), ease:Power1.easeInOut });
140 tl.call(tlDotToLine, []);
136 tl.fromTo(eyStroke, eyFrameDuration, {drawSVG:"0"}, {drawSVG:"0 100%", ease:Power1.easeIn}); 141 tl.fromTo(eyStroke, eyFrameDuration, {drawSVG:"0"}, {drawSVG:"0 100%", ease:Power1.easeIn});
137 }; 142 };
143 var animateEyReverse = function (myDelay)
144 {
145 TweenMax.delayedCall(myDelay, intAnimateEyReverse, [0]);
146 }
138 147
139 var animateGradient = function (myDelay) 148 var animateGradient = function (myDelay)
140 { 149 {
...@@ -202,6 +211,40 @@ var createStop = function (myStopObj) ...@@ -202,6 +211,40 @@ var createStop = function (myStopObj)
202 return myStop; 211 return myStop;
203 }; 212 };
204 213
214 var intAnimateEyReverse = function (time)
215 {
216 isForward = false;
217 tl.reverse(time);
218 // need to timescale the last 3 dots bit
219 tl.timeScale
220 // tl.smoothChildTiming = true;
221 //isForward
222 }
223 var tlStart = function ()
224 {
225
226 };
227 var tlDotToLine = function ()
228 {
229 if(!isForward)
230 {
231 tl.timeScale(4);
232 }
233 };
234 var tlUpdate = function ()
235 {
236
237 };
238 var tlComplete = function ()
239 {
240
241 };
242 var tlReverseComplete = function ()
243 {
244
245 };
246
247
205 248
206 249
207 250
......
1 /*!
2 * VERSION: 1.0.3
3 * DATE: 2016-05-04
4 *
5 * Requires:
6 * GSAP TweenMax (import com.greensock.*;)
7 * GASP drawSVG Plugin ()
8 * This work is subject to the terms at http://greensock.com/standard-license or for
9 * Club GreenSock members, the software agreement that was issued with your membership.
10 *
11 * @license Copyright (c) 2016, Tenzing Communications Inc. All rights reserved.
12 *
13 * @author: Dan Rempel, dan@gotenzing.com
14
15 * Usage Example:
16 * var myEySvg = initEySvgFrame(10, 196, 193); // frame line weight, width, height
17 * document.getElementById("body").appendChild(myEySvg);
18 * animateEyFrame(2); // delay in seconds
19 * animateGradient(2); // delay in seconds
20 * animateFill(2); // delay in seconds
21 *
22 **/
23
24 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=0.2;var eyFrameDuration=1;var eyGradientDuration=1;var eyFillDuration=1;var eyColor='#FFD400';var svgNS='http://www.w3.org/2000/svg';var isForward=!0;var initEySvgFrame=function(b,d,f){tl=new TimelineMax({onStart:tlStart,onUpdate:tlUpdate,onComplete:tlComplete,onReverseComplete:tlReverseComplete}),eyDotSpacing=Math.floor(b*8.5/10),eyStrokeWeight=b,eySvgWidth=d,eySvgHeight=f;var h=10*Math.PI/180;eyAngleHeight=Math.tan(h)*(d-b);var a=document.createElementNS(svgNS,'svg');a.setAttribute('id','ey-frame'),a.setAttribute('width',d+'px'),a.setAttribute('height',f+'px'),a.setAttribute('viewBox','0 0 '+eySvgWidth+' '+eySvgHeight);var g=document.createElementNS(svgNS,'defs');a.appendChild(g);var c=document.createElementNS(svgNS,'linearGradient');c.setAttribute('id','linear-gradient'),c.setAttribute('x1','0%'),c.setAttribute('x2','0%'),c.setAttribute('y1','0%'),c.setAttribute('y2','100%'),g.appendChild(c);var e;return e=createStop({id:'stop-1',offset:'0%',color:'Black',opacity:'.7'}),c.appendChild(e),e=createStop({id:'stop-2',offset:'100%',color:'Black',opacity:'0'}),c.appendChild(e),eyGradient=createShape('ey-gradient','url(#linear-gradient)'),a.appendChild(eyGradient),eyDot1=createDot(1),a.appendChild(eyDot1),eyDot2=createDot(2),a.appendChild(eyDot2),eyDot3=createDot(3),a.appendChild(eyDot3),eyStroke=createPath('ey-stroke'),eyStroke.setAttribute('d',' M '+(eyStrokeWeight+eyDotSpacing)*3+' '+(eySvgHeight-b/2)+' H '+(d-b/2)+' V '+b/1.5+' L '+b/2+' '+(eyAngleHeight+b/2)+' V '+(f-b-eyDotSpacing)),a.appendChild(eyStroke),a;};var animateEyFrame=function(b){isForward=!0,tl.timeScale(1);var a=0;tl.fromTo(eyDot1,eyDotDuration,{drawSVG:'0'},{drawSVG:'0 '+(a+=eyStrokeWeight+eyDotSpacing),ease:Power1.easeInOut,delay:b}),tl.fromTo(eyDot2,eyDotDuration,{drawSVG:'0'},{drawSVG:'0 '+(a+=eyStrokeWeight+eyDotSpacing),ease:Power1.easeInOut}),tl.fromTo(eyDot3,eyDotDuration,{drawSVG:'0'},{drawSVG:'0 '+(a+=eyStrokeWeight+eyDotSpacing),ease:Power1.easeInOut}),tl.call(tlDotToLine,[]),tl.fromTo(eyStroke,eyFrameDuration,{drawSVG:'0'},{drawSVG:'0 100%',ease:Power1.easeIn});};var animateEyReverse=function(a){TweenMax.delayedCall(a,intAnimateEyReverse,[0]);};var animateGradient=function(a){tl.fromTo(eyGradient,0.5,{opacity:0},{opacity:1,delay:a});};var animateFill=function(a){(typeof eyFill==='undefined'||variable===null)&&(eyFill=createShape('ey-gradient',eyColor),eySvg.appendChild(eyFill)),tl.fromTo(eyFill,0.5,{y:eySvgHeight},{y:0,ease:Power2.easeIn,delay:a});};var createPath=function(b){var a=document.createElementNS(svgNS,'path');return a.setAttribute('id',b),a.setAttribute('fill','none'),a.setAttribute('stroke',eyColor),a.setAttribute('stroke-width',eyStrokeWeight),a.setAttribute('stroke-miterlimit','10'),a;};var createDot=function(b){var a=createPath('ey-dot'+b);return a.setAttribute('d',' M '+(eyStrokeWeight+eyDotSpacing)*(b-1)+' '+(eySvgHeight-eyStrokeWeight/2)+' h '+eyStrokeWeight),a;};var createShape=function(b,c){var a=document.createElementNS(svgNS,'path');return a.setAttribute('id',b),a.setAttribute('fill',c),a.setAttribute('d',' M 0 '+eySvgHeight+' H '+eySvgWidth+' V 2 '+' L 0 '+(eyAngleHeight+2)+' Z '),a;};var createStop=function(b){var a=document.createElementNS(svgNS,'stop');return a.setAttribute('id',b.id),a.setAttribute('offset',b.offset),a.setAttribute('stop-color',b.color),a.setAttribute('stop-opacity',b.opacity),a;};var intAnimateEyReverse=function(a){isForward=!1,tl.reverse(a),tl.timeScale;};var tlStart=function(){};var tlDotToLine=function(){isForward||tl.timeScale(4);};var tlUpdate=function(){};var tlComplete=function(){};var tlReverseComplete=function(){};
...\ No newline at end of file ...\ No newline at end of file