Skip to content

Tenzing / banners-with-skip

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

EY frame animates reverse

1 parent 1cbc03fe
Inline Side-by-side
Showing 9 changed files with 131 additions and 107 deletions
/*!
* VERSION: 1.0.2
* DATE: 2016-05-03
*
* 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=0.2;var eyFrameDuration=1;var eyGradientDuration=1;var eyFillDuration=1;var eyColor='#FFD400';var svgNS='http://www.w3.org/2000/svg';var initEySvgFrame=function(b,d,f){tl=new TimelineMax(),eyDotSpacing=Math.floor(b*8.5/10),eyStrokeWeight=b,eySvgWidth=d,eySvgHeight=f;var h=10*Math.PI/180;eyAngleHeight=Math.tan(h)*(d-b);var a=document.createElementNS(svgNS,'svg');a.setAttribute('id','ey-frame'),a.setAttribute('width',d+'px'),a.setAttribute('height',f+'px'),a.setAttribute('viewBox','0 0 '+eySvgWidth+' '+eySvgHeight);var g=document.createElementNS(svgNS,'defs');a.appendChild(g);var c=document.createElementNS(svgNS,'linearGradient');c.setAttribute('id','linear-gradient'),c.setAttribute('x1','0%'),c.setAttribute('x2','0%'),c.setAttribute('y1','0%'),c.setAttribute('y2','100%'),g.appendChild(c);var e;return e=createStop({id:'stop-1',offset:'0%',color:'Black',opacity:'.7'}),c.appendChild(e),e=createStop({id:'stop-2',offset:'100%',color:'Black',opacity:'0'}),c.appendChild(e),eyGradient=createShape('ey-gradient','url(#linear-gradient)'),a.appendChild(eyGradient),eyDot1=createDot(1),a.appendChild(eyDot1),eyDot2=createDot(2),a.appendChild(eyDot2),eyDot3=createDot(3),a.appendChild(eyDot3),eyStroke=createPath('ey-stroke'),eyStroke.setAttribute('d',' M '+(eyStrokeWeight+eyDotSpacing)*3+' '+(eySvgHeight-b/2)+' H '+(d-b/2)+' V '+b/1.5+' L '+b/2+' '+(eyAngleHeight+b/2)+' V '+(f-b-eyDotSpacing)),a.appendChild(eyStroke),a;};var animateEyFrame=function(b){var a=0;tl.fromTo(eyDot1,eyDotDuration,{drawSVG:'0'},{drawSVG:'0 '+(a+=eyStrokeWeight+eyDotSpacing),ease:Power1.easeInOut,delay:b}),tl.fromTo(eyDot2,eyDotDuration,{drawSVG:'0'},{drawSVG:'0 '+(a+=eyStrokeWeight+eyDotSpacing),ease:Power1.easeInOut}),tl.fromTo(eyDot3,eyDotDuration,{drawSVG:'0'},{drawSVG:'0 '+(a+=eyStrokeWeight+eyDotSpacing),ease:Power1.easeInOut}),tl.fromTo(eyStroke,eyFrameDuration,{drawSVG:'0'},{drawSVG:'0 100%',ease:Power1.easeIn});};var animateGradient=function(a){tl.fromTo(eyGradient,0.5,{opacity:0},{opacity:1,delay:a});};var animateFill=function(a){(typeof eyFill==='undefined'||variable===null)&&(eyFill=createShape('ey-gradient',eyColor),eySvg.appendChild(eyFill)),tl.fromTo(eyFill,0.5,{y:eySvgHeight},{y:0,ease:Power2.easeIn,delay:a});};var createPath=function(b){var a=document.createElementNS(svgNS,'path');return a.setAttribute('id',b),a.setAttribute('fill','none'),a.setAttribute('stroke',eyColor),a.setAttribute('stroke-width',eyStrokeWeight),a.setAttribute('stroke-miterlimit','10'),a;};var createDot=function(b){var a=createPath('ey-dot'+b);return a.setAttribute('d',' M '+(eyStrokeWeight+eyDotSpacing)*(b-1)+' '+(eySvgHeight-eyStrokeWeight/2)+' h '+eyStrokeWeight),a;};var createShape=function(b,c){var a=document.createElementNS(svgNS,'path');return a.setAttribute('id',b),a.setAttribute('fill',c),a.setAttribute('d',' M 0 '+eySvgHeight+' H '+eySvgWidth+' V 2 '+' L 0 '+(eyAngleHeight+2)+' Z '),a;};var createStop=function(b){var a=document.createElementNS(svgNS,'stop');return a.setAttribute('id',b.id),a.setAttribute('offset',b.offset),a.setAttribute('stop-color',b.color),a.setAttribute('stop-opacity',b.opacity),a;};
\ No newline at end of file
/*!
* VERSION: 1.0.3
* DATE: 2016-05-04
*
* Requires:
* GSAP TweenMax (import com.greensock.*;)
* 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=0.2;var eyFrameDuration=1;var eyGradientDuration=1;var eyFillDuration=1;var eyColor='#FFD400';var svgNS='http://www.w3.org/2000/svg';var isForward=!0;var initEySvgFrame=function(b,d,f){tl=new TimelineMax({onStart:tlStart,onUpdate:tlUpdate,onComplete:tlComplete,onReverseComplete:tlReverseComplete}),eyDotSpacing=Math.floor(b*8.5/10),eyStrokeWeight=b,eySvgWidth=d,eySvgHeight=f;var h=10*Math.PI/180;eyAngleHeight=Math.tan(h)*(d-b);var a=document.createElementNS(svgNS,'svg');a.setAttribute('id','ey-frame'),a.setAttribute('width',d+'px'),a.setAttribute('height',f+'px'),a.setAttribute('viewBox','0 0 '+eySvgWidth+' '+eySvgHeight);var g=document.createElementNS(svgNS,'defs');a.appendChild(g);var c=document.createElementNS(svgNS,'linearGradient');c.setAttribute('id','linear-gradient'),c.setAttribute('x1','0%'),c.setAttribute('x2','0%'),c.setAttribute('y1','0%'),c.setAttribute('y2','100%'),g.appendChild(c);var e;return e=createStop({id:'stop-1',offset:'0%',color:'Black',opacity:'.7'}),c.appendChild(e),e=createStop({id:'stop-2',offset:'100%',color:'Black',opacity:'0'}),c.appendChild(e),eyGradient=createShape('ey-gradient','url(#linear-gradient)'),a.appendChild(eyGradient),eyDot1=createDot(1),a.appendChild(eyDot1),eyDot2=createDot(2),a.appendChild(eyDot2),eyDot3=createDot(3),a.appendChild(eyDot3),eyStroke=createPath('ey-stroke'),eyStroke.setAttribute('d',' M '+(eyStrokeWeight+eyDotSpacing)*3+' '+(eySvgHeight-b/2)+' H '+(d-b/2)+' V '+b/1.5+' L '+b/2+' '+(eyAngleHeight+b/2)+' V '+(f-b-eyDotSpacing)),a.appendChild(eyStroke),a;};var animateEyFrame=function(b){isForward=!0,tl.timeScale(1);var a=0;tl.fromTo(eyDot1,eyDotDuration,{drawSVG:'0'},{drawSVG:'0 '+(a+=eyStrokeWeight+eyDotSpacing),ease:Power1.easeInOut,delay:b}),tl.fromTo(eyDot2,eyDotDuration,{drawSVG:'0'},{drawSVG:'0 '+(a+=eyStrokeWeight+eyDotSpacing),ease:Power1.easeInOut}),tl.fromTo(eyDot3,eyDotDuration,{drawSVG:'0'},{drawSVG:'0 '+(a+=eyStrokeWeight+eyDotSpacing),ease:Power1.easeInOut}),tl.call(tlDotToLine,[]),tl.fromTo(eyStroke,eyFrameDuration,{drawSVG:'0'},{drawSVG:'0 100%',ease:Power1.easeIn});};var animateEyReverse=function(a){TweenMax.delayedCall(a,intAnimateEyReverse,[0]);};var animateGradient=function(a){tl.fromTo(eyGradient,0.5,{opacity:0},{opacity:1,delay:a});};var animateFill=function(a){(typeof eyFill==='undefined'||variable===null)&&(eyFill=createShape('ey-gradient',eyColor),eySvg.appendChild(eyFill)),tl.fromTo(eyFill,0.5,{y:eySvgHeight},{y:0,ease:Power2.easeIn,delay:a});};var createPath=function(b){var a=document.createElementNS(svgNS,'path');return a.setAttribute('id',b),a.setAttribute('fill','none'),a.setAttribute('stroke',eyColor),a.setAttribute('stroke-width',eyStrokeWeight),a.setAttribute('stroke-miterlimit','10'),a;};var createDot=function(b){var a=createPath('ey-dot'+b);return a.setAttribute('d',' M '+(eyStrokeWeight+eyDotSpacing)*(b-1)+' '+(eySvgHeight-eyStrokeWeight/2)+' h '+eyStrokeWeight),a;};var createShape=function(b,c){var a=document.createElementNS(svgNS,'path');return a.setAttribute('id',b),a.setAttribute('fill',c),a.setAttribute('d',' M 0 '+eySvgHeight+' H '+eySvgWidth+' V 2 '+' L 0 '+(eyAngleHeight+2)+' Z '),a;};var createStop=function(b){var a=document.createElementNS(svgNS,'stop');return a.setAttribute('id',b.id),a.setAttribute('offset',b.offset),a.setAttribute('stop-color',b.color),a.setAttribute('stop-opacity',b.opacity),a;};var intAnimateEyReverse=function(a){isForward=!1,tl.reverse(a),tl.timeScale;};var tlStart=function(){};var tlDotToLine=function(){isForward||tl.timeScale(4);};var tlUpdate=function(){};var tlComplete=function(){};var tlReverseComplete=function(){};
\ No newline at end of file
......@@ -185,7 +185,6 @@
</head>
<body>
<!-- <a id="click-tag" href="javascript:window.open(window.clickTag)"> -->
<a href="javascript:eyeBuild.doClick(0)" class="cta">
<div id="border">
<img id="boy" src="assets/boy.png" alt="boy">
......@@ -219,14 +218,10 @@
</div>
</a>
<!-- jQuery-->
<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 -->
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script src="assets/DrawSVGPlugin.min.js"></script>
<script src="assets/ey-frame-svg-1.0.2.min.js"></script>
<script src="assets/ey-frame-svg-1.0.3.min.js"></script>
<script>
......@@ -240,7 +235,7 @@
tl.to("#logo", .7, {opacity:1, ease:Power1.easeInOut, delay:-.5 });
var myeySvg = initEySvgFrame(12, 259, 218);
$("#border").append(myeySvg);
document.getElementById("border").appendChild(myeySvg);
animateEyFrame(1);
animateGradient(.2);
......@@ -249,24 +244,20 @@
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("#txt1a", d, {opacity:0, ease:Power1.easeInOut, delay:1.5 });
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:1, ease:Power1.easeInOut, delay:0 });
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});
animateEyReverse(10);
// phase 2
tl.to("#gradient", d, {opacity:1, ease:Power1.easeInOut, delay:-.2 });
tl.to("#gradient", d, {opacity:1, ease:Power1.easeInOut, delay:1 });
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});
......@@ -294,9 +285,7 @@
}
//---------------------
$(document).ready(function(){
stage1();
});
......
/*!
* VERSION: 1.0.2
* DATE: 2016-05-03
*
* 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=0.2;var eyFrameDuration=1;var eyGradientDuration=1;var eyFillDuration=1;var eyColor='#FFD400';var svgNS='http://www.w3.org/2000/svg';var initEySvgFrame=function(b,d,f){tl=new TimelineMax(),eyDotSpacing=Math.floor(b*8.5/10),eyStrokeWeight=b,eySvgWidth=d,eySvgHeight=f;var h=10*Math.PI/180;eyAngleHeight=Math.tan(h)*(d-b);var a=document.createElementNS(svgNS,'svg');a.setAttribute('id','ey-frame'),a.setAttribute('width',d+'px'),a.setAttribute('height',f+'px'),a.setAttribute('viewBox','0 0 '+eySvgWidth+' '+eySvgHeight);var g=document.createElementNS(svgNS,'defs');a.appendChild(g);var c=document.createElementNS(svgNS,'linearGradient');c.setAttribute('id','linear-gradient'),c.setAttribute('x1','0%'),c.setAttribute('x2','0%'),c.setAttribute('y1','0%'),c.setAttribute('y2','100%'),g.appendChild(c);var e;return e=createStop({id:'stop-1',offset:'0%',color:'Black',opacity:'.7'}),c.appendChild(e),e=createStop({id:'stop-2',offset:'100%',color:'Black',opacity:'0'}),c.appendChild(e),eyGradient=createShape('ey-gradient','url(#linear-gradient)'),a.appendChild(eyGradient),eyDot1=createDot(1),a.appendChild(eyDot1),eyDot2=createDot(2),a.appendChild(eyDot2),eyDot3=createDot(3),a.appendChild(eyDot3),eyStroke=createPath('ey-stroke'),eyStroke.setAttribute('d',' M '+(eyStrokeWeight+eyDotSpacing)*3+' '+(eySvgHeight-b/2)+' H '+(d-b/2)+' V '+b/1.5+' L '+b/2+' '+(eyAngleHeight+b/2)+' V '+(f-b-eyDotSpacing)),a.appendChild(eyStroke),a;};var animateEyFrame=function(b){var a=0;tl.fromTo(eyDot1,eyDotDuration,{drawSVG:'0'},{drawSVG:'0 '+(a+=eyStrokeWeight+eyDotSpacing),ease:Power1.easeInOut,delay:b}),tl.fromTo(eyDot2,eyDotDuration,{drawSVG:'0'},{drawSVG:'0 '+(a+=eyStrokeWeight+eyDotSpacing),ease:Power1.easeInOut}),tl.fromTo(eyDot3,eyDotDuration,{drawSVG:'0'},{drawSVG:'0 '+(a+=eyStrokeWeight+eyDotSpacing),ease:Power1.easeInOut}),tl.fromTo(eyStroke,eyFrameDuration,{drawSVG:'0'},{drawSVG:'0 100%',ease:Power1.easeIn});};var animateGradient=function(a){tl.fromTo(eyGradient,0.5,{opacity:0},{opacity:1,delay:a});};var animateFill=function(a){(typeof eyFill==='undefined'||variable===null)&&(eyFill=createShape('ey-gradient',eyColor),eySvg.appendChild(eyFill)),tl.fromTo(eyFill,0.5,{y:eySvgHeight},{y:0,ease:Power2.easeIn,delay:a});};var createPath=function(b){var a=document.createElementNS(svgNS,'path');return a.setAttribute('id',b),a.setAttribute('fill','none'),a.setAttribute('stroke',eyColor),a.setAttribute('stroke-width',eyStrokeWeight),a.setAttribute('stroke-miterlimit','10'),a;};var createDot=function(b){var a=createPath('ey-dot'+b);return a.setAttribute('d',' M '+(eyStrokeWeight+eyDotSpacing)*(b-1)+' '+(eySvgHeight-eyStrokeWeight/2)+' h '+eyStrokeWeight),a;};var createShape=function(b,c){var a=document.createElementNS(svgNS,'path');return a.setAttribute('id',b),a.setAttribute('fill',c),a.setAttribute('d',' M 0 '+eySvgHeight+' H '+eySvgWidth+' V 2 '+' L 0 '+(eyAngleHeight+2)+' Z '),a;};var createStop=function(b){var a=document.createElementNS(svgNS,'stop');return a.setAttribute('id',b.id),a.setAttribute('offset',b.offset),a.setAttribute('stop-color',b.color),a.setAttribute('stop-opacity',b.opacity),a;};
\ No newline at end of file
/*!
* VERSION: 1.0.3
* DATE: 2016-05-04
*
* Requires:
* GSAP TweenMax (import com.greensock.*;)
* 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=0.2;var eyFrameDuration=1;var eyGradientDuration=1;var eyFillDuration=1;var eyColor='#FFD400';var svgNS='http://www.w3.org/2000/svg';var isForward=!0;var initEySvgFrame=function(b,d,f){tl=new TimelineMax({onStart:tlStart,onUpdate:tlUpdate,onComplete:tlComplete,onReverseComplete:tlReverseComplete}),eyDotSpacing=Math.floor(b*8.5/10),eyStrokeWeight=b,eySvgWidth=d,eySvgHeight=f;var h=10*Math.PI/180;eyAngleHeight=Math.tan(h)*(d-b);var a=document.createElementNS(svgNS,'svg');a.setAttribute('id','ey-frame'),a.setAttribute('width',d+'px'),a.setAttribute('height',f+'px'),a.setAttribute('viewBox','0 0 '+eySvgWidth+' '+eySvgHeight);var g=document.createElementNS(svgNS,'defs');a.appendChild(g);var c=document.createElementNS(svgNS,'linearGradient');c.setAttribute('id','linear-gradient'),c.setAttribute('x1','0%'),c.setAttribute('x2','0%'),c.setAttribute('y1','0%'),c.setAttribute('y2','100%'),g.appendChild(c);var e;return e=createStop({id:'stop-1',offset:'0%',color:'Black',opacity:'.7'}),c.appendChild(e),e=createStop({id:'stop-2',offset:'100%',color:'Black',opacity:'0'}),c.appendChild(e),eyGradient=createShape('ey-gradient','url(#linear-gradient)'),a.appendChild(eyGradient),eyDot1=createDot(1),a.appendChild(eyDot1),eyDot2=createDot(2),a.appendChild(eyDot2),eyDot3=createDot(3),a.appendChild(eyDot3),eyStroke=createPath('ey-stroke'),eyStroke.setAttribute('d',' M '+(eyStrokeWeight+eyDotSpacing)*3+' '+(eySvgHeight-b/2)+' H '+(d-b/2)+' V '+b/1.5+' L '+b/2+' '+(eyAngleHeight+b/2)+' V '+(f-b-eyDotSpacing)),a.appendChild(eyStroke),a;};var animateEyFrame=function(b){isForward=!0,tl.timeScale(1);var a=0;tl.fromTo(eyDot1,eyDotDuration,{drawSVG:'0'},{drawSVG:'0 '+(a+=eyStrokeWeight+eyDotSpacing),ease:Power1.easeInOut,delay:b}),tl.fromTo(eyDot2,eyDotDuration,{drawSVG:'0'},{drawSVG:'0 '+(a+=eyStrokeWeight+eyDotSpacing),ease:Power1.easeInOut}),tl.fromTo(eyDot3,eyDotDuration,{drawSVG:'0'},{drawSVG:'0 '+(a+=eyStrokeWeight+eyDotSpacing),ease:Power1.easeInOut}),tl.call(tlDotToLine,[]),tl.fromTo(eyStroke,eyFrameDuration,{drawSVG:'0'},{drawSVG:'0 100%',ease:Power1.easeIn});};var animateEyReverse=function(a){TweenMax.delayedCall(a,intAnimateEyReverse,[0]);};var animateGradient=function(a){tl.fromTo(eyGradient,0.5,{opacity:0},{opacity:1,delay:a});};var animateFill=function(a){(typeof eyFill==='undefined'||variable===null)&&(eyFill=createShape('ey-gradient',eyColor),eySvg.appendChild(eyFill)),tl.fromTo(eyFill,0.5,{y:eySvgHeight},{y:0,ease:Power2.easeIn,delay:a});};var createPath=function(b){var a=document.createElementNS(svgNS,'path');return a.setAttribute('id',b),a.setAttribute('fill','none'),a.setAttribute('stroke',eyColor),a.setAttribute('stroke-width',eyStrokeWeight),a.setAttribute('stroke-miterlimit','10'),a;};var createDot=function(b){var a=createPath('ey-dot'+b);return a.setAttribute('d',' M '+(eyStrokeWeight+eyDotSpacing)*(b-1)+' '+(eySvgHeight-eyStrokeWeight/2)+' h '+eyStrokeWeight),a;};var createShape=function(b,c){var a=document.createElementNS(svgNS,'path');return a.setAttribute('id',b),a.setAttribute('fill',c),a.setAttribute('d',' M 0 '+eySvgHeight+' H '+eySvgWidth+' V 2 '+' L 0 '+(eyAngleHeight+2)+' Z '),a;};var createStop=function(b){var a=document.createElementNS(svgNS,'stop');return a.setAttribute('id',b.id),a.setAttribute('offset',b.offset),a.setAttribute('stop-color',b.color),a.setAttribute('stop-opacity',b.opacity),a;};var intAnimateEyReverse=function(a){isForward=!1,tl.reverse(a),tl.timeScale;};var tlStart=function(){};var tlDotToLine=function(){isForward||tl.timeScale(4);};var tlUpdate=function(){};var tlComplete=function(){};var tlReverseComplete=function(){};
\ No newline at end of file
......@@ -192,14 +192,10 @@
</div>
</a>
<!-- jQuery-->
<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 -->
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script src="assets/DrawSVGPlugin.min.js"></script>
<script src="assets/ey-frame-svg-1.0.2.min.js"></script>
<script src="assets/ey-frame-svg-1.0.3.min.js"></script>
<script>
......@@ -213,26 +209,24 @@
tl.to("#arm", .8, {left:-20, top:9, ease:Power1.easeInOut, delay:.2 });
var myeySvg = initEySvgFrame(12, 259, 218);
$("#border").append(myeySvg);
document.getElementById("border").appendChild(myeySvg);
animateEyFrame(1);
animateGradient(.2);
tl.to("#txt1", d, {opacity:1, ease:Power1.easeInOut, delay:1.8 });
tl.to("#txt1", d, {opacity:0, ease:Power1.easeInOut, delay:2.5 });
//animateFill(2.3);
//animateFill(3.3);
tl.to("#txt2", d, {opacity:1, ease:Power1.easeInOut, delay:0 });
tl.to("#txt2", d, {opacity:0, ease:Power1.easeInOut, delay:3 });
tl.to("#dot-1", .1, {opacity:1, ease:Power1.easeIn, delay:-.5 });
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});
animateEyReverse(10);
// phase 2
tl.fromTo("#tag-mask", d, {width:0}, {width:320, ease:Linear.easeNone, delay:-.2 });
tl.fromTo("#tag-mask", d, {width:0}, {width:320, ease:Linear.easeNone, delay:1.25 });
tl.fromTo("#dot-txt", d, {left:-12}, {left:321, 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:77, opacity:1, ease:Power3.easeOut, delay:0});
......@@ -258,9 +252,7 @@
}
//---------------------
$(document).ready(function(){
stage1();
});
......
/*!
* VERSION: 1.0.2
* DATE: 2016-05-03
*
* 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=0.2;var eyFrameDuration=1;var eyGradientDuration=1;var eyFillDuration=1;var eyColor='#FFD400';var svgNS='http://www.w3.org/2000/svg';var initEySvgFrame=function(b,d,f){tl=new TimelineMax(),eyDotSpacing=Math.floor(b*8.5/10),eyStrokeWeight=b,eySvgWidth=d,eySvgHeight=f;var h=10*Math.PI/180;eyAngleHeight=Math.tan(h)*(d-b);var a=document.createElementNS(svgNS,'svg');a.setAttribute('id','ey-frame'),a.setAttribute('width',d+'px'),a.setAttribute('height',f+'px'),a.setAttribute('viewBox','0 0 '+eySvgWidth+' '+eySvgHeight);var g=document.createElementNS(svgNS,'defs');a.appendChild(g);var c=document.createElementNS(svgNS,'linearGradient');c.setAttribute('id','linear-gradient'),c.setAttribute('x1','0%'),c.setAttribute('x2','0%'),c.setAttribute('y1','0%'),c.setAttribute('y2','100%'),g.appendChild(c);var e;return e=createStop({id:'stop-1',offset:'0%',color:'Black',opacity:'.7'}),c.appendChild(e),e=createStop({id:'stop-2',offset:'100%',color:'Black',opacity:'0'}),c.appendChild(e),eyGradient=createShape('ey-gradient','url(#linear-gradient)'),a.appendChild(eyGradient),eyDot1=createDot(1),a.appendChild(eyDot1),eyDot2=createDot(2),a.appendChild(eyDot2),eyDot3=createDot(3),a.appendChild(eyDot3),eyStroke=createPath('ey-stroke'),eyStroke.setAttribute('d',' M '+(eyStrokeWeight+eyDotSpacing)*3+' '+(eySvgHeight-b/2)+' H '+(d-b/2)+' V '+b/1.5+' L '+b/2+' '+(eyAngleHeight+b/2)+' V '+(f-b-eyDotSpacing)),a.appendChild(eyStroke),a;};var animateEyFrame=function(b){var a=0;tl.fromTo(eyDot1,eyDotDuration,{drawSVG:'0'},{drawSVG:'0 '+(a+=eyStrokeWeight+eyDotSpacing),ease:Power1.easeInOut,delay:b}),tl.fromTo(eyDot2,eyDotDuration,{drawSVG:'0'},{drawSVG:'0 '+(a+=eyStrokeWeight+eyDotSpacing),ease:Power1.easeInOut}),tl.fromTo(eyDot3,eyDotDuration,{drawSVG:'0'},{drawSVG:'0 '+(a+=eyStrokeWeight+eyDotSpacing),ease:Power1.easeInOut}),tl.fromTo(eyStroke,eyFrameDuration,{drawSVG:'0'},{drawSVG:'0 100%',ease:Power1.easeIn});};var animateGradient=function(a){tl.fromTo(eyGradient,0.5,{opacity:0},{opacity:1,delay:a});};var animateFill=function(a){(typeof eyFill==='undefined'||variable===null)&&(eyFill=createShape('ey-gradient',eyColor),eySvg.appendChild(eyFill)),tl.fromTo(eyFill,0.5,{y:eySvgHeight},{y:0,ease:Power2.easeIn,delay:a});};var createPath=function(b){var a=document.createElementNS(svgNS,'path');return a.setAttribute('id',b),a.setAttribute('fill','none'),a.setAttribute('stroke',eyColor),a.setAttribute('stroke-width',eyStrokeWeight),a.setAttribute('stroke-miterlimit','10'),a;};var createDot=function(b){var a=createPath('ey-dot'+b);return a.setAttribute('d',' M '+(eyStrokeWeight+eyDotSpacing)*(b-1)+' '+(eySvgHeight-eyStrokeWeight/2)+' h '+eyStrokeWeight),a;};var createShape=function(b,c){var a=document.createElementNS(svgNS,'path');return a.setAttribute('id',b),a.setAttribute('fill',c),a.setAttribute('d',' M 0 '+eySvgHeight+' H '+eySvgWidth+' V 2 '+' L 0 '+(eyAngleHeight+2)+' Z '),a;};var createStop=function(b){var a=document.createElementNS(svgNS,'stop');return a.setAttribute('id',b.id),a.setAttribute('offset',b.offset),a.setAttribute('stop-color',b.color),a.setAttribute('stop-opacity',b.opacity),a;};
\ No newline at end of file
/*!
* VERSION: 1.0.2
* DATE: 2016-05-03
* VERSION: 1.0.3
* DATE: 2016-05-04
*
* Requires:
* GSAP TweenMax
* GSAP TweenMax (import com.greensock.*;)
* 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.
......@@ -45,6 +45,7 @@ var eyGradientDuration = 1; // seconds for animation
var eyFillDuration = 1; // seconds for animation
var eyColor = "#FFD400";
var svgNS = "http://www.w3.org/2000/svg";
var isForward = true;
/**
myWeight:Number - the width of the line of the frame in pixels
......@@ -58,7 +59,8 @@ var initEySvgFrame = function (myWeight, myWidth, myHeight)
{
//// calculate all the points and variables to assist in drawing ////
tl = new TimelineMax();
tl = new TimelineMax({onStart:tlStart, onUpdate:tlUpdate, onComplete:tlComplete, onReverseComplete:tlReverseComplete });
eyDotSpacing = Math.floor(myWeight*8.5/10); // EY ratio of weight to spacing
eyStrokeWeight = myWeight;
eySvgWidth = myWidth;
......@@ -129,12 +131,19 @@ var initEySvgFrame = function (myWeight, myWidth, myHeight)
var animateEyFrame = function (myDelay)
{
isForward = true;
tl.timeScale(1);
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.call(tlDotToLine, []);
tl.fromTo(eyStroke, eyFrameDuration, {drawSVG:"0"}, {drawSVG:"0 100%", ease:Power1.easeIn});
};
var animateEyReverse = function (myDelay)
{
TweenMax.delayedCall(myDelay, intAnimateEyReverse, [0]);
}
var animateGradient = function (myDelay)
{
......@@ -202,6 +211,40 @@ var createStop = function (myStopObj)
return myStop;
};
var intAnimateEyReverse = function (time)
{
isForward = false;
tl.reverse(time);
// need to timescale the last 3 dots bit
tl.timeScale
// tl.smoothChildTiming = true;
//isForward
}
var tlStart = function ()
{
};
var tlDotToLine = function ()
{
if(!isForward)
{
tl.timeScale(4);
}
};
var tlUpdate = function ()
{
};
var tlComplete = function ()
{
};
var tlReverseComplete = function ()
{
};
......
/*!
* VERSION: 1.0.3
* DATE: 2016-05-04
*
* Requires:
* GSAP TweenMax (import com.greensock.*;)
* 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=0.2;var eyFrameDuration=1;var eyGradientDuration=1;var eyFillDuration=1;var eyColor='#FFD400';var svgNS='http://www.w3.org/2000/svg';var isForward=!0;var initEySvgFrame=function(b,d,f){tl=new TimelineMax({onStart:tlStart,onUpdate:tlUpdate,onComplete:tlComplete,onReverseComplete:tlReverseComplete}),eyDotSpacing=Math.floor(b*8.5/10),eyStrokeWeight=b,eySvgWidth=d,eySvgHeight=f;var h=10*Math.PI/180;eyAngleHeight=Math.tan(h)*(d-b);var a=document.createElementNS(svgNS,'svg');a.setAttribute('id','ey-frame'),a.setAttribute('width',d+'px'),a.setAttribute('height',f+'px'),a.setAttribute('viewBox','0 0 '+eySvgWidth+' '+eySvgHeight);var g=document.createElementNS(svgNS,'defs');a.appendChild(g);var c=document.createElementNS(svgNS,'linearGradient');c.setAttribute('id','linear-gradient'),c.setAttribute('x1','0%'),c.setAttribute('x2','0%'),c.setAttribute('y1','0%'),c.setAttribute('y2','100%'),g.appendChild(c);var e;return e=createStop({id:'stop-1',offset:'0%',color:'Black',opacity:'.7'}),c.appendChild(e),e=createStop({id:'stop-2',offset:'100%',color:'Black',opacity:'0'}),c.appendChild(e),eyGradient=createShape('ey-gradient','url(#linear-gradient)'),a.appendChild(eyGradient),eyDot1=createDot(1),a.appendChild(eyDot1),eyDot2=createDot(2),a.appendChild(eyDot2),eyDot3=createDot(3),a.appendChild(eyDot3),eyStroke=createPath('ey-stroke'),eyStroke.setAttribute('d',' M '+(eyStrokeWeight+eyDotSpacing)*3+' '+(eySvgHeight-b/2)+' H '+(d-b/2)+' V '+b/1.5+' L '+b/2+' '+(eyAngleHeight+b/2)+' V '+(f-b-eyDotSpacing)),a.appendChild(eyStroke),a;};var animateEyFrame=function(b){isForward=!0,tl.timeScale(1);var a=0;tl.fromTo(eyDot1,eyDotDuration,{drawSVG:'0'},{drawSVG:'0 '+(a+=eyStrokeWeight+eyDotSpacing),ease:Power1.easeInOut,delay:b}),tl.fromTo(eyDot2,eyDotDuration,{drawSVG:'0'},{drawSVG:'0 '+(a+=eyStrokeWeight+eyDotSpacing),ease:Power1.easeInOut}),tl.fromTo(eyDot3,eyDotDuration,{drawSVG:'0'},{drawSVG:'0 '+(a+=eyStrokeWeight+eyDotSpacing),ease:Power1.easeInOut}),tl.call(tlDotToLine,[]),tl.fromTo(eyStroke,eyFrameDuration,{drawSVG:'0'},{drawSVG:'0 100%',ease:Power1.easeIn});};var animateEyReverse=function(a){TweenMax.delayedCall(a,intAnimateEyReverse,[0]);};var animateGradient=function(a){tl.fromTo(eyGradient,0.5,{opacity:0},{opacity:1,delay:a});};var animateFill=function(a){(typeof eyFill==='undefined'||variable===null)&&(eyFill=createShape('ey-gradient',eyColor),eySvg.appendChild(eyFill)),tl.fromTo(eyFill,0.5,{y:eySvgHeight},{y:0,ease:Power2.easeIn,delay:a});};var createPath=function(b){var a=document.createElementNS(svgNS,'path');return a.setAttribute('id',b),a.setAttribute('fill','none'),a.setAttribute('stroke',eyColor),a.setAttribute('stroke-width',eyStrokeWeight),a.setAttribute('stroke-miterlimit','10'),a;};var createDot=function(b){var a=createPath('ey-dot'+b);return a.setAttribute('d',' M '+(eyStrokeWeight+eyDotSpacing)*(b-1)+' '+(eySvgHeight-eyStrokeWeight/2)+' h '+eyStrokeWeight),a;};var createShape=function(b,c){var a=document.createElementNS(svgNS,'path');return a.setAttribute('id',b),a.setAttribute('fill',c),a.setAttribute('d',' M 0 '+eySvgHeight+' H '+eySvgWidth+' V 2 '+' L 0 '+(eyAngleHeight+2)+' Z '),a;};var createStop=function(b){var a=document.createElementNS(svgNS,'stop');return a.setAttribute('id',b.id),a.setAttribute('offset',b.offset),a.setAttribute('stop-color',b.color),a.setAttribute('stop-opacity',b.opacity),a;};var intAnimateEyReverse=function(a){isForward=!1,tl.reverse(a),tl.timeScale;};var tlStart=function(){};var tlDotToLine=function(){isForward||tl.timeScale(4);};var tlUpdate=function(){};var tlComplete=function(){};var tlReverseComplete=function(){};
\ No newline at end of file