Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI

CodeMyUI/index.html

Created May 23, 2017 03:34
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save CodeMyUI/d96939807f31030f733023266520c6ca to your computer and use it in GitHub Desktop.
Save CodeMyUI/d96939807f31030f733023266520c6ca to your computer and use it in GitHub Desktop.
Download ZIP
UI Elements - SVG Animation
Raw
index.html
<div id="work-detail-content-container">
<div id="work-detail-content" class="border-config-margin">
<div id="work-detail-arrows-container">
<div id="work-detail-arrows">
<div id="work-detail-arrow-left">
<svg version="1.1" x="0px" y="0px" width="150px" height="150px" viewBox="0 0 150 150">
<defs>
<filter id="mud" color-interpolation-filters="sRGB">
<feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur"/>
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 21 -9" result="cm"/>
<feBlend/>
</filter>
</defs>
<g class="arrow-container" transform="translate(48,49)">
<g class="mud-container" filter="url(#mud)">
<circle class="circle-path-1" fill="#FFFFFF" cx="27.8" cy="26.5" r="25"/>
<circle class="circle-path-2" fill="#FFFFFF" cx="27.8" cy="26.5" r="25"/>
</g>
<g class="arrow">
<path class="arrow-pt-3-top" fill="none" stroke="#FFFFFF" stroke-dasharray="none" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10"d="M39.1,27c0,0,16.5,1.2,10.6-10.6S33.4,2,27,2S2,6.9,2,27s18.6,25,25,25s25-5,25-25S33.4,2,27,2S7,7.7,4.2,16.1S4.1,27,14.9,27H39.1"/>
<path class="arrow-pt-3-bottom" fill="none" stroke="#FFFFFF" stroke-dasharray="none" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10"d="M39.1,27c0,0,16.5,1.2,10.6-10.6S33.4,2,27,2S2,6.9,2,27s18.6,25,25,25s25-5,25-25S33.4,2,27,2S7,7.7,4.2,16.1S4.1,27,14.9,27H39.1"/>
<line class="arrow-pt-2" fill="none" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="27.5" y1="39" x2="39.9" y2="26.5"/>
<line class="arrow-pt-1" fill="none" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="27.5" y1="14.1" x2="39.9" y2="26.5"/>
</g>
<g class="xplod">
<line fill="none" stroke-dasharray="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" x1="16.9" y1="1" x2="24" y2="13.2"/>
<line fill="none" stroke-dasharray="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" x1="5.2" y1="11" x2="17.4" y2="18.1"/>
<line fill="none" stroke-dasharray="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" x1="1" y1="26.5" x2="15.1" y2="26.5"/>
<line fill="none" stroke-dasharray="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" x1="5.2" y1="42.1" x2="17.4" y2="35.1"/>
<line fill="none" stroke-dasharray="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" x1="16.9" y1="52.1" x2="24" y2="39.8"/>
<line fill="none" stroke-dasharray="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" x1="38.8" y1="52.1" x2="31.7" y2="39.8"/>
<line fill="none" stroke-dasharray="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" x1="50.4" y1="42.1" x2="38.2" y2="35"/>
<line fill="none" stroke-dasharray="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" x1="54.6" y1="26.5" x2="40.6" y2="26.5"/>
<line fill="none" stroke-dasharray="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" x1="50.4" y1="10.9" x2="38.2" y2="18"/>
<line fill="none" stroke-dasharray="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" x1="38.8" y1="1" x2="31.7" y2="13.2"/>
</g>
</g>
</svg>
<a href="#Previous" title="Previous work" class="full-area"><div class="hit-area"></div></a>
</div>
<div id="work-detail-arrow-right">
<svg version="1.1" x="0px" y="0px" width="150px" height="150px" viewBox="0 0 150 150">
<defs>
<filter id="mud" color-interpolation-filters="sRGB">
<feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur"/>
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 21 -9" result="cm"/>
<feBlend/>
</filter>
</defs>
<g class="arrow-container" transform="translate(48,49)">
<g class="mud-container" filter="url(#mud)">
<circle class="circle-path-1" fill="#FFFFFF" cx="27.8" cy="26.5" r="25"/>
<circle class="circle-path-2" fill="#FFFFFF" cx="27.8" cy="26.5" r="25"/>
</g>
<g class="arrow">
<path class="arrow-pt-3-top" fill="none" stroke="#FFFFFF" stroke-dasharray="none" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10"d="M39.1,27c0,0,16.5,1.2,10.6-10.6S33.4,2,27,2S2,6.9,2,27s18.6,25,25,25s25-5,25-25S33.4,2,27,2S7,7.7,4.2,16.1S4.1,27,14.9,27H39.1"/>
<path class="arrow-pt-3-bottom" fill="none" stroke="#FFFFFF" stroke-dasharray="none" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10"d="M39.1,27c0,0,16.5,1.2,10.6-10.6S33.4,2,27,2S2,6.9,2,27s18.6,25,25,25s25-5,25-25S33.4,2,27,2S7,7.7,4.2,16.1S4.1,27,14.9,27H39.1"/>
<line class="arrow-pt-2" fill="none" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="27.5" y1="39" x2="39.9" y2="26.5"/>
<line class="arrow-pt-1" fill="none" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="27.5" y1="14.1" x2="39.9" y2="26.5"/>
</g>
<g class="xplod">
<line fill="none" stroke-dasharray="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" x1="16.9" y1="1" x2="24" y2="13.2"/>
<line fill="none" stroke-dasharray="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" x1="5.2" y1="11" x2="17.4" y2="18.1"/>
<line fill="none" stroke-dasharray="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" x1="1" y1="26.5" x2="15.1" y2="26.5"/>
<line fill="none" stroke-dasharray="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" x1="5.2" y1="42.1" x2="17.4" y2="35.1"/>
<line fill="none" stroke-dasharray="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" x1="16.9" y1="52.1" x2="24" y2="39.8"/>
<line fill="none" stroke-dasharray="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" x1="38.8" y1="52.1" x2="31.7" y2="39.8"/>
<line fill="none" stroke-dasharray="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" x1="50.4" y1="42.1" x2="38.2" y2="35"/>
<line fill="none" stroke-dasharray="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" x1="54.6" y1="26.5" x2="40.6" y2="26.5"/>
<line fill="none" stroke-dasharray="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" x1="50.4" y1="10.9" x2="38.2" y2="18"/>
<line fill="none" stroke-dasharray="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" x1="38.8" y1="1" x2="31.7" y2="13.2"/>
</g>
</g>
</svg>
<a href="#Next" title="Next work" class="full-area"><div class="hit-area"></div></a>
</div>
</div>
</div>
<div id="work-detail-close">
<svg version="1.1" x="0px" y="0px" width="80px" height="80px" viewBox="0 0 80 80">
<defs>
<filter id="mud" color-interpolation-filters="sRGB">
<feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur"/>
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 21 -9" result="cm"/>
<feBlend/>
</filter>
</defs>
<g class="x-container" transform="translate(20,20)">
<g class="mud-container" filter="url(#mud)">
<circle class="circle-path-1" fill="#FFFFFF" cx="19.6" cy="18.8" r="17.5"/>
<circle class="circle-path-2" fill="#FFFFFF" cx="19.6" cy="18.8" r="17.5"/>
</g>
<g class="x-path">
<path class="line-x-r" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M12.4,11.6L26.8,26c2.7,2.7,5,10-7.1,10.3c-0.5,0.1-5.7-0.1-9-2.4c-1.8-1.4-4.3-2.4-7.1-7.9s4-7.2,8.7-7.2h14.4c4.8,0,11.8-1.2,8.9-6.8c-3.2-6.1-8.9-0.4-8.9-0.4C24.3,14.1,12.4,26,12.4,26"/>
<path class="line-x-l" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M12.4,26l14.4-14.4c2.7-2.7,10-5,10.3,7.1c0.1,0.5-0.1,5.7-2.4,9c-1.4,1.8-2.4,4.3-7.9,7.1c-5.5,2.8-7.2-4-7.2-8.7V11.6c0-4.8-1.2-11.8-6.8-8.9c-6.1,3.2-0.4,8.9-0.4,8.9C14.9,14.1,26.8,26,26.8,26"/>
</g>
<g class="xplod">
<line fill="none" stroke-dasharray="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" x1="12.1" y1="1" x2="17.1" y2="9.5"/>
<line fill="none" stroke-dasharray="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" x1="3.9" y1="8" x2="12.4" y2="13"/>
<line fill="none" stroke-dasharray="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" x1="1" y1="18.8" x2="10.9" y2="18.8"/>
<line fill="none" stroke-dasharray="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" x1="3.9" y1="29.7" x2="12.4" y2="24.7"/>
<line fill="none" stroke-dasharray="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" x1="12.1" y1="36.6" x2="17.1" y2="28.1"/>
<line fill="none" stroke-dasharray="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" x1="27.3" y1="36.6" x2="22.3" y2="28.1"/>
<line fill="none" stroke-dasharray="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" x1="35.5" y1="29.6" x2="27" y2="24.6"/>
<line fill="none" stroke-dasharray="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" x1="38.5" y1="18.8" x2="28.6" y2="18.8"/>
<line fill="none" stroke-dasharray="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" x1="35.5" y1="7.9" x2="27" y2="12.9"/>
<line fill="none" stroke-dasharray="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" x1="27.3" y1="1" x2="22.3" y2="9.5"/>
</g>
</g>
</svg>
<a href="#Close" title="Close"><div class="hit-area"></div></a>
</div>
</div>
</div>
Raw
script.js
//See in action: http://www.jeanpaze.com/#Honda-CRV
var objArrowBuffer;
var tlArrowR;
var tlArrowL;
var tlClose;
function init() {
objArrowBuffer = {};
objArrowBuffer.left = {};
objArrowBuffer.left.status = "";
objArrowBuffer.right = {};
objArrowBuffer.right.status = "";
TweenMax.set( "#work-detail-arrow-left svg", { scaleX:-1 } );
tlArrowR = createArrowAnimation( { tl:tlArrowR, parent:"#work-detail-arrow-right " } );
tlArrowL = createArrowAnimation( { tl:tlArrowL, parent:"#work-detail-arrow-left " } );
tlClose = createCloseAnimation( { tl:tlClose, parent:"#work-detail-close " } );
$( "#work-detail-arrow-left a" ).on( "mouseover mouseout click", onArrowHandler );
$( "#work-detail-arrow-right a" ).on( "mouseover mouseout click", onArrowHandler );
$( "#work-detail-close a" ).on( "mouseover mouseout click", onCloseHandler );
TweenMax.set( "#work-detail-arrow-right svg, #work-detail-arrow-left svg", { visibility: 'visible' } );
TweenMax.set( "#work-detail-close svg", { visibility: 'visible' } );
tlArrowR.tweenFromTo( "in", "in-end" );
tlArrowL.tweenFromTo( "in", "in-end" );
tlClose.tweenFromTo( "in", "in-end" );
};
function createArrowAnimation( objConfig ) {
var parent = objConfig.parent;
TweenMax.set( parent + ".arrow-pt-3-bottom", { drawSVG:"91% 91%", opacity:0 } );
TweenMax.set( parent + ".arrow-pt-3-top", { drawSVG:"0" } );
TweenMax.set( parent + ".arrow-pt-1, " + parent + ".arrow-pt-2", { drawSVG:"100% 100%" } );
TweenMax.set( parent + ".mud-container", { scale:0, transformOrigin:"50% 50%" } );
TweenMax.set( parent + ".xplod *", { drawSVG:"100% 100%" } );
objConfig.tl = new TimelineMax( { paused:true } )
.to( parent + ".arrow-pt-1", .25, { drawSVG:"100% 100%", x:7, rotation:-45, transformOrigin:"100% 100%", ease:Power2.easeIn }, "in" )
.to( parent + ".arrow-pt-2", .25, { drawSVG:"100% 100%", x:7, rotation:45, transformOrigin:"100% 0", ease:Power2.easeIn }, "in" )
.to( parent + ".arrow-pt-3-top", .3, { drawSVG:"0% 9%", ease:Power2.easeIn }, "in" )
.to( parent + ".arrow-pt-3-top", .7, { drawSVG:"91% 100%", ease:Power2.easeOut }, "in+=.3" )
.set( parent + ".arrow-pt-1", { drawSVG:"0 100%", x:-8, rotation:-45, transformOrigin:"100% 100%", ease:Power2.easeIn }, "in+=.7" )
.to( parent + ".arrow-pt-1", .3, { x:0, rotation:0, transformOrigin:"100% 100%", ease:Back.easeOut.config( 2 ) }, "in+=.7" )
.set( parent + ".arrow-pt-2", { drawSVG:"0 100%", x:-8, rotation:45, transformOrigin:"100% 0", ease:Power2.easeIn }, "in+=.7" )
.to( parent + ".arrow-pt-2", .3, { x:0, rotation:0, transformOrigin:"100% 0", ease:Back.easeOut.config( 2 ) }, "in+=.7" )
.set( parent + ".arrow-pt-3-bottom", { drawSVG:"91% 100%", opacity:1 }, "in+=1.1" )
.set( parent + ".arrow-pt-3-top", { drawSVG:"0" }, "in+=1.1" )
.to( {}, .01, {}, "in-end" )
.to( parent + ".mud-container", .5, { scale:1, transformOrigin:"50% 50%", ease:Back.easeOut }, "over" )
.fromTo( parent + ".circle-path-2", .7, { rotation:0, transformOrigin:"40% 45%" }, { rotation:360, transformOrigin:"40% 45%", ease:Back.easeOut }, "over" )
.to( parent + ".arrow *", .2, { stroke:"#000000", ease:Back.easeOut }, "over" )
.to( parent + ".arrow-pt-1", .1, { rotation:-15, transformOrigin:"100% 100%", ease:Power4.easeOut }, "over" )
.to( parent + ".arrow-pt-1", .5, { rotation:0, transformOrigin:"100% 100%", ease:Back.easeOut }, "over+=.1" )
.to( parent + ".arrow-pt-2", .1, { rotation:15, transformOrigin:"100% 0", ease:Power4.easeOut }, "over" )
.to( parent + ".arrow-pt-2", .4, { rotation:0, transformOrigin:"100% 0", ease:Back.easeOut }, "over+=.1" )
.to( parent + ".arrow", .2, { rotation:-10, scale:1.2, transformOrigin:"50% 50%", ease:Power4.easeOut }, "over" )
.to( parent + ".arrow", .6, { rotation:0, scale:1, transformOrigin:"50% 50%", ease:Back.easeOut }, "over+=.2" )
.to( {}, .01, {}, "over-end" )
.to( parent + ".arrow-pt-1", .25, { drawSVG:"100% 100%", x:7, rotation:-45, transformOrigin:"100% 100%", ease:Power2.easeIn }, "click" )
.to( parent + ".arrow-pt-2", .25, { drawSVG:"100% 100%", x:7, rotation:45, transformOrigin:"100% 0", ease:Power2.easeIn }, "click" )
.to( parent + ".arrow-pt-3-bottom", .3, { drawSVG:"100% 100%", ease:Power2.easeIn }, "click" )
.to( parent + ".arrow-pt-3-top", .3, { drawSVG:"0% 9%", ease:Power2.easeIn }, "click" )
.to( parent + ".arrow-pt-3-top", 1, { drawSVG:"91% 100%", ease:Power2.easeOut }, "click+=.3" )
.to( parent + ".mud-container, " + parent + ".arrow", .3, { scale:1.5, transformOrigin:"50% 50%", ease:Power4.easeOut }, "click+=.3" )
.to( parent + ".mud-container, " + parent + ".arrow", .3, { scale:1, transformOrigin:"50% 50%", ease:Power1.easeOut }, "click+=.8" )
.set( parent + ".arrow-pt-1", { drawSVG:"0 100%", x:-8, rotation:-45, transformOrigin:"100% 100%", ease:Power2.easeIn }, "click+=1" )
.to( parent + ".arrow-pt-1", .3, { x:0, rotation:0, transformOrigin:"100% 100%", ease:Back.easeOut.config( 2 ) }, "click+=1" )
.set( parent + ".arrow-pt-2", { drawSVG:"0 100%", x:-8, rotation:45, transformOrigin:"100% 0", ease:Power2.easeIn }, "click+=1" )
.to( parent + ".arrow-pt-2", .3, { x:0, rotation:0, transformOrigin:"100% 0", ease:Back.easeOut.config( 2 ) }, "click+=1" )
.to( {}, .01, {}, "click-end" )
.to( parent + ".circle-path-1", .5, { x:18, scale:.6, transformOrigin:"50% 50%", ease:Power4.easeIn }, "out" )
.to( parent + ".circle-path-2", .5, { x:-18, scale:.6, transformOrigin:"50% 50%", ease:Power4.easeIn }, "out" )
.set( parent + ".circle-path-1, " + parent + ".circle-path-2", { x:0, scale:1, transformOrigin:"50% 50%" }, "out+=.5" )
.set( parent + ".mud-container", { scale:0, transformOrigin:"50% 50%" }, "out+=.5" )
.to( parent + ".arrow *", .2, { stroke:"#FFFFFF", ease:Back.easeOut }, "out+=.5" )
.to( parent + ".arrow-pt-1", .2, { rotation:-30, transformOrigin:"100% 100%", ease:Power4.easeIn }, "out+=.3" )
.to( parent + ".arrow-pt-2", .2, { rotation:30, transformOrigin:"100% 0", ease:Power4.easeIn }, "out+=.3" )
.to( parent + ".arrow", .2, { rotation:10, scale:1.2, transformOrigin:"50% 50%", ease:Power4.easeIn }, "out+=.3" )
.to( parent + ".arrow", .6, { rotation:0, scale:1, transformOrigin:"50% 50%", ease:Back.easeOut }, "out+=.6" )
.to( parent + ".arrow-pt-1", .5, { rotation:0, transformOrigin:"100% 100%", ease:Back.easeOut.config(3) }, "out+=.5" )
.to( parent + ".arrow-pt-2", .4, { rotation:0, transformOrigin:"100% 0", ease:Back.easeOut.config(3) }, "out+=.5" )
.set( parent + ".xplod *", { drawSVG:"100% 100%", opacity:1 }, "out+=.45" )
.to( parent + ".xplod *", .1, { drawSVG:"0% 100%", ease:Power4.easeIn }, "out+=.45" )
.to( parent + ".xplod *", .7, { drawSVG:"0", opacity:0, ease:Power4.easeOut }, "out+=.55" )
.to( {}, .01, {}, "out-end" )
return objConfig.tl;
};
function createCloseAnimation( objConfig ) {
var parent = objConfig.parent;
TweenMax.set( parent + ".line-x-r", { drawSVG:"0" } );
TweenMax.set( parent + ".line-x-l", { drawSVG:"0" } );
TweenMax.set( parent + ".mud-container", { scale:0, transformOrigin:"50% 50%" } );
TweenMax.set( parent + ".xplod *", { drawSVG:"100% 100%" } );
objConfig.tl = new TimelineMax( { paused:true } )
.to( parent + ".line-x-r", .5, { drawSVG:"65% 54%", ease:Power2.easeIn }, "in" )
.to( parent + ".line-x-l", .5, { drawSVG:"65% 54%", ease:Power2.easeIn }, "in" )
.to( parent + ".line-x-r", .5, { drawSVG:"100% 83%", ease:Power2.easeOut }, "in+=.5" )
.to( parent + ".line-x-l", .5, { drawSVG:"100% 83%", ease:Power2.easeOut }, "in+=.5" )
.to( {}, .01, {}, "in-end" )
.to( parent + ".mud-container", .5, { scale:1, transformOrigin:"50% 50%", ease:Back.easeOut }, "over" )
.fromTo( parent + ".circle-path-2", .7, { rotation:0, transformOrigin:"40% 45%" }, { rotation:360, transformOrigin:"40% 45%", ease:Back.easeOut }, "over" )
.to( parent + ".line-x-r", .5, { drawSVG:"65% 54%", ease:Power2.easeIn }, "over" )
.to( parent + ".line-x-l", .5, { drawSVG:"65% 54%", ease:Power2.easeIn }, "over" )
.to( parent + ".line-x-r", .5, { drawSVG:"0% 15.8%", ease:Power2.easeOut }, "over+=.5" )
.to( parent + ".line-x-l", .5, { drawSVG:"0% 15.8%", ease:Power2.easeOut }, "over+=.5" )
.to( parent + ".x-path *", .2, { stroke:"#000000", ease:Back.easeOut }, "over" )
.to( parent + ".line-x-r", .1, { rotation:-15, transformOrigin:"50% 50%", ease:Power4.easeOut }, "over" )
.to( parent + ".line-x-r", .5, { rotation:0, transformOrigin:"50% 50%", ease:Back.easeOut }, "over+=.1" )
.to( parent + ".line-x-l", .1, { rotation:15, transformOrigin:"50% 50%", ease:Power4.easeOut }, "over" )
.to( parent + ".line-x-l", .4, { rotation:0, transformOrigin:"50% 50%", ease:Back.easeOut }, "over+=.1" )
.to( parent + ".x-path", .2, { rotation:-10, scale:1.2, transformOrigin:"50% 50%", ease:Power4.easeOut }, "over" )
.to( parent + ".x-path", .6, { rotation:0, scale:1, transformOrigin:"50% 50%", ease:Back.easeOut }, "over+=.2" )
.to( {}, .01, {}, "over-end" )
.to( parent + ".circle-path-1", .5, { x:18, scale:.6, transformOrigin:"50% 50%", ease:Power4.easeIn }, "out" )
.to( parent + ".circle-path-2", .5, { x:-18, scale:.6, transformOrigin:"50% 50%", ease:Power4.easeIn }, "out" )
.set( parent + ".circle-path-1, " + parent + ".circle-path-2", { x:0, scale:1, transformOrigin:"50% 50%" }, "out+=.5" )
.set( parent + ".mud-container", { scale:0, transformOrigin:"50% 50%" }, "out+=.5" )
.to( parent + ".x-path *", .2, { stroke:"#FFFFFF", ease:Back.easeOut }, "out+=.5" )
.to( parent + ".line-x-r", .2, { rotation:-30, transformOrigin:"50% 50%", ease:Power4.easeIn }, "out+=.3" )
.to( parent + ".line-x-l", .2, { rotation:30, transformOrigin:"50% 50%", ease:Power4.easeIn }, "out+=.3" )
.to( parent + ".x-path", .2, { rotation:10, scale:1.2, transformOrigin:"50% 50%", ease:Power4.easeIn }, "out+=.3" )
.to( parent + ".x-path", .6, { rotation:0, scale:1, transformOrigin:"50% 50%", ease:Back.easeOut }, "out+=.6" )
.to( parent + ".line-x-r", .5, { rotation:0, transformOrigin:"50% 50%", ease:Back.easeOut.config(3) }, "out+=.5" )
.to( parent + ".line-x-l", .4, { rotation:0, transformOrigin:"50% 50%", ease:Back.easeOut.config(3) }, "out+=.5" )
.set( parent + ".xplod *", { drawSVG:"100% 100%", opacity:1 }, "out+=.45" )
.to( parent + ".xplod *", .1, { drawSVG:"0% 100%", ease:Power4.easeIn }, "out+=.45" )
.to( parent + ".xplod *", .7, { drawSVG:"0", opacity:0, ease:Power4.easeOut }, "out+=.55" )
.to( {}, .01, {}, "out-end" )
return objConfig.tl;
};
function onArrowHandler( event ) {
event.preventDefault();
var itemDiv = $( event.currentTarget ).parent();
var side = itemDiv.attr( 'id' ).split('-')[3];
var tlSide = ( side == "left" ) ? tlArrowL : tlArrowR;
switch( event.type ){
case "mouseover":
if( objArrowBuffer[ side ].status != "" ) objArrowBuffer[ side ].event = event;
else tlSide.tweenFromTo( "over", "over-end" );
break;
case "mouseout":
if( objArrowBuffer[ side ].status != "" ) objArrowBuffer[ side ].event = event;
else tlSide.tweenFromTo( "out", "out-end" );
break;
case "click":
if( tlSide.currentLabel() != "click" ) {
objArrowBuffer[ side ].status = "feeding";
tlSide.tweenFromTo( "click", "click-end", { onComplete:bufferAction, onCompleteParams:[ { side:side, tlSide:tlSide } ] } );
};
break;
};
};
function bufferAction( objConfig ) {
var currentSideDiv = $( "#work-detail-arrow-" + objConfig.side + " a" );
var currentBuffer = objArrowBuffer[ objConfig.side ];
objArrowBuffer[ objConfig.side ] = {};
objArrowBuffer[ objConfig.side ].status = "";
if( currentBuffer.event ){
if( currentBuffer.event.type != "mouseover" ) currentSideDiv.trigger( currentBuffer.event );
};
};
function onCloseHandler( event ) {
event.preventDefault();
switch( event.type ){
case "mouseover":
tlClose.tweenFromTo( "over", "over-end" );
break;
case "mouseout":
tlClose.tweenTo( "out-end" );
break;
case "click":
//
break;
};
};
init();
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TimelineMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
Raw
style.css
body,html{width:100%; height: 100%; margin:0;}
body{background-color:#27282d; overflow:hidden;}
.full-area, .hit-area {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.full-area {
overflow: hidden;
}
.hit-area {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII=);
}
#work-detail-content-container {
position:relative;
width: 100%;
max-width: 960px;
height: 100%;
margin: 0 auto;
pointer-events: none;
}
#work-detail-arrows-container {
position: absolute;
display: table;
top: 0;
width: 100%;
height: 100%;
}
#work-detail-content {
position:absolute;
bottom:0;
top:0;
left:0;
right:0;
margin: 2.75rem;
}
#work-detail-arrows {
display: table-cell;
vertical-align: middle;
}
#work-detail-arrow-left {
position: absolute;
left: 0;
margin-top: -25px;
width: 50px;
height: 50px;
pointer-events: auto;
}
#work-detail-arrow-right {
position: absolute;
right: 0;
margin-top: -25px;
width: 50px;
height: 50px;
pointer-events: auto;
}
#work-detail-arrow-left svg, #work-detail-arrow-right svg {
position: absolute;
top: -50px;
left: -50px;
visibility: hidden;
pointer-events: none;
}
#work-detail-close {
position: absolute;
top: 0;
right: 0;
width: 40px;
height: 40px;
pointer-events: auto;
}
#work-detail-close svg {
position: absolute;
top: -20px;
left: -20px;
visibility: hidden;
pointer-events: none;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment