Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

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>
              
            
!

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;
}
              
            
!

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();
              
            
!
999px

Console