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 517 additions and 177 deletions
......@@ -109,7 +109,7 @@
<ul>
<li class="dot1"></li>
<li class="dot2"></li>
<li class="dot3"></div>
<li class="dot3"></li>
</ul>
</div>
......
<svg id="Graphics" xmlns="http://www.w3.org/2000/svg" width="142.93" height="183.74" viewBox="0 0 142.93 183.74"><defs><style>.cls-1{fill:#ffd400;}</style></defs><title>ey-yellow-square</title><path class="cls-1" d="M617.33,203h6.72v-6.72h-6.72V203Zm12.44,0h6.72v-6.72h-6.72V203Zm12.44,0h6.72v-6.72h-6.72V203ZM617.34,44.46v146.1h6.72V50.1L753.53,27.27l0,169H654.64V203H760.23l0-183.74Z" transform="translate(-617.33 -19.26)"/></svg>
\ No newline at end of file
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="348.92" viewBox="0 0 300 348.92"><defs><style>.cls-1{fill:url(#linear-gradient);}</style><linearGradient id="linear-gradient" x1="150" y1="348.92" x2="150" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#231f20" stop-opacity="0"/><stop offset="1"/></linearGradient></defs><title>gradient</title><rect class="cls-1" width="300" height="348.92"/></svg>
\ No newline at end of file
/*!
* VERSION: 0.0.10
* DATE: 2016-02-11
* UPDATES AND DOCS AT: http://greensock.com
*
* @license Copyright (c) 2008-2016, GreenSock. All rights reserved.
* DrawSVGPlugin is a Club GreenSock membership benefit; You must have a valid membership to use
* this code without violating the terms of use. Visit http://greensock.com/club/ to sign up or get more details.
* This work is subject to the software agreement that was issued with your membership.
*
* @author: Jack Doyle, jack@greensock.com
*/
var _gsScope="undefined"!=typeof module&&module.exports&&"undefined"!=typeof global?global:this||window;(_gsScope._gsQueue||(_gsScope._gsQueue=[])).push(function(){"use strict";function a(a,b,c,d){return c=parseFloat(c)-parseFloat(a),d=parseFloat(d)-parseFloat(b),Math.sqrt(c*c+d*d)}function b(a){return"string"!=typeof a&&a.nodeType||(a=_gsScope.TweenLite.selector(a),a.length&&(a=a[0])),a}function c(a,b,c){var d,e,f=a.indexOf(" ");return-1===f?(d=void 0!==c?c+"":a,e=a):(d=a.substr(0,f),e=a.substr(f+1)),d=-1!==d.indexOf("%")?parseFloat(d)/100*b:parseFloat(d),e=-1!==e.indexOf("%")?parseFloat(e)/100*b:parseFloat(e),d>e?[e,d]:[d,e]}function d(c){if(!c)return 0;c=b(c);var d,e,f,g,i,j,k,l=c.tagName.toLowerCase();if("path"===l){g=c.style.strokeDasharray,c.style.strokeDasharray="none",d=c.getTotalLength()||0;try{e=c.getBBox()}catch(m){}c.style.strokeDasharray=g}else if("rect"===l)d=2*c.getAttribute("width")+2*c.getAttribute("height");else if("circle"===l)d=2*Math.PI*parseFloat(c.getAttribute("r"));else if("line"===l)d=a(c.getAttribute("x1"),c.getAttribute("y1"),c.getAttribute("x2"),c.getAttribute("y2"));else if("polyline"===l||"polygon"===l)for(f=c.getAttribute("points").match(h)||[],"polygon"===l&&f.push(f[0],f[1]),d=0,i=2;i<f.length;i+=2)d+=a(f[i-2],f[i-1],f[i],f[i+1])||0;else"ellipse"===l&&(j=parseFloat(c.getAttribute("rx")),k=parseFloat(c.getAttribute("ry")),d=Math.PI*(3*(j+k)-Math.sqrt((3*j+k)*(j+3*k))));return d||0}function e(a,c){if(!a)return[0,0];a=b(a),c=c||d(a)+1;var e=g(a),f=e.strokeDasharray||"",h=parseFloat(e.strokeDashoffset),i=f.indexOf(",");return 0>i&&(i=f.indexOf(" ")),f=0>i?c:parseFloat(f.substr(0,i))||1e-5,f>c&&(f=c),[Math.max(0,-h),Math.max(0,f-h)]}var f,g=document.defaultView?document.defaultView.getComputedStyle:function(){},h=/(?:(-|-=|\+=)?\d*\.?\d*(?:e[\-+]?\d+)?)[0-9]/gi;f=_gsScope._gsDefine.plugin({propName:"drawSVG",API:2,version:"0.0.10",global:!0,overwriteProps:["drawSVG"],init:function(a,b,f){if(!a.getBBox)return!1;var g,h,i,j=d(a)+1;return this._style=a.style,b===!0||"true"===b?b="0 100%":b?-1===(b+"").indexOf(" ")&&(b="0 "+b):b="0 0",g=e(a,j),h=c(b,j,g[0]),this._length=j+10,0===g[0]&&0===h[0]?(i=Math.max(1e-5,h[1]-j),this._dash=j+i,this._offset=j-g[1]+i,this._addTween(this,"_offset",this._offset,j-h[1]+i,"drawSVG")):(this._dash=g[1]-g[0]||1e-6,this._offset=-g[0],this._addTween(this,"_dash",this._dash,h[1]-h[0]||1e-5,"drawSVG"),this._addTween(this,"_offset",this._offset,-h[0],"drawSVG")),!0},set:function(a){this._firstPT&&(this._super.setRatio.call(this,a),this._style.strokeDashoffset=this._offset,1===a||0===a?this._style.strokeDasharray=this._offset<.001&&this._length-this._dash<=10?"none":this._offset===this._dash?"0px, 999999px":this._dash+"px,"+this._length+"px":this._style.strokeDasharray=this._dash+"px,"+this._length+"px")}}),f.getLength=d,f.getPosition=e}),_gsScope._gsDefine&&_gsScope._gsQueue.pop()();
\ No newline at end of file
/*!
* VERSION: 1.0.1
* DATE: 2016-04-28
*
* Requires:
* GSAP TweenMax
* GASP drawSVG Plugin ()
* This work is subject to the terms at http://greensock.com/standard-license or for
* Club GreenSock members, the software agreement that was issued with your membership.
*
* @license Copyright (c) 2016, Tenzing Communications Inc. All rights reserved.
*
* @author: Dan Rempel, dan@gotenzing.com
* Usage Example:
* var myEySvg = initEySvgFrame(10, 196, 193); // frame line weight, width, height
* document.getElementById("body").appendChild(myEySvg);
* animateEyFrame(2); // delay in seconds
* animateGradient(2); // delay in seconds
* animateFill(2); // delay in seconds
*
**/
var eySvg;var eyStroke;var eyDot1;var eyDot2;var eyDot3;var eyGradient;var eyFill;var tl;var eyStrokeWeight;var eySvgHeight;var eySvgWidth;var eyAngleHeight;var eyDotSpacing;var eyDotDuration=.2;var eyFrameDuration=1;var eyGradientDuration=1;var eyFillDuration=1;var eyColor="#FFD400";var svgNS="http://www.w3.org/2000/svg";var initEySvgFrame=function(a,b,c){tl=new TimelineMax();eyDotSpacing=Math.floor(a*8.5/10);eyStrokeWeight=a;eySvgWidth=b;eySvgHeight=c;var d=10*Math.PI/180;eyAngleHeight=Math.tan(d)*(b-a);var e=document.createElementNS(svgNS,"svg");e.setAttribute("id","ey-frame");e.setAttribute("width",b+"px");e.setAttribute("height",c+"px");e.setAttribute("viewBox","0 0 "+eySvgWidth+" "+eySvgHeight);var f=document.createElementNS(svgNS,"defs");e.appendChild(f);var g=document.createElementNS(svgNS,"linearGradient");g.setAttribute("id","linear-gradient");g.setAttribute("x1","0%");g.setAttribute("x2","0%");g.setAttribute("y1","0%");g.setAttribute("y2","100%");f.appendChild(g);var h;h=createStop({id:"stop-1",offset:"0%",color:"Black",opacity:".7"});g.appendChild(h);h=createStop({id:"stop-2",offset:"100%",color:"Black",opacity:"0"});g.appendChild(h);eyGradient=createShape("ey-gradient","url(#linear-gradient)");e.appendChild(eyGradient);eyDot1=createDot(1);e.appendChild(eyDot1);eyDot2=createDot(2);e.appendChild(eyDot2);eyDot3=createDot(3);e.appendChild(eyDot3);eyStroke=createPath("ey-stroke");eyStroke.setAttribute("d"," M "+((eyStrokeWeight+eyDotSpacing)*3)+" "+(eySvgHeight-a/2)+" H "+(b-a/2)+" V "+a/1.5+" L "+a/2+" "+(eyAngleHeight+a/2)+" V "+(c-a-eyDotSpacing));e.appendChild(eyStroke);eyFill=createShape("ey-gradient",eyColor);e.appendChild(eyFill);return e};var animateEyFrame=function(a){var b=0;tl.fromTo(eyDot1,eyDotDuration,{drawSVG:"0"},{drawSVG:"0 "+(b+=(eyStrokeWeight+eyDotSpacing)),ease:Power1.easeInOut,delay:a});tl.fromTo(eyDot2,eyDotDuration,{drawSVG:"0"},{drawSVG:"0 "+(b+=(eyStrokeWeight+eyDotSpacing)),ease:Power1.easeInOut});tl.fromTo(eyDot3,eyDotDuration,{drawSVG:"0"},{drawSVG:"0 "+(b+=(eyStrokeWeight+eyDotSpacing)),ease:Power1.easeInOut});tl.fromTo(eyStroke,eyFrameDuration,{drawSVG:"0"},{drawSVG:"0 100%",ease:Power1.easeIn})};var animateGradient=function(a){tl.fromTo(eyGradient,.5,{opacity:0},{opacity:1,delay:a})};var animateFill=function(a){tl.fromTo(eyFill,.5,{y:eySvgHeight},{y:0,ease:Power2.easeIn,delay:a})};var createPath=function(a){var b=document.createElementNS(svgNS,"path");b.setAttribute("id",a);b.setAttribute("fill","none");b.setAttribute("stroke",eyColor);b.setAttribute("stroke-width",eyStrokeWeight);b.setAttribute("stroke-miterlimit","10");return b};var createDot=function(a){var b=createPath("ey-dot"+a);b.setAttribute("d"," M "+((eyStrokeWeight+eyDotSpacing)*(a-1))+" "+(eySvgHeight-eyStrokeWeight/2)+" h "+eyStrokeWeight);return b};var createShape=function(a,b){var c=document.createElementNS(svgNS,"path");c.setAttribute("id",a);c.setAttribute("fill",b);c.setAttribute("d"," M 0 "+(eySvgHeight)+" H "+(eySvgWidth)+" V 2 "+" L 0 "+(eyAngleHeight+2)+" Z ");return c};var createStop=function(a){var b=document.createElementNS(svgNS,"stop");b.setAttribute("id",a.id);b.setAttribute("offset",a.offset);b.setAttribute("stop-color",a.color);b.setAttribute("stop-opacity",a.opacity);return b};
\ No newline at end of file
<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
<!DOCTYPE html>
<head><script type="text/javascript">
(function() {
var relegateNavigation = '';
var handleClickTagMessage = function(e) {
try {
var eventData = JSON.parse(e.data);
} catch (err) {
return;
}
if (eventData.isInitClickTag) {
if (eventData.clickTags) {
for (var i = 0; i < eventData.clickTags.length; i++) {
var clkTag = eventData.clickTags[i];
window[clkTag.name] = clkTag.url;
}
} else if (eventData.clickTag) {
window.clickTag = eventData.clickTag;
}
relegateNavigation = eventData.relegateNavigation;
}
};
if (open.call) {
window.open = function(open) {
return function(url, name, features) {
if (relegateNavigation === 'parent') {
var message = {'clickTag': url, 'isPostClickTag': true};
parent.postMessage(JSON.stringify(message), '*');
} else {
var args = [url, name];
if (features) {
args.push(features);
}
open.apply(window, args);
}
};
}(window.open);
}
if (window.addEventListener) {
window.addEventListener(
'message', handleClickTagMessage, false);
} else {
window.attachEvent('onmessage', handleClickTagMessage);
}
})();
<head>
</script>
<meta charset="utf-8">
<title>HTML5 GSAP Ad</title>
<meta name="ad.size" content="width=300,height=600">
<!--
<script type="text/javascript">
// IAB source: modified to allow link testing
......@@ -67,23 +22,17 @@
clickTag = getParameterByName('clickTag');
</script>
-->
<script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
<script type="text/javascript">
window.onload = function() {
eyeBuild.initialize();
}
</script>
<style>
/*
@font-face {
font-family: "Neue Haas Grotesk";
src: url('https://cdde858ebed93488811f-4a840a140d7caee3c01f302484ec5d42.ssl.cf2.rackcdn.com/Fonts/neuehaasgroteskdisplay.ttf') format('ttf'),
url('https://cdde858ebed93488811f-4a840a140d7caee3c01f302484ec5d42.ssl.cf2.rackcdn.com/Fonts/neuehaasgroteskdisplay.woff') format('woff'),
url('https://cdde858ebed93488811f-4a840a140d7caee3c01f302484ec5d42.ssl.cf2.rackcdn.com/Fonts/neuehaasgroteskdisplay.woff2') format('woff2'),
url('https://cdde858ebed93488811f-4a840a140d7caee3c01f302484ec5d42.ssl.cf2.rackcdn.com/Fonts/neuehaasgroteskdisplay.svg') format('svg');
font-weight:400;
font-style:normal;
}
*/
body{
margin: 0;
padding: 0;
......@@ -96,117 +45,175 @@
font-family: "Neue Haas Grotesk", Arial, sans-serif;
/*font-weight: 800;*/ /*BOLD-800, MEDIUM-600, ROMAN - 400*/
font-style: normal;
}
a{
text-decoration: none;
color: inherit;
}
#click-tag{
display: block;
position: absolute;
width: 100%;
height: 100%;
top:0px;
}
#border{
position: relative;
width: 300px;
height: 600px;
border: 1px solid #55565A;
background-color: #E7E7E7;
background-color: #282828;
overflow: hidden;
cursor: pointer;
box-sizing: border-box;
background: url(assets/img/background.jpg);
/* background: url(guide1.png); */
}
#border:hover #cta{
background-color: #666666;
#logo{
position: absolute;
width: 68px;
height: auto;
right: 21px;
bottom:28px;
opacity: 0;
}
#border:active #cta{
background-color: #000000;
#legal{
position: absolute;
width: 179px;
height: auto;
left: 9px;
bottom:6px;
}
#copy1{
#ey-frame{
position: absolute;
font-size: 20px;
line-height:20px;
text-align: center;
padding: 10px;
width: 100%;
top: 100px;
}
#copy2{
left: 21px;
top:23px;
z-index: 9;
}
#txt1a, #txt1b, #txt2 {
position: absolute;
font-size: 20px;
line-height:20px;
text-align: center;
padding: 10px;
width: 100%;
top: 200px;
width: 137px;
height: auto;
left: 51px;
top:94px;
z-index: 10;
opacity: 0;
}
#logo{
#txt1b{
top:161px;
width: 112px;
}
#txt2{
left: 42px;
width: 216px;
}
#cannon{
position: absolute;
width: 100%;
top: 300px;
left: 150px;
top:270px;
}
#logoImg{
display: block;
margin-left: auto;
margin-right: auto;
#boy{
position: absolute;
left: 175px;
top:310px;
}
#box-1, #box-2{
position: absolute;
left: 209px;
top: 97px;
width:33px;
height: 33px;
border: white 4px solid;
opacity: 0;
z-index: 10;
}
#box-2{
top: 163px;
}
#gradient{
position: absolute;
opacity: .15;
}
#dot-1, #dot-2, #dot-3, #dot-txt{
position: absolute;
left: -12px;
top: 104px;
width:12px;
height: 12px;
background-color: #FFD400;
}
#dot-txt{
left:-12px;
top:131px;
opacity: 1;
}
#cta{
width: 214px;
height: 41px;
background-color: #CD040B;
position: absolute;
left: 41px;
top: 450px;
color: #fff;
font-size: 16px;
text-align: center;
font-weight: 500;
line-height: 250%;
letter-spacing: .5;
}
#ctaCopy{
left: 26px;
top:175px;
width:206px;
height: auto;
opacity: 0;
}
#tag1, #tag2, #tag3{
position: absolute;
font-size: 19px;
left:65px;
bottom: -1px;
left: 25px;
top:129px;
width:211px;
height: auto;
opacity: 0;
}
#legal{
#tag2{
width:197px;
}
#tag3{
width:241px;
}
#tag-mask{
position: absolute;
width:0;
height:100%;
overflow: hidden;
}
#hash{
position: absolute;
font-size: 10px;
line-height: 10px;
color: #000;
padding: 10px;
bottom: 0px;
z-index: 600;
left: 26px;
top:223px;
width:156px;
height: auto;
opacity: 0;
}
</style>
</head>
<body>
<a id="click-tag" href="javascript:window.open(window.clickTag)">
<!-- <a id="click-tag" href="javascript:window.open(window.clickTag)"> -->
<a href="javascript:eyeBuild.doClick(0)" class="cta">
<div id="border">
<!-- <div id="img"><img id="logoImg" src="assets/img.jpg" style="border-style:none"></div> -->
<div id="copy1">Enter <br/>copy1 <br/>here</div>
<div id="copy2">Enter <br/>copy2 <br/>here</div>
<div id="logo"><img id="logoImg" src="assets/logo.svg" style="border-style:none"></div>
<div id="cta">
<div id="ctaCopy">Buy Now</div>
</div>
<div id="legal">
Offer Pricing &amp; Details<br />
©2016 Company Name
<img id="logo" src="assets/img/logo.png" alt="logo">
<img id="legal" src="assets/img/legal.png" alt="legal">
<img id="boy" src="assets/img/boy.png" alt="boy">
<img id="cannon" src="assets/img/cannon.png" alt="cannon">
<img id="txt1a" src="assets/img/txt1a.png" alt="txt1">
<img id="txt1b" src="assets/img/txt1b.png" alt="txt1">
<div id="box-1"></div>
<div id="box-2"></div>
<img id="txt2" src="assets/img/txt2.png" alt="txt2">
<img id="gradient" src="assets/img/gradient.svg" alt="cta">
<div id="dot-1"></div>
<div id="dot-2"></div>
<div id="dot-3"></div>
<img id="cta" src="assets/img/cta.png" alt="cta">
<div id="tag-mask">
<img id="tag1" src="assets/img/tag1.png" alt="tag1">
<img id="tag2" src="assets/img/tag2.png" alt="tag2">
<img id="tag3" src="assets/img/tag3.png" alt="tag3">
</div>
<div id="dot-txt"></div>
<img id="hash" src="assets/img/hash.png" alt="hash">
<!--
-->
</div>
</a>
......@@ -214,22 +221,81 @@
<script src="//code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script>
<!-- GREENSOCK-->
<!-- <script src="//www.greensock.com/js/src/utils/SplitText.min.js"></script> enables character or word animation - $99/yr -->
<!-- <script src="//www.greensock.com/js/src/utils/SplitText.min.js"></script> enables character or word animation -->
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script src="ey-frame-div.js"></script>
<script src="assets/js/DrawSVGPlugin.min.js"></script>
<script src="assets/js/ey-frame-svg-1.0.1.min.js"></script>
<!--
<script>
function stage1(){
var tl = new TimelineMax({repeat:2, repeatDelay:2});
var tl = new TimelineMax(); /* {repeat:2, repeatDelay:2} */
/*
animate boy
logo
frame w txt
dot
tags w dots
cta
hash
*/
var d=.4;
tl.to("#boy", .8, {left:150, top:270, ease:Power1.easeOut, delay:0 });
tl.to("#logo", .7, {opacity:1, ease:Power1.easeInOut, delay:-.5 });
var myeySvg = initEySvgFrame(12, 259, 218);
$("#border").append(myeySvg);
animateEyFrame(1);
animateGradient(.2);
tl.to("#txt1a", d, {opacity:1, ease:Power1.easeInOut, delay:1.8 });
tl.to("#box-1", d, {opacity:1, ease:Power1.easeInOut, delay:-.2 });
tl.to("#txt1b", d, {opacity:1, ease:Power1.easeInOut, delay:.1 });
tl.to("#box-2", d, {opacity:1, ease:Power1.easeInOut, delay:-.2 });
tl.to("#txt1a", d, {opacity:0, ease:Power1.easeInOut, delay:2 });
tl.to("#box-1", d, {opacity:0, ease:Power1.easeInOut, delay:-d });
tl.to("#txt1b", d, {opacity:0, ease:Power1.easeInOut, delay:-d });
tl.to("#box-2", d, {opacity:0, ease:Power1.easeInOut, delay:-d });
animateFill(3.3);
tl.to("#txt2", d, {opacity:1, ease:Power1.easeInOut, delay:.5 });
tl.to("#txt2", d, {opacity:0, ease:Power1.easeInOut, delay:4 });
tl.to("#dot-1", .1, {opacity:1, ease:Power1.easeIn, delay:0 });
tl.to(myeySvg, d, {scaleY:.01, scaleX:.01, left:-102, top:0, ease:Power1.easeIn, delay:0 });
tl.to(myeySvg, .1, {opacity:0, ease:Power1.easeIn, delay:-.1 });
tl.to("#dot-1", .2, {opacity:0, ease:Power1.easeIn, delay:-.2});
// phase 2
tl.to("#gradient", d, {opacity:1, ease:Power1.easeInOut, delay:-.2 });
tl.fromTo("#tag-mask", d, {width:0}, {width:320, ease:Linear.easeNone, delay:-.2 });
tl.fromTo("#dot-txt", d, {left:-12}, {left:312, ease:Linear.easeNone, delay:-d});
tl.to("#tag1", d, {opacity:1, ease:Linear.easeNone, delay:-d });
tl.fromTo("#dot-1", d, {left:-12, opacity:1}, {left:66, opacity:1, ease:Power3.easeOut, delay:0});
tl.to("#tag1", d, {opacity:0, ease:Linear.easeNone, delay:2 });
tl.fromTo("#tag-mask", d, {width:0}, {width:320, ease:Linear.easeNone, delay:0 });
tl.fromTo("#dot-txt", d, {left:-12}, {left:312, ease:Linear.easeNone, delay:-d});
tl.to("#tag2", d, {opacity:1, ease:Linear.easeNone, delay:-d });
tl.fromTo("#dot-2", d, {left:-12}, {left:46, ease:Power3.easeOut, delay:0});
tl.to("#tag2", d, {opacity:0, ease:Linear.easeNone, delay:2 });
tl.fromTo("#tag-mask", d, {width:0}, {width:320, ease:Linear.easeNone, delay:0 });
tl.fromTo("#dot-txt", d, {left:-12}, {left:312, ease:Linear.easeNone, delay:-d});
tl.to("#tag3", d, {opacity:1, ease:Linear.easeNone, delay:-d });
tl.fromTo("#dot-3", d, {left:-12}, {left:26, ease:Power3.easeOut, delay:0});
tl.to("#cta", d, {opacity:1, ease:Linear.easeNone, delay:0 });
tl.to("#hash", d, {opacity:1, ease:Linear.easeNone, delay:0 });
tl.from("#img", 1, {alpha:0, scaleX:5, scaleY:5, x:134, y:109, ease:Power1.easeOut, delay:0 });
tl.from("#logo", .5, {scaleX:9, scaleY:9, alpha:0, ease:Power1.easeOut, delay:0 });
tl.from("#copy1", 1, {x:-300, ease:Power1.easeOut, delay:-.5 });
tl.from("#copy2", 1, {x:300, ease:Power1.easeOut, delay:-.5});
tl.from("#cta", 1, {y:250, ease:Power1.easeOut, delay:0 });
tl.from("#legal", 1, {alpha:0, ease:Power1.easeOut, delay:0 });
console.log( "time: " + tl.totalDuration() );
}
......@@ -242,7 +308,7 @@
</script>
-->
</body>
</html>
\ No newline at end of file
......
......@@ -12,16 +12,15 @@ Requires GSAP TweenMax
var tl;
/**
svgURL:String - URL to the EY yellow square that will be used for the frame
myWeight:Number - the width of the line of the frame in pixels
myWidth:Number - width of the desired frame in pixels measured from the outside to the outside
myHeight:Number - height of the desired frame in pixels measured from the peak to the bottom
duration:Number - seconds the animation will take to elapse from start to finish
myDuration:Number - seconds the animation will take to elapse from start to finish
Returns div element containing the EY Div Frame. It will automatically animate in.
**/
var drawEyDivFrame = function (myWeight, myWidth, myHeight, myDuration)
{
//draw first three dots
// can I do it with divs?
tl = new TimelineMax();
var div = document.createElement("div");
......@@ -32,53 +31,85 @@ var drawEyDivFrame = function (myWeight, myWidth, myHeight, myDuration)
div.style.overflow = "hidden";
div.style.left = 10+"px";
div.style.top = 10+"px";
document.body.appendChild(div);
var myColor = "#FFD400";
var dotSpacing = myWeight*5.72/6.72; // EY ratio of weight to spacing
var dotSpacing = Math.floor(myWeight*8/10); // EY ratio of weight to spacing
var myX = 0;
var myY = 0;
var myRadians = 10 * (Math.PI/180);
var angleHeight = Math.tan(myRadians)*myWidth - myWeight;
var myRadians = 10 * Math.PI / 180; // EY angles up at 10 degrees
var angleHeight = Math.tan(myRadians)*myWidth - myWeight; // height of the shoulder to top of head
var myOrigin = "bottom left";
var myDelay = 0;
var myEase = Power1.easeInOut; //ease:Linear.easeNone
//////// calculate the duration of each line
var perimeter = (myWidth + myHeight) * 2;
var myLength = myWeight;
var myDotDuration = myLength*myDuration/perimeter;
myDuration = myDuration/2; // want to use half the duration for the dots.
var dotsCombinedLength = (myWeight + dotSpacing) * 3;
var myDotDuration = myLength*myDuration/dotsCombinedLength;
var myDotDelay = dotSpacing*myDuration/dotsCombinedLength; // delay after dot is drawn
var perimeter = (myWidth + myHeight)*2 - angleHeight - myWeight*4 -dotsCombinedLength;
var dot1 = drawLine({color:myColor, weight:myWeight, fromX:myX,
fromY:myHeight-myWeight, length:myLength, angle:0, origin:myOrigin, duration:myDotDuration}, div, tl, myDelay);
fromY:myHeight-myWeight, length:myLength, angle:0, origin:myOrigin, duration:myDotDuration}, div, tl, myDelay, myEase);
var dot2 = drawLine({color:myColor, weight:myWeight, fromX:myX+=(dotSpacing+myWeight),
fromY:myHeight-myWeight, length:myWeight, angle:0, origin:myOrigin, duration:myDotDuration}, div, tl, myDelay);
fromY:myHeight-myWeight, length:myLength, angle:0, origin:myOrigin, duration:myDotDuration}, div, tl, myDotDelay, myEase);
var dot3 = drawLine({color:myColor, weight:myWeight, fromX:myX+=(dotSpacing+myWeight),
fromY:myHeight-myWeight, length:myWeight, angle:0, origin:myOrigin, duration:myDotDuration}, div, tl, myDelay);
fromY:myHeight-myWeight, length:myLength, angle:0, origin:myOrigin, duration:myDotDuration}, div, tl, myDotDelay, myEase);
//tl.addCallback( callback:reversedToDots, position:myDuration, params:[], scope:tl );
tl.addCallback( reversedToDots, myDuration+myDotDelay, [], tl );
myLength = myWidth-myX;
var lineBottom = drawLine({color:myColor, weight:myWeight, fromX:myX+=(dotSpacing+myWeight),
fromY:myHeight-myWeight, length:myLength, angle:0, origin:myOrigin, duration:myLength*myDuration/perimeter}, div, tl, myDelay);
myLength = myHeight-myWeight*2;
fromY:myHeight-myWeight, length:myLength, angle:0, origin:myOrigin, duration:myLength*myDuration/perimeter}, div, tl, myDotDelay, myEase);
myLength = myHeight-myWeight*1.2;
var lineRight = drawLine({color:myColor, weight:myWeight, fromX:myWidth,
fromY:myHeight-myWeight*2, length:myLength, angle:-90, origin:myOrigin, duration:myLength*myDuration/perimeter}, div, tl, -myDotDuration*2);
fromY:myHeight-myWeight*2, length:myLength, angle:-90, origin:myOrigin, duration:myLength*myDuration/perimeter}, div, tl, myDelay-=myWeight*myDuration/perimeter, myEase);
myLength = myWidth+myWeight;
var lineTop = drawLine({color:myColor, weight:myWeight, fromX:myWidth,
fromY:-myWeight, length:myLength, angle:-190, origin:myOrigin, duration:myLength*myDuration/perimeter}, div, tl, -myDotDuration);
fromY:-myWeight, length:myLength, angle:-190, origin:myOrigin, duration:myLength*myDuration/perimeter}, div, tl, myDelay, myEase);
myLength = myHeight-angleHeight-myWeight*2-dotSpacing;
var lineLeft = drawLine({color:myColor, weight:myWeight, fromX:0,
fromY:angleHeight, length:myLength, angle:-270, origin:myOrigin, duration:myLength*myDuration/perimeter}, div, tl, -myDotDuration);
fromY:angleHeight, length:myLength, angle:-270, origin:myOrigin, duration:myLength*myDuration/perimeter}, div, tl, myDelay, myEase);
console.log("drawEyDivFrame total animation time: ", tl.totalDuration() );
return div;
}
var reverseDrawEyDivFrame = function ()
{
return tl.reverse();
}
var reversedToDots = function (myTimeLine)
{
if( tl.reversed() )
{
tl.timeScale(8);
};
}
/**
svgURL:String - URL to the EY yellow square that will be used for the frame
myWidth:Number - width of the desired frame in pixels measured from the outside to the outside
myHeight:Number - height of the desired frame in pixels measured from the peak to the bottom
duration:Number - seconds the animation will take to elapse from start to finish
styleObj:Object - with the following properties
color:String - CSS colour value as a string "#FFF" or "red" to define the colour of the line
weight:Number - Pixels defining the thickness of the line
fromX:Number - the x position in pixels where this line will start
fromY:Number - the y position in pixels where this line will start
length:Number - the length of the line in pixels
angle:Number - the degrees defines the direction the line will be drawn
origin:myOrigin - 0 = right; -90 = up
duration:Number - seconds the drawing of this line should take
container:HTMLelement - HTML element into which you will draw this element. It should be absolute or relative positioned.
timeline:TimelineMax - timeline to which you need this line draw animation added.
myDelay:Number - seconds delay from the previous animation before this one starts
**/
var drawLine = function (styleObj, container, timeline, myDelay)
var drawLine = function (styleObj, container, timeline, myDelay, myEase)
{
var div = document.createElement("div");
......@@ -107,10 +138,12 @@ var drawLine = function (styleObj, container, timeline, myDelay)
div.style.width = "0px"; /////// needs to be 0 before animating to this width
container.appendChild(div);
timeline.to(div, styleObj.duration, {width:styleObj.length, ease:Linear.easeNone, delay:myDelay});
timeline.to(div, styleObj.duration, {width:styleObj.length, ease:myEase, delay:myDelay});
return div;
}
//drawEyDivFrame(myWeight, myWidth, myHeight, duration);
drawEyDivFrame(7, 143, 184, 2);
var div = drawEyDivFrame(10, 196, 193, 2);
document.body.appendChild(div);
......
/*!
* VERSION: 1.0.1
* DATE: 2016-04-28
*
* Requires:
* GSAP TweenMax
* GASP drawSVG Plugin ()
* This work is subject to the terms at http://greensock.com/standard-license or for
* Club GreenSock members, the software agreement that was issued with your membership.
*
* @license Copyright (c) 2016, Tenzing Communications Inc. All rights reserved.
*
* @author: Dan Rempel, dan@gotenzing.com
* Usage Example:
* var myEySvg = initEySvgFrame(10, 196, 193); // frame line weight, width, height
* document.getElementById("body").appendChild(myEySvg);
* animateEyFrame(2); // delay in seconds
* animateGradient(2); // delay in seconds
* animateFill(2); // delay in seconds
*
**/
var eySvg;
var eyStroke;
var eyDot1;
var eyDot2;
var eyDot3;
var eyGradient;
var eyFill;
var tl;
var eyStrokeWeight;
var eySvgHeight;
var eySvgWidth;
var eyAngleHeight;
var eyDotSpacing;
var eyDotDuration = .2; // seconds for animation
var eyFrameDuration = 1; // seconds for animation
var eyGradientDuration = 1; // seconds for animation
var eyFillDuration = 1; // seconds for animation
var eyColor = "#FFD400";
var svgNS = "http://www.w3.org/2000/svg";
/**
myWeight:Number - the width of the line of the frame in pixels
myWidth:Number - width of the desired frame in pixels measured from the outside to the outside
myHeight:Number - height of the desired frame in pixels measured from the peak to the bottom
myDuration:Number - seconds the animation will take to elapse from start to finish
Returns: SVG element
**/
var initEySvgFrame = function (myWeight, myWidth, myHeight)
{
//// calculate all the points and variables to assist in drawing ////
tl = new TimelineMax();
eyDotSpacing = Math.floor(myWeight*8.5/10); // EY ratio of weight to spacing
eyStrokeWeight = myWeight;
eySvgWidth = myWidth;
eySvgHeight = myHeight;
var myRadians = 10 * Math.PI / 180; // EY angles up at 10 degrees
eyAngleHeight = Math.tan(myRadians)*(myWidth - myWeight); // height of the head (measured vertically from shoulder anchor pt to top of head anchor pt)
//// create the properly sized svg container ////
var eySvg = document.createElementNS(svgNS, "svg");
eySvg.setAttribute("id", "ey-frame");
eySvg.setAttribute("width", myWidth+"px");
eySvg.setAttribute("height", myHeight+"px");
eySvg.setAttribute("viewBox", "0 0 "+eySvgWidth + " " + eySvgHeight );
var myDefs = document.createElementNS(svgNS, "defs");
eySvg.appendChild(myDefs);
//// draw the gradient for def ////
var myLinearGradient = document.createElementNS(svgNS, "linearGradient");
myLinearGradient.setAttribute("id", "linear-gradient");
myLinearGradient.setAttribute("x1", "0%");
myLinearGradient.setAttribute("x2", "0%");
myLinearGradient.setAttribute("y1", "0%");
myLinearGradient.setAttribute("y2", "100%");
myDefs.appendChild(myLinearGradient);
//stops
var stop;
stop = createStop ({id:"stop-1", offset:"0%", color:"Black", opacity:".7" });
myLinearGradient.appendChild(stop);
stop = createStop ({id:"stop-2", offset:"100%", color:"Black", opacity:"0" });
myLinearGradient.appendChild(stop);
// gradient shape
eyGradient = createShape ("ey-gradient", "url(#linear-gradient)");
eySvg.appendChild(eyGradient);
//// create 3 dots ////
eyDot1 = createDot(1);
eySvg.appendChild(eyDot1);
eyDot2 = createDot(2);
eySvg.appendChild(eyDot2);
eyDot3 = createDot(3);
eySvg.appendChild(eyDot3);
//// draw the rest of the path ////
eyStroke = createPath("ey-stroke");
eyStroke.setAttribute("d",
" M " + ((eyStrokeWeight + eyDotSpacing)*3) + " " + (eySvgHeight-myWeight/2) +
" H " + (myWidth-myWeight/2) +
" V " + myWeight/1.5 +
" L " + myWeight/2 + " " + (eyAngleHeight+myWeight/2) +
" V " + (myHeight-myWeight-eyDotSpacing)
);
eySvg.appendChild(eyStroke);
//// draw the fill shape for def ////
eyFill = createShape ("ey-gradient", eyColor);
eySvg.appendChild(eyFill);
return eySvg;
};
var animateEyFrame = function (myDelay)
{
var lastPt = 0;
tl.fromTo(eyDot1, eyDotDuration, {drawSVG:"0"}, {drawSVG:"0 "+(lastPt+=(eyStrokeWeight+eyDotSpacing)), ease:Power1.easeInOut, delay:myDelay });
tl.fromTo(eyDot2, eyDotDuration, {drawSVG:"0"}, {drawSVG:"0 "+(lastPt+=(eyStrokeWeight+eyDotSpacing)), ease:Power1.easeInOut });
tl.fromTo(eyDot3, eyDotDuration, {drawSVG:"0"}, {drawSVG:"0 "+(lastPt+=(eyStrokeWeight+eyDotSpacing)), ease:Power1.easeInOut });
tl.fromTo(eyStroke, eyFrameDuration, {drawSVG:"0"}, {drawSVG:"0 100%", ease:Power1.easeIn});
};
var animateGradient = function (myDelay)
{
tl.fromTo(eyGradient, .5, {opacity:0}, {opacity:1, delay:myDelay});
};
var animateFill = function (myDelay)
{
tl.fromTo(eyFill, .5, {y:eySvgHeight}, {y:0, ease:Power2.easeIn, delay:myDelay});
};
////////// private functions
var createPath = function (myId)
{
var myPath = document.createElementNS(svgNS,"path");
myPath.setAttribute("id", myId);
myPath.setAttribute("fill", "none");
myPath.setAttribute("stroke", eyColor);
myPath.setAttribute("stroke-width", eyStrokeWeight);
myPath.setAttribute("stroke-miterlimit", "10");
return myPath;
};
var createDot = function (dotNum)
{
var myDot = createPath("ey-dot"+dotNum);
myDot.setAttribute("d",
" M " + ((eyStrokeWeight + eyDotSpacing)*(dotNum-1)) + " " + (eySvgHeight-eyStrokeWeight/2) +
" h " + eyStrokeWeight
);
return myDot;
};
var createShape = function (myId, myFill)
{
var myShape = document.createElementNS(svgNS,"path");
myShape.setAttribute("id", myId);
myShape.setAttribute("fill", myFill);
myShape.setAttribute("d",
" M 0 " + (eySvgHeight) +
" H " + (eySvgWidth) +
" V 2 " +
" L 0 " + (eyAngleHeight+2) +
" Z "
);
return myShape;
};
var createStop = function (myStopObj)
{
var myStop = document.createElementNS(svgNS, "stop");
myStop.setAttribute("id", myStopObj.id);
myStop.setAttribute("offset", myStopObj.offset);
myStop.setAttribute("stop-color", myStopObj.color);
myStop.setAttribute("stop-opacity", myStopObj.opacity);
return myStop;
};