Skip to content

Tenzing / banners-with-skip

Go to a project
Toggle navigation
Toggle navigation pinning
f00a2358 by Dan Rempel
Options

EY global 300x600 done, but without expanding?

1 parent 590a3ef0
Inline Side-by-side
Showing 26 changed files with 523 additions and 183 deletions
...@@ -109,7 +109,7 @@ ...@@ -109,7 +109,7 @@
109 <ul> 109 <ul>
110 <li class="dot1"></li> 110 <li class="dot1"></li>
111 <li class="dot2"></li> 111 <li class="dot2"></li>
112 <li class="dot3"></div> 112 <li class="dot3"></li>
113 </ul> 113 </ul>
114 114
115 </div> 115 </div>
......
1 <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 ...\ No newline at end of file
1 <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 ...\ No newline at end of file
1 /*!
2 * VERSION: 0.0.10
3 * DATE: 2016-02-11
4 * UPDATES AND DOCS AT: http://greensock.com
5 *
6 * @license Copyright (c) 2008-2016, GreenSock. All rights reserved.
7 * DrawSVGPlugin is a Club GreenSock membership benefit; You must have a valid membership to use
8 * this code without violating the terms of use. Visit http://greensock.com/club/ to sign up or get more details.
9 * This work is subject to the software agreement that was issued with your membership.
10 *
11 * @author: Jack Doyle, jack@greensock.com
12 */
13 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 ...\ No newline at end of file
1 /*!
2 * VERSION: 1.0.1
3 * DATE: 2016-04-28
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=.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 ...\ No newline at end of file
1 <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="182.35" height="95.75" viewBox="0 0 182.35 95.75"><defs><style>.cls-1{fill:#77bc1f;}.cls-2{fill:#009bde;}.cls-3{fill:#f7a800;}.cls-4{fill:#55565a;}.cls-5{clip-path:url(#clip-path);}.cls-6{fill:#fff;fill-rule:evenodd;}.cls-7{clip-path:url(#clip-path-2);}</style><clipPath id="clip-path" transform="translate(-3.46 -3.87)"><path class="cls-1" d="M83.56,18.43a5.26,5.26,0,0,0-1-.54,6,6,0,0,0-2.37-.44,17.68,17.68,0,0,0-3,.35c-0.58.1-1.13,0.2-1.68,0.26l-0.21,0a23.79,23.79,0,0,1-2.89.22,21.58,21.58,0,0,1-2.82-.21,0.07,0.07,0,0,0-.07,0,0.07,0.07,0,0,0,0,.07,19.28,19.28,0,0,1,2.9,5.17c0.2,0.47.38,1,.56,1.44a9.87,9.87,0,0,0,2.91,4.78A5.38,5.38,0,0,0,77,30.2a6.69,6.69,0,0,0,2.81.62A6.78,6.78,0,0,0,83.56,18.43Z"/></clipPath><clipPath id="clip-path-2" transform="translate(-3.46 -3.87)"><path class="cls-2" d="M101,15c-0.24-1.86-1.46-3.31-2.63-4.7C97.94,9.88,97.58,9.46,97.25,9l-0.13-.17a19.25,19.25,0,0,1-2.87-4.94,0.07,0.07,0,0,0-.06,0h0a0.07,0.07,0,0,0-.06,0,19.28,19.28,0,0,1-3,5.11c-0.3.4-.64,0.81-1,1.2a9.88,9.88,0,0,0-2.67,4.92,5.35,5.35,0,0,0,0,1.23,6.71,6.71,0,0,0,6.72,6.08h0a6.77,6.77,0,0,0,6.75-6.3A5.21,5.21,0,0,0,101,15Zm-6.75,7.33h0Z"/></clipPath></defs><title>logo</title><path class="cls-3" d="M118.65,18.11a18.45,18.45,0,0,1-2.78.19,21.82,21.82,0,0,1-4.09-.38,20.33,20.33,0,0,0-3.7-.48,6.34,6.34,0,0,0-2.72.6,6.94,6.94,0,0,0-3.24,3.68,6.86,6.86,0,0,0,.14,5.36,6.41,6.41,0,0,0,5.9,3.73,4.7,4.7,0,0,0,2.31-.53,5.82,5.82,0,0,0,2.77-3.64,4.58,4.58,0,0,0-.43-3.51,4,4,0,0,0-3.51-2.06,3.82,3.82,0,0,0-1.77.42A2.9,2.9,0,0,0,106.09,24a2.37,2.37,0,0,0,1.08,2.14,1.94,1.94,0,0,0,1,.26,1.73,1.73,0,0,0,1.53-.84,1.23,1.23,0,0,0,.06-1.16,1.38,1.38,0,0,1,.39,1.14,2.25,2.25,0,0,1-1.4,1.87,3.21,3.21,0,0,1-1.08.2A3.12,3.12,0,0,1,105,25.7a4.23,4.23,0,0,1,1.93-5.45,5,5,0,0,1,2.31-.54A5.5,5.5,0,0,1,113,21.24c2.55,2.39,1,6.12.94,6.16a0.07,0.07,0,0,0,0,.09,0.07,0.07,0,0,0,.09,0,24,24,0,0,0,1.2-2.76c0.32-.79.68-1.69,1-2.51a25.49,25.49,0,0,1,2.39-4,0.07,0.07,0,0,0,0-.08A0.06,0.06,0,0,0,118.65,18.11Z" transform="translate(-3.46 -3.87)"/><path class="cls-4" d="M29,73.2h-1.1L27.84,68.8,26,73.27h-0.7l-1.8-4.39L23.31,73.2H22.38l0.25-6.53h1.06l2.06,5.07,2.11-5.07h1Z" transform="translate(-3.46 -3.87)"/><path class="cls-4" d="M36.57,71a2.35,2.35,0,0,1-2.63,2.3c-1.71,0-2.63-.91-2.63-2.26v-4.4h1.13v4.28A1.36,1.36,0,0,0,34,72.48a1.45,1.45,0,0,0,1.54-1.53V66.67h1V71Z" transform="translate(-3.46 -3.87)"/><path class="cls-4" d="M38.42,66.67H43.7v0.84H41.63V73.2H40.5V67.51H38.42V66.67Z" transform="translate(-3.46 -3.87)"/><path class="cls-4" d="M50.82,71a2.35,2.35,0,0,1-2.63,2.3c-1.71,0-2.63-.91-2.63-2.26v-4.4h1.13v4.28a1.36,1.36,0,0,0,1.59,1.53,1.45,1.45,0,0,0,1.54-1.53V66.67h1V71Z" transform="translate(-3.46 -3.87)"/><path class="cls-4" d="M53.14,73.2h-1l2.65-6.55h0.68l2.41,6.55H56.7l-0.6-1.62H53.78ZM55,68.46l-0.91,2.36h1.76Z" transform="translate(-3.46 -3.87)"/><path class="cls-4" d="M60.82,72.37h2.43V73.2H59.69V66.67h1.13v5.7Z" transform="translate(-3.46 -3.87)"/><path class="cls-4" d="M68.49,73.2V66.67h1.12V73.2H68.49Z" transform="translate(-3.46 -3.87)"/><path class="cls-4" d="M77.63,66.67V73.2h-1L73,68.49V73.2H72V66.67h1l3.72,4.78V66.67h1Z" transform="translate(-3.46 -3.87)"/><path class="cls-4" d="M81.69,72.5a1,1,0,0,0,1.12-.87c0-.62-0.69-1-1.4-1.4a2.53,2.53,0,0,1-1.54-2,1.83,1.83,0,0,1,2-1.71,4,4,0,0,1,1.79.36l-0.32.78a2.94,2.94,0,0,0-1.3-.31,0.85,0.85,0,0,0-1,.7c0,0.63.62,0.91,1.34,1.37s1.66,1,1.66,2a2.19,2.19,0,0,1-2.32,1.9,4,4,0,0,1-2-.46L80,72.11A3.78,3.78,0,0,0,81.69,72.5Z" transform="translate(-3.46 -3.87)"/><path class="cls-4" d="M91.35,71a2.35,2.35,0,0,1-2.63,2.3c-1.71,0-2.63-.91-2.63-2.26v-4.4h1.13v4.28a1.36,1.36,0,0,0,1.59,1.53,1.45,1.45,0,0,0,1.54-1.53V66.67h1V71Z" transform="translate(-3.46 -3.87)"/><path class="cls-4" d="M97.33,73.3l-1.83-3H94.83V73.2H93.7V66.67h1.82c1.58,0,2.34.86,2.34,1.68A1.84,1.84,0,0,1,96.61,70l2,3.18Zm-1.91-3.8a1.15,1.15,0,0,0,1.32-1,1.1,1.1,0,0,0-1.31-1H94.83V69.5h0.6Z" transform="translate(-3.46 -3.87)"/><path class="cls-4" d="M100.57,73.2h-1l2.65-6.55h0.68l2.41,6.55h-1.17l-0.6-1.62h-2.33Zm1.84-4.74-0.91,2.36h1.76Z" transform="translate(-3.46 -3.87)"/><path class="cls-4" d="M112.72,66.67V73.2h-1l-3.68-4.71V73.2h-1V66.67h1l3.72,4.78V66.67h1Z" transform="translate(-3.46 -3.87)"/><path class="cls-4" d="M120.47,72.79a4.15,4.15,0,0,1-2.3.54,3.39,3.39,0,0,1,0-6.79,4,4,0,0,1,2.2.49l-0.32.78a3.77,3.77,0,0,0-1.79-.4A2.39,2.39,0,0,0,116,69.94a2.42,2.42,0,0,0,2.29,2.52,3.44,3.44,0,0,0,1.79-.41Z" transform="translate(-3.46 -3.87)"/><path class="cls-4" d="M126.37,73.2h-3.95V66.67h3.83V67.5h-2.7v1.92h2v0.83h-2v2.12h2.82V73.2Z" transform="translate(-3.46 -3.87)"/><path class="cls-4" d="M135,73.33a3.39,3.39,0,1,1,0-6.79,4.74,4.74,0,0,1,2.17.44l-0.33.8a4.19,4.19,0,0,0-1.79-.37,2.41,2.41,0,0,0-2.28,2.53,2.38,2.38,0,0,0,2.36,2.52,3,3,0,0,0,1.18-.17v-1.9h1.11v2.45A5.36,5.36,0,0,1,135,73.33Z" transform="translate(-3.46 -3.87)"/><path class="cls-4" d="M143.09,73.3l-1.83-3h-0.68V73.2h-1.13V66.67h1.82c1.58,0,2.34.86,2.34,1.68A1.84,1.84,0,0,1,142.37,70l2,3.18Zm-1.91-3.8a1.15,1.15,0,0,0,1.32-1,1.1,1.1,0,0,0-1.31-1h-0.61V69.5h0.6Z" transform="translate(-3.46 -3.87)"/><path class="cls-4" d="M151.94,69.94a3.24,3.24,0,0,1-3.31,3.39,3.18,3.18,0,0,1-3.31-3.39,3.26,3.26,0,0,1,3.31-3.4A3.16,3.16,0,0,1,151.94,69.94Zm-5.42,0c0,1.47.81,2.57,2.11,2.57s2.11-1.1,2.11-2.57-0.81-2.58-2.11-2.58S146.53,68.44,146.53,69.94Z" transform="translate(-3.46 -3.87)"/><path class="cls-4" d="M159.31,71a2.35,2.35,0,0,1-2.63,2.3c-1.71,0-2.63-.91-2.63-2.26v-4.4h1.13v4.28a1.36,1.36,0,0,0,1.59,1.53,1.45,1.45,0,0,0,1.54-1.53V66.67h1V71Z" transform="translate(-3.46 -3.87)"/><path class="cls-4" d="M161.65,73.2V66.67h1.9c1.53,0,2.26.87,2.26,1.78a2.06,2.06,0,0,1-2.3,1.91h-0.75V73.2h-1.11Zm1.67-3.6a1.17,1.17,0,0,0,1.32-1.13,1.13,1.13,0,0,0-1.32-1h-0.57V69.6h0.57Z" transform="translate(-3.46 -3.87)"/><path class="cls-4" d="M19.82,41.75a33.56,33.56,0,0,0-2.46,5l-0.16.36L17,47c-0.49-3.21-2.4-5.21-4.89-5.21-3.21,0-5.05,3.24-5.05,8.94,0,6.25,2.14,9.78,5.93,9.78,2.91,0,4.73-2,5.05-5.7,0-.45.19-0.65,0.55-0.65s0.62,0.32.62,1c0,4-2.72,6.64-6.77,6.64-5.44,0-9-4.15-9-10.52s3.72-10.85,8.87-10.85a8.31,8.31,0,0,1,3.92.87,5.43,5.43,0,0,0,1.94.45,2.49,2.49,0,0,0,1.52-.45L20,41.42A2.89,2.89,0,0,1,19.82,41.75Z" transform="translate(-3.46 -3.87)"/><path class="cls-4" d="M28.68,61.62c-4.64,0-7.84-3.73-7.84-9.15s3-9.12,7.69-9.12S36,47,36,52.76C36,58.15,33.12,61.62,28.68,61.62ZM28.5,44.56c-3,0-4.64,2.85-4.64,8.26,0,5,1.54,7.64,4.56,7.64s4.47-2.68,4.47-7.95C32.89,47,31.58,44.56,28.5,44.56Z" transform="translate(-3.46 -3.87)"/><path class="cls-4" d="M43,61.48H36.67L37,61.34c2.11-1.2,2.54-2,2.54-4.56V45.27l-1.82-1.74h7.18l-2,1.82L46.76,57,51,45.36l-1.68-1.82h7l-1.91,1.94v14.3l1.71,1.71H49.75l1.94-1.71V47.09L46.5,61.4h-1L41.71,50.17v7.35c0,2,.14,2.42,1.11,3.45l0.47,0.52H43Z" transform="translate(-3.46 -3.87)"/><path class="cls-4" d="M64.56,61.48H58.23l0.29-.14c2.11-1.2,2.54-2,2.54-4.56V45.27l-1.82-1.74h7.18l-2,1.82L68.32,57l4.22-11.65-1.68-1.82h7L76,45.47v14.3l1.71,1.71H71.31l1.94-1.71V47.09L68.06,61.4h-1L63.28,50.17v7.35c0,2,.14,2.42,1.11,3.45l0.47,0.52h-0.3Z" transform="translate(-3.46 -3.87)"/><path class="cls-4" d="M87.35,61.62c-4.64,0-7.84-3.73-7.84-9.15s3-9.12,7.69-9.12,7.46,3.68,7.46,9.4C94.67,58.15,91.79,61.62,87.35,61.62ZM87.17,44.56c-3,0-4.64,2.85-4.64,8.26,0,5,1.54,7.64,4.56,7.64s4.47-2.68,4.47-7.95C91.56,47,90.25,44.56,87.17,44.56Z" transform="translate(-3.46 -3.87)"/><path class="cls-4" d="M99.16,46.49v8c0,5,.44,6,2.84,6.76H95.23c2.25-.8,2.82-1.8,2.82-5V45.1L96.2,43.53h7l-2,1.34L108,58V47.83c0-2.62-.4-3.33-2.37-4.3H112c-2.25,1.17-2.74,2-2.74,4.7V61.48h-2.36Z" transform="translate(-3.46 -3.87)"/><path class="cls-4" d="M124.89,48.57L122,59l0.23,0.85,1.85,1.62h-6.61l1.91-1.62-4-14.56-2.08-1.77h6.78l-1.91,1.77,3.19,11.45,0.51-1.68,0.17-.68,3-10.86h1.31l3.62,13.11,0.46-1.57,0.17-.68,1.31-4.7a26.06,26.06,0,0,0,1.23-5.78,2.49,2.49,0,0,0-1.4-2.34,24.26,24.26,0,0,0,6.27-3l0.23,0.2c-2.56,2.85-3.45,4.7-5.24,11.23l-2.39,8.78,0.28,1.08,1.91,1.62H126.2L128,59.86Z" transform="translate(-3.46 -3.87)"/><path class="cls-4" d="M139.39,52.36c-0.14,0-.26,0-0.34,0a4.14,4.14,0,0,0-2.59,1.05,2.66,2.66,0,0,1,2.93-2.22v-6l-2.11-1.68H152.1a11.66,11.66,0,0,0-2.48,4.27c-0.09-.2-0.17-0.37-0.2-0.46-1-2.22-1.77-2.65-4.64-2.65-1,0-1.48,0-2.65.06v6.41h3.79l1.79-2.48v6l-1.79-2.31h-3.79v7.81h1.45c3.53,0,4.81-.43,5.7-2L150,56.92c0-.06.09-0.17,0.17-0.31a7.88,7.88,0,0,0,2.68,4.67H137.28l2.11-1.68V52.36Z" transform="translate(-3.46 -3.87)"/><path class="cls-4" d="M161.92,60.43c3,0,4.36-1.2,4.87-4.22a16.34,16.34,0,0,0,2.71,5.27H155l1.91-1.65V45.3L155,43.53h6.64l-2,1.91V60.35Z" transform="translate(-3.46 -3.87)"/><path class="cls-4" d="M178.24,60.43c3,0,4.36-1.2,4.87-4.22a16.34,16.34,0,0,0,2.71,5.27H171.29l1.91-1.65V45.3l-1.91-1.77h6.64l-2,1.91V60.35Z" transform="translate(-3.46 -3.87)"/><path class="cls-2" d="M52.11,94l-0.64,3.61H50.59L51.23,94h0.88Zm0.3-1.37a0.64,0.64,0,0,1-.58.49,0.41,0.41,0,0,1-.41-0.49A0.64,0.64,0,0,1,52,92.17,0.42,0.42,0,0,1,52.41,92.66Z" transform="translate(-3.46 -3.87)"/><path class="cls-2" d="M55.7,97.65l0.42-2.39a0.45,0.45,0,0,0-.46-0.62,2.05,2.05,0,0,0-1,.35l-0.47,2.66H53.33L54,94h0.84l0,0.38A2.26,2.26,0,0,1,56.13,94a0.84,0.84,0,0,1,.9,1.11l-0.46,2.59H55.7Z" transform="translate(-3.46 -3.87)"/><path class="cls-2" d="M61,97.65l0-.32a2,2,0,0,1-1.2.4,1.34,1.34,0,0,1-1.35-1.81,2.23,2.23,0,0,1,2-2,1.88,1.88,0,0,1,1.07.24L62,92l0.9-.11-1,5.8H61Zm-0.39-3.1a1.39,1.39,0,0,0-1.17,1.35c-0.17,1,.31,1.22.72,1.22a1.79,1.79,0,0,0,1-.36l0.35-2A1.6,1.6,0,0,0,60.64,94.54Z" transform="translate(-3.46 -3.87)"/><path class="cls-2" d="M65.24,94l-0.64,3.61H63.73L64.37,94h0.88Zm0.3-1.37a0.64,0.64,0,0,1-.58.49,0.41,0.41,0,0,1-.41-0.49,0.64,0.64,0,0,1,.58-0.49A0.42,0.42,0,0,1,65.54,92.66Z" transform="translate(-3.46 -3.87)"/><path class="cls-2" d="M67.55,94L68,96.44,69.33,94h0.76L67.94,97.7H67.45L66.7,94h0.85Z" transform="translate(-3.46 -3.87)"/><path class="cls-2" d="M72.35,94l-0.64,3.61H70.84L71.47,94h0.88Zm0.3-1.37a0.64,0.64,0,0,1-.58.49,0.41,0.41,0,0,1-.41-0.49,0.64,0.64,0,0,1,.58-0.49A0.42,0.42,0,0,1,72.65,92.66Z" transform="translate(-3.46 -3.87)"/><path class="cls-2" d="M76.19,97.65l0-.32a2,2,0,0,1-1.2.4,1.34,1.34,0,0,1-1.35-1.81,2.23,2.23,0,0,1,2-2,1.88,1.88,0,0,1,1.07.24L77.16,92l0.9-.11-1,5.8H76.19Zm-0.39-3.1a1.39,1.39,0,0,0-1.17,1.35c-0.17,1,.31,1.22.72,1.22a1.79,1.79,0,0,0,1-.36l0.35-2A1.6,1.6,0,0,0,75.81,94.54Z" transform="translate(-3.46 -3.87)"/><path class="cls-2" d="M80.39,94L80,96.42c-0.06.36,0,.62,0.43,0.62a1.8,1.8,0,0,0,.94-0.35L81.81,94h0.88l-0.64,3.61H81.22l0-.38a2.34,2.34,0,0,1-1.35.46A0.82,0.82,0,0,1,79,96.62L79.51,94h0.89Z" transform="translate(-3.46 -3.87)"/><path class="cls-2" d="M84.79,97.73a0.82,0.82,0,0,1-.94-1,1.61,1.61,0,0,1,1.62-1.21l0.77,0,0.05-.3a0.48,0.48,0,0,0-.55-0.64,2.7,2.7,0,0,0-1.05.24l-0.12-.47A3.68,3.68,0,0,1,86.1,94,0.9,0.9,0,0,1,87.19,95l-0.36,2.06a1.57,1.57,0,0,0,0,.57H85.93a0.65,0.65,0,0,1,0-.32A2.06,2.06,0,0,1,84.79,97.73ZM86.14,96l-0.52,0a0.91,0.91,0,0,0-1,.61c-0.06.36,0.21,0.48,0.52,0.48a1.6,1.6,0,0,0,.8-0.31Z" transform="translate(-3.46 -3.87)"/><path class="cls-2" d="M89.62,92l0.91-.11-1,5.8H88.62Z" transform="translate(-3.46 -3.87)"/><path class="cls-2" d="M92.53,97.15a0.57,0.57,0,0,0,.61-0.38,0.94,0.94,0,0,0-.66-0.66A1.07,1.07,0,0,1,91.76,95,1.36,1.36,0,0,1,93.17,94a2.15,2.15,0,0,1,1.14.26L94,94.74a1.84,1.84,0,0,0-.86-0.22,0.5,0.5,0,0,0-.55.34,0.86,0.86,0,0,0,.64.64A1.19,1.19,0,0,1,94,96.63a1.52,1.52,0,0,1-1.54,1.1,2.48,2.48,0,0,1-1.28-.29l0.32-.54A2.62,2.62,0,0,0,92.53,97.15Z" transform="translate(-3.46 -3.87)"/><path class="cls-2" d="M96.63,97.14a0.71,0.71,0,0,1-.69.55,0.46,0.46,0,0,1-.48-0.55,0.7,0.7,0,0,1,.67-0.56A0.47,0.47,0,0,1,96.63,97.14Z" transform="translate(-3.46 -3.87)"/><path class="cls-2" d="M102.54,97.73a0.78,0.78,0,0,1-.89-1L102,94.57h-0.65l0.09-.53h0.65l0.58-1.49h0.53L103,94h1l-0.09.53h-1l-0.34,1.91c-0.08.43,0,.59,0.37,0.66a2,2,0,0,0,.62,0l0,0.49A5,5,0,0,1,102.54,97.73Z" transform="translate(-3.46 -3.87)"/><path class="cls-2" d="M108.87,95.84a2.29,2.29,0,0,1-2.3,1.89,1.52,1.52,0,0,1-1.63-1.89A2.29,2.29,0,0,1,107.24,94,1.52,1.52,0,0,1,108.87,95.84Zm-3,0a0.94,0.94,0,0,0,.79,1.3,1.45,1.45,0,0,0,1.24-1.3,1,1,0,0,0-.78-1.31A1.36,1.36,0,0,0,105.89,95.84Z" transform="translate(-3.46 -3.87)"/><path class="cls-2" d="M111.61,96.27a0.65,0.65,0,0,0-.69.36c-0.06.32,0.32,0.35,0.55,0.35h1a0.93,0.93,0,0,1,1.05,1.26,2.29,2.29,0,0,1-2.13,1.37c-0.94,0-1.93-.22-1.79-1a1.41,1.41,0,0,1,.83-1,0.7,0.7,0,0,1-.31-0.79,1.28,1.28,0,0,1,.8-0.91,0.75,0.75,0,0,1-.3-0.81A1.53,1.53,0,0,1,112.23,94a2.39,2.39,0,0,1,.7.08h1.4l-0.08.47h-0.78a0.76,0.76,0,0,1,.15.61A1.56,1.56,0,0,1,112,96.27h-0.36Zm-1.21,2.22C110.34,98.9,111,99,111.46,99a1.42,1.42,0,0,0,1.29-.72c0.14-.42-0.12-0.6-0.49-0.6h-1.17A1.32,1.32,0,0,0,110.4,98.49Zm1.06-3.37a0.5,0.5,0,0,0,.55.62,0.73,0.73,0,0,0,.77-0.62,0.51,0.51,0,0,0-.54-0.64A0.8,0.8,0,0,0,111.46,95.12Z" transform="translate(-3.46 -3.87)"/><path class="cls-2" d="M117,97.13a2.39,2.39,0,0,0,1-.19l0.11,0.48a3.18,3.18,0,0,1-1.51.3,1.41,1.41,0,0,1-1.49-1.85A2.25,2.25,0,0,1,117.28,94c0.89,0,1.55.59,1.31,2h-2.47A0.88,0.88,0,0,0,117,97.13Zm0.1-2.59a1,1,0,0,0-.92.85h1.52A0.63,0.63,0,0,0,117.15,94.54Z" transform="translate(-3.46 -3.87)"/><path class="cls-2" d="M121.12,97.73a0.78,0.78,0,0,1-.89-1l0.38-2.13H120l0.09-.53h0.65l0.58-1.49h0.53L121.58,94h1l-0.09.53h-1l-0.34,1.91c-0.08.43,0,.59,0.37,0.66a2,2,0,0,0,.62,0l0,0.49A5,5,0,0,1,121.12,97.73Z" transform="translate(-3.46 -3.87)"/><path class="cls-2" d="M126,97.65l0.42-2.39a0.45,0.45,0,0,0-.47-0.62,2.05,2.05,0,0,0-1,.35l-0.47,2.66h-0.88l1-5.69,0.9-.11-0.45,2.57a2.14,2.14,0,0,1,1.38-.46,0.83,0.83,0,0,1,.88,1.11l-0.46,2.59H126Z" transform="translate(-3.46 -3.87)"/><path class="cls-2" d="M130.67,97.13a2.39,2.39,0,0,0,1-.19l0.11,0.48a3.18,3.18,0,0,1-1.51.3,1.41,1.41,0,0,1-1.49-1.85A2.25,2.25,0,0,1,130.9,94c0.89,0,1.55.59,1.31,2h-2.47A0.88,0.88,0,0,0,130.67,97.13Zm0.1-2.59a1,1,0,0,0-.92.85h1.52A0.63,0.63,0,0,0,130.77,94.54Z" transform="translate(-3.46 -3.87)"/><path class="cls-2" d="M133.51,97.65L134.15,94H135l-0.07.6A1.84,1.84,0,0,1,136,94a0.85,0.85,0,0,1,.58.22l-0.45.62a0.62,0.62,0,0,0-.44-0.13,1.61,1.61,0,0,0-.88.51l-0.44,2.47h-0.88Z" transform="translate(-3.46 -3.87)"/><path class="cls-2" d="M137.59,97.14a0.71,0.71,0,0,1-.69.55,0.46,0.46,0,0,1-.48-0.55,0.7,0.7,0,0,1,.67-0.56A0.47,0.47,0,0,1,137.59,97.14Z" transform="translate(-3.46 -3.87)"/><path class="cls-4" d="M84.7,32.95H90v0.84H87.91v5.69H86.78V33.79H84.7V32.95Z" transform="translate(-3.46 -3.87)"/><path class="cls-4" d="M96,36.54H93v2.94H91.9V32.95H93v2.76h3V32.95h1.12v6.53H96V36.54Z" transform="translate(-3.46 -3.87)"/><path class="cls-4" d="M103.5,39.48H99.55V32.95h3.83v0.83h-2.7V35.7h2v0.83h-2v2.12h2.82v0.83Z" transform="translate(-3.46 -3.87)"/><path class="cls-1" d="M83.56,18.43a5.26,5.26,0,0,0-1-.54,6,6,0,0,0-2.37-.44,17.68,17.68,0,0,0-3,.35c-0.58.1-1.13,0.2-1.68,0.26l-0.21,0a23.79,23.79,0,0,1-2.89.22,21.58,21.58,0,0,1-2.82-.21,0.07,0.07,0,0,0-.07,0,0.07,0.07,0,0,0,0,.07,19.28,19.28,0,0,1,2.9,5.17c0.2,0.47.38,1,.56,1.44a9.87,9.87,0,0,0,2.91,4.78A5.38,5.38,0,0,0,77,30.2a6.69,6.69,0,0,0,2.81.62A6.78,6.78,0,0,0,83.56,18.43Z" transform="translate(-3.46 -3.87)"/><g class="cls-5"><path class="cls-6" d="M73.32,19.89s14.09,0.22,13.38,8.37l-1,1.48S84.09,22.41,73.32,19.89Z" transform="translate(-3.46 -3.87)"/></g><path class="cls-2" d="M101,15c-0.24-1.86-1.46-3.31-2.63-4.7C97.94,9.88,97.58,9.46,97.25,9l-0.13-.17a19.25,19.25,0,0,1-2.87-4.94,0.07,0.07,0,0,0-.06,0h0a0.07,0.07,0,0,0-.06,0,19.28,19.28,0,0,1-3,5.11c-0.3.4-.64,0.81-1,1.2a9.88,9.88,0,0,0-2.67,4.92,5.35,5.35,0,0,0,0,1.23,6.71,6.71,0,0,0,6.72,6.08h0a6.77,6.77,0,0,0,6.75-6.3A5.21,5.21,0,0,0,101,15Zm-6.75,7.33h0Z" transform="translate(-3.46 -3.87)"/><g class="cls-7"><path class="cls-6" d="M97.77,13a5.54,5.54,0,0,1-6.27,6.27A4.52,4.52,0,0,0,97.77,13Z" transform="translate(-3.46 -3.87)"/></g></svg>
...\ No newline at end of file ...\ No newline at end of file
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <head><script type="text/javascript"> 2 <head>
3
4 (function() {
5 var relegateNavigation = '';
6 var handleClickTagMessage = function(e) {
7 try {
8 var eventData = JSON.parse(e.data);
9 } catch (err) {
10 return;
11 }
12 if (eventData.isInitClickTag) {
13 if (eventData.clickTags) {
14 for (var i = 0; i < eventData.clickTags.length; i++) {
15 var clkTag = eventData.clickTags[i];
16 window[clkTag.name] = clkTag.url;
17 }
18 } else if (eventData.clickTag) {
19 window.clickTag = eventData.clickTag;
20 }
21 relegateNavigation = eventData.relegateNavigation;
22 }
23 };
24
25 if (open.call) {
26 window.open = function(open) {
27 return function(url, name, features) {
28 if (relegateNavigation === 'parent') {
29 var message = {'clickTag': url, 'isPostClickTag': true};
30 parent.postMessage(JSON.stringify(message), '*');
31 } else {
32 var args = [url, name];
33 if (features) {
34 args.push(features);
35 }
36 open.apply(window, args);
37 }
38 };
39 }(window.open);
40 }
41
42 if (window.addEventListener) {
43 window.addEventListener(
44 'message', handleClickTagMessage, false);
45 } else {
46 window.attachEvent('onmessage', handleClickTagMessage);
47 }
48 })();
49 3
50 </script> 4 </script>
51 <meta charset="utf-8"> 5 <meta charset="utf-8">
52 <title>HTML5 GSAP Ad</title> 6 <title>HTML5 GSAP Ad</title>
53 <meta name="ad.size" content="width=300,height=600"> 7 <meta name="ad.size" content="width=300,height=600">
8 <!--
54 <script type="text/javascript"> 9 <script type="text/javascript">
55 10
56 // IAB source: modified to allow link testing 11 // IAB source: modified to allow link testing
...@@ -67,23 +22,17 @@ ...@@ -67,23 +22,17 @@
67 clickTag = getParameterByName('clickTag'); 22 clickTag = getParameterByName('clickTag');
68 23
69 </script> 24 </script>
25 -->
26 <script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
27 <script type="text/javascript">
28 window.onload = function() {
29 eyeBuild.initialize();
30 }
31 </script>
70 32
71 33
72 <style> 34 <style>
73 35
74 /*
75 @font-face {
76 font-family: "Neue Haas Grotesk";
77 src: url('https://cdde858ebed93488811f-4a840a140d7caee3c01f302484ec5d42.ssl.cf2.rackcdn.com/Fonts/neuehaasgroteskdisplay.ttf') format('ttf'),
78 url('https://cdde858ebed93488811f-4a840a140d7caee3c01f302484ec5d42.ssl.cf2.rackcdn.com/Fonts/neuehaasgroteskdisplay.woff') format('woff'),
79 url('https://cdde858ebed93488811f-4a840a140d7caee3c01f302484ec5d42.ssl.cf2.rackcdn.com/Fonts/neuehaasgroteskdisplay.woff2') format('woff2'),
80 url('https://cdde858ebed93488811f-4a840a140d7caee3c01f302484ec5d42.ssl.cf2.rackcdn.com/Fonts/neuehaasgroteskdisplay.svg') format('svg');
81 font-weight:400;
82 font-style:normal;
83 }
84 */
85
86
87 body{ 36 body{
88 margin: 0; 37 margin: 0;
89 padding: 0; 38 padding: 0;
...@@ -96,117 +45,175 @@ ...@@ -96,117 +45,175 @@
96 font-family: "Neue Haas Grotesk", Arial, sans-serif; 45 font-family: "Neue Haas Grotesk", Arial, sans-serif;
97 /*font-weight: 800;*/ /*BOLD-800, MEDIUM-600, ROMAN - 400*/ 46 /*font-weight: 800;*/ /*BOLD-800, MEDIUM-600, ROMAN - 400*/
98 font-style: normal; 47 font-style: normal;
99
100
101 } 48 }
102 49
103 a{ 50 a{
104 text-decoration: none; 51 text-decoration: none;
105 color: inherit; 52 color: inherit;
106 } 53 }
107 #click-tag{
108 display: block;
109 position: absolute;
110 width: 100%;
111 height: 100%;
112 top:0px;
113 }
114 #border{ 54 #border{
115 position: relative; 55 position: relative;
116 width: 300px; 56 width: 300px;
117 height: 600px; 57 height: 600px;
118 border: 1px solid #55565A; 58 border: 1px solid #55565A;
119 background-color: #E7E7E7; 59 background-color: #282828;
120 overflow: hidden; 60 overflow: hidden;
121 cursor: pointer; 61 cursor: pointer;
122 box-sizing: border-box; 62 box-sizing: border-box;
63 background: url(assets/img/background.jpg);
64 /* background: url(guide1.png); */
123 } 65 }
124 66 #logo{
125 #border:hover #cta{ 67 position: absolute;
126 background-color: #666666; 68 width: 68px;
69 height: auto;
70 right: 21px;
71 bottom:28px;
72 opacity: 0;
127 } 73 }
128 74 #legal{
129 #border:active #cta{ 75 position: absolute;
130 background-color: #000000; 76 width: 179px;
77 height: auto;
78 left: 9px;
79 bottom:6px;
131 } 80 }
132 81 #ey-frame{
133 #copy1{ 82 position: absolute;
83 left: 21px;
84 top:23px;
85 z-index: 9;
86 }
87 #txt1a, #txt1b, #txt2 {
88 position: absolute;
89 width: 137px;
90 height: auto;
91 left: 51px;
92 top:94px;
93 z-index: 10;
94 opacity: 0;
95 }
96 #txt1b{
97 top:161px;
98 width: 112px;
99 }
100 #txt2{
101 left: 42px;
102 width: 216px;
103 }
104 #cannon{
105 position: absolute;
106 left: 150px;
107 top:270px;
108 }
109 #boy{
110 position: absolute;
111 left: 175px;
112 top:310px;
113 }
114 #box-1, #box-2{
115 position: absolute;
116 left: 209px;
117 top: 97px;
118 width:33px;
119 height: 33px;
120 border: white 4px solid;
121 opacity: 0;
122 z-index: 10;
123 }
124 #box-2{
125 top: 163px;
126 }
127 #gradient{
128 position: absolute;
129 opacity: .15;
130 }
131 #dot-1, #dot-2, #dot-3, #dot-txt{
134 position: absolute; 132 position: absolute;
135 font-size: 20px; 133 left: -12px;
136 line-height:20px; 134 top: 104px;
137 text-align: center; 135 width:12px;
138 padding: 10px; 136 height: 12px;
139 width: 100%; 137 background-color: #FFD400;
140 top: 100px; 138 }
141 } 139 #dot-txt{
142 #copy2{ 140 left:-12px;
141 top:131px;
142 opacity: 1;
143 }
144 #cta{
143 position: absolute; 145 position: absolute;
144 font-size: 20px; 146 left: 26px;
145 line-height:20px; 147 top:175px;
146 text-align: center; 148 width:206px;
147 padding: 10px; 149 height: auto;
148 width: 100%; 150 opacity: 0;
149 top: 200px; 151 }
150 } 152 #tag1, #tag2, #tag3{
151 #logo{
152 position: absolute; 153 position: absolute;
153 width: 100%; 154 left: 25px;
154 top: 300px; 155 top:129px;
155 } 156 width:211px;
156 157 height: auto;
157 #logoImg{ 158 opacity: 0;
158 display: block; 159 }
159 margin-left: auto; 160 #tag2{
160 margin-right: auto; 161 width:197px;
161 } 162 }
162 163 #tag3{
163 #cta{ 164 width:241px;
164 width: 214px; 165 }
165 height: 41px; 166 #tag-mask{
166 background-color: #CD040B;
167 position: absolute; 167 position: absolute;
168 left: 41px; 168 width:0;
169 top: 450px; 169 height:100%;
170 color: #fff; 170 overflow: hidden;
171 font-size: 16px; 171 }
172 text-align: center; 172 #hash{
173 font-weight: 500;
174 line-height: 250%;
175 letter-spacing: .5;
176 }
177 #ctaCopy{
178 position: absolute;
179 font-size: 19px;
180 left:65px;
181 bottom: -1px;
182 }
183 #legal{
184 position: absolute; 173 position: absolute;
185 font-size: 10px; 174 left: 26px;
186 line-height: 10px; 175 top:223px;
187 color: #000; 176 width:156px;
188 padding: 10px; 177 height: auto;
189 bottom: 0px; 178 opacity: 0;
190 z-index: 600;
191 } 179 }
192 180
193 </style> 181 </style>
194 </head> 182 </head>
195 183
196 <body> 184 <body>
197 <a id="click-tag" href="javascript:window.open(window.clickTag)"> 185 <!-- <a id="click-tag" href="javascript:window.open(window.clickTag)"> -->
186 <a href="javascript:eyeBuild.doClick(0)" class="cta">
198 <div id="border"> 187 <div id="border">
199 <!-- <div id="img"><img id="logoImg" src="assets/img.jpg" style="border-style:none"></div> --> 188 <img id="logo" src="assets/img/logo.png" alt="logo">
200 <div id="copy1">Enter <br/>copy1 <br/>here</div> 189 <img id="legal" src="assets/img/legal.png" alt="legal">
201 <div id="copy2">Enter <br/>copy2 <br/>here</div> 190 <img id="boy" src="assets/img/boy.png" alt="boy">
202 <div id="logo"><img id="logoImg" src="assets/logo.svg" style="border-style:none"></div> 191 <img id="cannon" src="assets/img/cannon.png" alt="cannon">
203 <div id="cta"> 192 <img id="txt1a" src="assets/img/txt1a.png" alt="txt1">
204 <div id="ctaCopy">Buy Now</div> 193 <img id="txt1b" src="assets/img/txt1b.png" alt="txt1">
205 </div> 194 <div id="box-1"></div>
206 <div id="legal"> 195 <div id="box-2"></div>
207 Offer Pricing &amp; Details<br /> 196 <img id="txt2" src="assets/img/txt2.png" alt="txt2">
208 ©2016 Company Name 197
198
199 <img id="gradient" src="assets/img/gradient.svg" alt="cta">
200 <div id="dot-1"></div>
201 <div id="dot-2"></div>
202 <div id="dot-3"></div>
203
204 <img id="cta" src="assets/img/cta.png" alt="cta">
205 <div id="tag-mask">
206 <img id="tag1" src="assets/img/tag1.png" alt="tag1">
207 <img id="tag2" src="assets/img/tag2.png" alt="tag2">
208 <img id="tag3" src="assets/img/tag3.png" alt="tag3">
209 </div> 209 </div>
210 <div id="dot-txt"></div>
211 <img id="hash" src="assets/img/hash.png" alt="hash">
212
213 <!--
214
215 -->
216
210 </div> 217 </div>
211 </a> 218 </a>
212 219
...@@ -214,22 +221,81 @@ ...@@ -214,22 +221,81 @@
214 <script src="//code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script> 221 <script src="//code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script>
215 222
216 <!-- GREENSOCK--> 223 <!-- GREENSOCK-->
217 <!-- <script src="//www.greensock.com/js/src/utils/SplitText.min.js"></script> enables character or word animation - $99/yr --> 224 <!-- <script src="//www.greensock.com/js/src/utils/SplitText.min.js"></script> enables character or word animation -->
218 <script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script> 225 <script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
219 <script src="ey-frame-div.js"></script> 226 <script src="assets/js/DrawSVGPlugin.min.js"></script>
227 <script src="assets/js/ey-frame-svg-1.0.1.min.js"></script>
220 228
221 <!--
222 <script> 229 <script>
223 230
224 function stage1(){ 231 function stage1(){
225 var tl = new TimelineMax({repeat:2, repeatDelay:2}); 232 var tl = new TimelineMax(); /* {repeat:2, repeatDelay:2} */
233
234 /*
235 animate boy
236 logo
237 frame w txt
238 dot
239 tags w dots
240 cta
241 hash
242 */
243 var d=.4;
244
245
246 tl.to("#boy", .8, {left:150, top:270, ease:Power1.easeOut, delay:0 });
247 tl.to("#logo", .7, {opacity:1, ease:Power1.easeInOut, delay:-.5 });
248
249 var myeySvg = initEySvgFrame(12, 259, 218);
250 $("#border").append(myeySvg);
251 animateEyFrame(1);
252 animateGradient(.2);
253
254 tl.to("#txt1a", d, {opacity:1, ease:Power1.easeInOut, delay:1.8 });
255 tl.to("#box-1", d, {opacity:1, ease:Power1.easeInOut, delay:-.2 });
256 tl.to("#txt1b", d, {opacity:1, ease:Power1.easeInOut, delay:.1 });
257 tl.to("#box-2", d, {opacity:1, ease:Power1.easeInOut, delay:-.2 });
226 258
227 tl.from("#img", 1, {alpha:0, scaleX:5, scaleY:5, x:134, y:109, ease:Power1.easeOut, delay:0 }); 259 tl.to("#txt1a", d, {opacity:0, ease:Power1.easeInOut, delay:2 });
228 tl.from("#logo", .5, {scaleX:9, scaleY:9, alpha:0, ease:Power1.easeOut, delay:0 }); 260 tl.to("#box-1", d, {opacity:0, ease:Power1.easeInOut, delay:-d });
229 tl.from("#copy1", 1, {x:-300, ease:Power1.easeOut, delay:-.5 }); 261 tl.to("#txt1b", d, {opacity:0, ease:Power1.easeInOut, delay:-d });
230 tl.from("#copy2", 1, {x:300, ease:Power1.easeOut, delay:-.5}); 262 tl.to("#box-2", d, {opacity:0, ease:Power1.easeInOut, delay:-d });
231 tl.from("#cta", 1, {y:250, ease:Power1.easeOut, delay:0 }); 263
232 tl.from("#legal", 1, {alpha:0, ease:Power1.easeOut, delay:0 }); 264 animateFill(3.3);
265 tl.to("#txt2", d, {opacity:1, ease:Power1.easeInOut, delay:.5 });
266 tl.to("#txt2", d, {opacity:0, ease:Power1.easeInOut, delay:4 });
267
268 tl.to("#dot-1", .1, {opacity:1, ease:Power1.easeIn, delay:0 });
269 tl.to(myeySvg, d, {scaleY:.01, scaleX:.01, left:-102, top:0, ease:Power1.easeIn, delay:0 });
270 tl.to(myeySvg, .1, {opacity:0, ease:Power1.easeIn, delay:-.1 });
271 tl.to("#dot-1", .2, {opacity:0, ease:Power1.easeIn, delay:-.2});
272
273
274 // phase 2
275
276 tl.to("#gradient", d, {opacity:1, ease:Power1.easeInOut, delay:-.2 });
277
278 tl.fromTo("#tag-mask", d, {width:0}, {width:320, ease:Linear.easeNone, delay:-.2 });
279 tl.fromTo("#dot-txt", d, {left:-12}, {left:312, ease:Linear.easeNone, delay:-d});
280 tl.to("#tag1", d, {opacity:1, ease:Linear.easeNone, delay:-d });
281 tl.fromTo("#dot-1", d, {left:-12, opacity:1}, {left:66, opacity:1, ease:Power3.easeOut, delay:0});
282 tl.to("#tag1", d, {opacity:0, ease:Linear.easeNone, delay:2 });
283
284 tl.fromTo("#tag-mask", d, {width:0}, {width:320, ease:Linear.easeNone, delay:0 });
285 tl.fromTo("#dot-txt", d, {left:-12}, {left:312, ease:Linear.easeNone, delay:-d});
286 tl.to("#tag2", d, {opacity:1, ease:Linear.easeNone, delay:-d });
287 tl.fromTo("#dot-2", d, {left:-12}, {left:46, ease:Power3.easeOut, delay:0});
288 tl.to("#tag2", d, {opacity:0, ease:Linear.easeNone, delay:2 });
289
290 tl.fromTo("#tag-mask", d, {width:0}, {width:320, ease:Linear.easeNone, delay:0 });
291 tl.fromTo("#dot-txt", d, {left:-12}, {left:312, ease:Linear.easeNone, delay:-d});
292 tl.to("#tag3", d, {opacity:1, ease:Linear.easeNone, delay:-d });
293 tl.fromTo("#dot-3", d, {left:-12}, {left:26, ease:Power3.easeOut, delay:0});
294
295 tl.to("#cta", d, {opacity:1, ease:Linear.easeNone, delay:0 });
296 tl.to("#hash", d, {opacity:1, ease:Linear.easeNone, delay:0 });
297
298
233 299
234 console.log( "time: " + tl.totalDuration() ); 300 console.log( "time: " + tl.totalDuration() );
235 } 301 }
...@@ -242,7 +308,7 @@ ...@@ -242,7 +308,7 @@
242 308
243 309
244 </script> 310 </script>
245 --> 311
246 </body> 312 </body>
247 313
248 </html> 314 </html>
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -12,16 +12,15 @@ Requires GSAP TweenMax ...@@ -12,16 +12,15 @@ Requires GSAP TweenMax
12 var tl; 12 var tl;
13 13
14 /** 14 /**
15 svgURL:String - URL to the EY yellow square that will be used for the frame 15 myWeight:Number - the width of the line of the frame in pixels
16 myWidth:Number - width of the desired frame in pixels measured from the outside to the outside 16 myWidth:Number - width of the desired frame in pixels measured from the outside to the outside
17 myHeight:Number - height of the desired frame in pixels measured from the peak to the bottom 17 myHeight:Number - height of the desired frame in pixels measured from the peak to the bottom
18 duration:Number - seconds the animation will take to elapse from start to finish 18 myDuration:Number - seconds the animation will take to elapse from start to finish
19
20 Returns div element containing the EY Div Frame. It will automatically animate in.
19 **/ 21 **/
20 var drawEyDivFrame = function (myWeight, myWidth, myHeight, myDuration) 22 var drawEyDivFrame = function (myWeight, myWidth, myHeight, myDuration)
21 { 23 {
22 //draw first three dots
23 // can I do it with divs?
24
25 tl = new TimelineMax(); 24 tl = new TimelineMax();
26 25
27 var div = document.createElement("div"); 26 var div = document.createElement("div");
...@@ -32,53 +31,85 @@ var drawEyDivFrame = function (myWeight, myWidth, myHeight, myDuration) ...@@ -32,53 +31,85 @@ var drawEyDivFrame = function (myWeight, myWidth, myHeight, myDuration)
32 div.style.overflow = "hidden"; 31 div.style.overflow = "hidden";
33 div.style.left = 10+"px"; 32 div.style.left = 10+"px";
34 div.style.top = 10+"px"; 33 div.style.top = 10+"px";
35 document.body.appendChild(div);
36 34
37 var myColor = "#FFD400"; 35 var myColor = "#FFD400";
38 var dotSpacing = myWeight*5.72/6.72; // EY ratio of weight to spacing 36 var dotSpacing = Math.floor(myWeight*8/10); // EY ratio of weight to spacing
39 var myX = 0; 37 var myX = 0;
40 var myY = 0; 38 var myY = 0;
41 var myRadians = 10 * (Math.PI/180); 39 var myRadians = 10 * Math.PI / 180; // EY angles up at 10 degrees
42 var angleHeight = Math.tan(myRadians)*myWidth - myWeight; 40 var angleHeight = Math.tan(myRadians)*myWidth - myWeight; // height of the shoulder to top of head
43 var myOrigin = "bottom left"; 41 var myOrigin = "bottom left";
44 var myDelay = 0; 42 var myDelay = 0;
43 var myEase = Power1.easeInOut; //ease:Linear.easeNone
45 44
46 //////// calculate the duration of each line 45 //////// calculate the duration of each line
47 var perimeter = (myWidth + myHeight) * 2;
48
49 var myLength = myWeight; 46 var myLength = myWeight;
50 var myDotDuration = myLength*myDuration/perimeter; 47 myDuration = myDuration/2; // want to use half the duration for the dots.
48
49 var dotsCombinedLength = (myWeight + dotSpacing) * 3;
50 var myDotDuration = myLength*myDuration/dotsCombinedLength;
51 var myDotDelay = dotSpacing*myDuration/dotsCombinedLength; // delay after dot is drawn
52
53 var perimeter = (myWidth + myHeight)*2 - angleHeight - myWeight*4 -dotsCombinedLength;
54
55
56
57
51 var dot1 = drawLine({color:myColor, weight:myWeight, fromX:myX, 58 var dot1 = drawLine({color:myColor, weight:myWeight, fromX:myX,
52 fromY:myHeight-myWeight, length:myLength, angle:0, origin:myOrigin, duration:myDotDuration}, div, tl, myDelay); 59 fromY:myHeight-myWeight, length:myLength, angle:0, origin:myOrigin, duration:myDotDuration}, div, tl, myDelay, myEase);
53 var dot2 = drawLine({color:myColor, weight:myWeight, fromX:myX+=(dotSpacing+myWeight), 60 var dot2 = drawLine({color:myColor, weight:myWeight, fromX:myX+=(dotSpacing+myWeight),
54 fromY:myHeight-myWeight, length:myWeight, angle:0, origin:myOrigin, duration:myDotDuration}, div, tl, myDelay); 61 fromY:myHeight-myWeight, length:myLength, angle:0, origin:myOrigin, duration:myDotDuration}, div, tl, myDotDelay, myEase);
55 var dot3 = drawLine({color:myColor, weight:myWeight, fromX:myX+=(dotSpacing+myWeight), 62 var dot3 = drawLine({color:myColor, weight:myWeight, fromX:myX+=(dotSpacing+myWeight),
56 fromY:myHeight-myWeight, length:myWeight, angle:0, origin:myOrigin, duration:myDotDuration}, div, tl, myDelay); 63 fromY:myHeight-myWeight, length:myLength, angle:0, origin:myOrigin, duration:myDotDuration}, div, tl, myDotDelay, myEase);
57 64
65 //tl.addCallback( callback:reversedToDots, position:myDuration, params:[], scope:tl );
66 tl.addCallback( reversedToDots, myDuration+myDotDelay, [], tl );
67
58 myLength = myWidth-myX; 68 myLength = myWidth-myX;
59 var lineBottom = drawLine({color:myColor, weight:myWeight, fromX:myX+=(dotSpacing+myWeight), 69 var lineBottom = drawLine({color:myColor, weight:myWeight, fromX:myX+=(dotSpacing+myWeight),
60 fromY:myHeight-myWeight, length:myLength, angle:0, origin:myOrigin, duration:myLength*myDuration/perimeter}, div, tl, myDelay); 70 fromY:myHeight-myWeight, length:myLength, angle:0, origin:myOrigin, duration:myLength*myDuration/perimeter}, div, tl, myDotDelay, myEase);
61 myLength = myHeight-myWeight*2; 71 myLength = myHeight-myWeight*1.2;
62 var lineRight = drawLine({color:myColor, weight:myWeight, fromX:myWidth, 72 var lineRight = drawLine({color:myColor, weight:myWeight, fromX:myWidth,
63 fromY:myHeight-myWeight*2, length:myLength, angle:-90, origin:myOrigin, duration:myLength*myDuration/perimeter}, div, tl, -myDotDuration*2); 73 fromY:myHeight-myWeight*2, length:myLength, angle:-90, origin:myOrigin, duration:myLength*myDuration/perimeter}, div, tl, myDelay-=myWeight*myDuration/perimeter, myEase);
64 myLength = myWidth+myWeight; 74 myLength = myWidth+myWeight;
65 var lineTop = drawLine({color:myColor, weight:myWeight, fromX:myWidth, 75 var lineTop = drawLine({color:myColor, weight:myWeight, fromX:myWidth,
66 fromY:-myWeight, length:myLength, angle:-190, origin:myOrigin, duration:myLength*myDuration/perimeter}, div, tl, -myDotDuration); 76 fromY:-myWeight, length:myLength, angle:-190, origin:myOrigin, duration:myLength*myDuration/perimeter}, div, tl, myDelay, myEase);
67 myLength = myHeight-angleHeight-myWeight*2-dotSpacing; 77 myLength = myHeight-angleHeight-myWeight*2-dotSpacing;
68 var lineLeft = drawLine({color:myColor, weight:myWeight, fromX:0, 78 var lineLeft = drawLine({color:myColor, weight:myWeight, fromX:0,
69 fromY:angleHeight, length:myLength, angle:-270, origin:myOrigin, duration:myLength*myDuration/perimeter}, div, tl, -myDotDuration); 79 fromY:angleHeight, length:myLength, angle:-270, origin:myOrigin, duration:myLength*myDuration/perimeter}, div, tl, myDelay, myEase);
70 80
81 console.log("drawEyDivFrame total animation time: ", tl.totalDuration() );
71 return div; 82 return div;
72 } 83 }
73 84
85 var reverseDrawEyDivFrame = function ()
86 {
87 return tl.reverse();
88 }
89 var reversedToDots = function (myTimeLine)
90 {
91 if( tl.reversed() )
92 {
93 tl.timeScale(8);
94 };
95 }
96
97
74 /** 98 /**
75 svgURL:String - URL to the EY yellow square that will be used for the frame 99 styleObj:Object - with the following properties
76 myWidth:Number - width of the desired frame in pixels measured from the outside to the outside 100 color:String - CSS colour value as a string "#FFF" or "red" to define the colour of the line
77 myHeight:Number - height of the desired frame in pixels measured from the peak to the bottom 101 weight:Number - Pixels defining the thickness of the line
78 duration:Number - seconds the animation will take to elapse from start to finish 102 fromX:Number - the x position in pixels where this line will start
103 fromY:Number - the y position in pixels where this line will start
104 length:Number - the length of the line in pixels
105 angle:Number - the degrees defines the direction the line will be drawn
106 origin:myOrigin - 0 = right; -90 = up
107 duration:Number - seconds the drawing of this line should take
108 container:HTMLelement - HTML element into which you will draw this element. It should be absolute or relative positioned.
109 timeline:TimelineMax - timeline to which you need this line draw animation added.
110 myDelay:Number - seconds delay from the previous animation before this one starts
79 **/ 111 **/
80 112 var drawLine = function (styleObj, container, timeline, myDelay, myEase)
81 var drawLine = function (styleObj, container, timeline, myDelay)
82 { 113 {
83 var div = document.createElement("div"); 114 var div = document.createElement("div");
84 115
...@@ -107,10 +138,12 @@ var drawLine = function (styleObj, container, timeline, myDelay) ...@@ -107,10 +138,12 @@ var drawLine = function (styleObj, container, timeline, myDelay)
107 div.style.width = "0px"; /////// needs to be 0 before animating to this width 138 div.style.width = "0px"; /////// needs to be 0 before animating to this width
108 139
109 container.appendChild(div); 140 container.appendChild(div);
110 timeline.to(div, styleObj.duration, {width:styleObj.length, ease:Linear.easeNone, delay:myDelay}); 141 timeline.to(div, styleObj.duration, {width:styleObj.length, ease:myEase, delay:myDelay});
111 142
112 return div; 143 return div;
113 } 144 }
114 145
115 //drawEyDivFrame(myWeight, myWidth, myHeight, duration); 146 //drawEyDivFrame(myWeight, myWidth, myHeight, duration);
116 drawEyDivFrame(7, 143, 184, 2); 147 var div = drawEyDivFrame(10, 196, 193, 2);
148 document.body.appendChild(div);
149
......
1 /*!
2 * VERSION: 1.0.1
3 * DATE: 2016-04-28
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
25 var eySvg;
26 var eyStroke;
27 var eyDot1;
28 var eyDot2;
29 var eyDot3;
30 var eyGradient;
31 var eyFill;
32
33 var tl;
34 var eyStrokeWeight;
35 var eySvgHeight;
36 var eySvgWidth;
37 var eyAngleHeight;
38 var eyDotSpacing;
39 var eyDotDuration = .2; // seconds for animation
40 var eyFrameDuration = 1; // seconds for animation
41 var eyGradientDuration = 1; // seconds for animation
42 var eyFillDuration = 1; // seconds for animation
43 var eyColor = "#FFD400";
44 var svgNS = "http://www.w3.org/2000/svg";
45
46 /**
47 myWeight:Number - the width of the line of the frame in pixels
48 myWidth:Number - width of the desired frame in pixels measured from the outside to the outside
49 myHeight:Number - height of the desired frame in pixels measured from the peak to the bottom
50 myDuration:Number - seconds the animation will take to elapse from start to finish
51
52 Returns: SVG element
53 **/
54 var initEySvgFrame = function (myWeight, myWidth, myHeight)
55 {
56 //// calculate all the points and variables to assist in drawing ////
57
58 tl = new TimelineMax();
59 eyDotSpacing = Math.floor(myWeight*8.5/10); // EY ratio of weight to spacing
60 eyStrokeWeight = myWeight;
61 eySvgWidth = myWidth;
62 eySvgHeight = myHeight;
63
64 var myRadians = 10 * Math.PI / 180; // EY angles up at 10 degrees
65 eyAngleHeight = Math.tan(myRadians)*(myWidth - myWeight); // height of the head (measured vertically from shoulder anchor pt to top of head anchor pt)
66
67 //// create the properly sized svg container ////
68
69 var eySvg = document.createElementNS(svgNS, "svg");
70 eySvg.setAttribute("id", "ey-frame");
71 eySvg.setAttribute("width", myWidth+"px");
72 eySvg.setAttribute("height", myHeight+"px");
73 eySvg.setAttribute("viewBox", "0 0 "+eySvgWidth + " " + eySvgHeight );
74 var myDefs = document.createElementNS(svgNS, "defs");
75 eySvg.appendChild(myDefs);
76
77
78 //// draw the gradient for def ////
79
80 var myLinearGradient = document.createElementNS(svgNS, "linearGradient");
81 myLinearGradient.setAttribute("id", "linear-gradient");
82 myLinearGradient.setAttribute("x1", "0%");
83 myLinearGradient.setAttribute("x2", "0%");
84 myLinearGradient.setAttribute("y1", "0%");
85 myLinearGradient.setAttribute("y2", "100%");
86 myDefs.appendChild(myLinearGradient);
87
88 //stops
89
90 var stop;
91 stop = createStop ({id:"stop-1", offset:"0%", color:"Black", opacity:".7" });
92 myLinearGradient.appendChild(stop);
93 stop = createStop ({id:"stop-2", offset:"100%", color:"Black", opacity:"0" });
94 myLinearGradient.appendChild(stop);
95
96 // gradient shape
97
98 eyGradient = createShape ("ey-gradient", "url(#linear-gradient)");
99 eySvg.appendChild(eyGradient);
100
101
102 //// create 3 dots ////
103
104 eyDot1 = createDot(1);
105 eySvg.appendChild(eyDot1);
106 eyDot2 = createDot(2);
107 eySvg.appendChild(eyDot2);
108 eyDot3 = createDot(3);
109 eySvg.appendChild(eyDot3);
110
111 //// draw the rest of the path ////
112
113 eyStroke = createPath("ey-stroke");
114 eyStroke.setAttribute("d",
115 " M " + ((eyStrokeWeight + eyDotSpacing)*3) + " " + (eySvgHeight-myWeight/2) +
116 " H " + (myWidth-myWeight/2) +
117 " V " + myWeight/1.5 +
118 " L " + myWeight/2 + " " + (eyAngleHeight+myWeight/2) +
119 " V " + (myHeight-myWeight-eyDotSpacing)
120 );
121 eySvg.appendChild(eyStroke);
122
123
124 //// draw the fill shape for def ////
125
126 eyFill = createShape ("ey-gradient", eyColor);
127 eySvg.appendChild(eyFill);
128
129
130 return eySvg;
131
132 };
133
134 var animateEyFrame = function (myDelay)
135 {
136 var lastPt = 0;
137 tl.fromTo(eyDot1, eyDotDuration, {drawSVG:"0"}, {drawSVG:"0 "+(lastPt+=(eyStrokeWeight+eyDotSpacing)), ease:Power1.easeInOut, delay:myDelay });
138 tl.fromTo(eyDot2, 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.fromTo(eyStroke, eyFrameDuration, {drawSVG:"0"}, {drawSVG:"0 100%", ease:Power1.easeIn});
141 };
142
143 var animateGradient = function (myDelay)
144 {
145 tl.fromTo(eyGradient, .5, {opacity:0}, {opacity:1, delay:myDelay});
146 };
147 var animateFill = function (myDelay)
148 {
149 tl.fromTo(eyFill, .5, {y:eySvgHeight}, {y:0, ease:Power2.easeIn, delay:myDelay});
150 };
151
152
153
154 ////////// private functions
155
156 var createPath = function (myId)
157 {
158 var myPath = document.createElementNS(svgNS,"path");
159 myPath.setAttribute("id", myId);
160 myPath.setAttribute("fill", "none");
161 myPath.setAttribute("stroke", eyColor);
162 myPath.setAttribute("stroke-width", eyStrokeWeight);
163 myPath.setAttribute("stroke-miterlimit", "10");
164 return myPath;
165 };
166
167 var createDot = function (dotNum)
168 {
169 var myDot = createPath("ey-dot"+dotNum);
170 myDot.setAttribute("d",
171 " M " + ((eyStrokeWeight + eyDotSpacing)*(dotNum-1)) + " " + (eySvgHeight-eyStrokeWeight/2) +
172 " h " + eyStrokeWeight
173 );
174 return myDot;
175 };
176
177
178 var createShape = function (myId, myFill)
179 {
180 var myShape = document.createElementNS(svgNS,"path");
181 myShape.setAttribute("id", myId);
182 myShape.setAttribute("fill", myFill);
183 myShape.setAttribute("d",
184 " M 0 " + (eySvgHeight) +
185 " H " + (eySvgWidth) +
186 " V 2 " +
187 " L 0 " + (eyAngleHeight+2) +
188 " Z "
189 );
190 return myShape;
191 };
192
193 var createStop = function (myStopObj)
194 {
195 var myStop = document.createElementNS(svgNS, "stop");
196 myStop.setAttribute("id", myStopObj.id);
197 myStop.setAttribute("offset", myStopObj.offset);
198 myStop.setAttribute("stop-color", myStopObj.color);
199 myStop.setAttribute("stop-opacity", myStopObj.opacity);
200 return myStop;
201 };
202
203
204
205