cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

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.

            
              <svg height="0" width="0" style="display: block; pointer-events: none;">
	<g id="logo_technology">
		<path d="M14.1,27.6L25,31.9l10.7-4.2c0,0,0.1-0.1,0.1-0.1c0.7-1.2,1.1-2.5,1.1-4.1c0.1-1.5-0.2-4.1-0.9-7.7L33.3,0
			l-6.1,1.1l2.9,16.6c0.4,2.4,0.6,4.1,0.6,5.1c0,1.1-0.4,2-1.1,2.9c-0.7,0.9-2,1.4-3.7,1.7c-0.6,0.1-1.1,0.2-1.6,0.2
			c-1,0-1.8-0.2-2.6-0.6c-1.1-0.6-1.9-1.4-2.4-2.6c-0.3-0.7-0.7-2.4-1.1-5L15.4,3.2L9.4,4.2l2.8,16C12.8,23.5,13.4,26,14.1,27.6z"/>
		<path d="M20.1,24.1c0.4,1,1.1,1.8,2,2.3c0.6,0.3,1.4,0.5,2.2,0.5c0.5,0,1,0,1.5-0.1c1.6-0.3,2.7-0.8,3.3-1.5
			c0.6-0.7,1-1.5,0.9-2.4c0-0.9-0.2-2.4-0.5-4.5L25,22.9l-6.5-6.5l0.5,2.9C19.4,21.8,19.8,23.4,20.1,24.1z"/>
		<path d="M49.6,22.2l-10.9,4.3l7.1-7.1v-0.7L37,17c0.5,3,0.7,5.1,0.6,6.5c-0.1,1.4-0.4,2.7-0.9,3.8L25,31.9
			l-11.8-4.6c-0.6-1.7-1.2-4-1.7-6.9L11,17.5l-6.1,1.3v0.7l6.5,7.1l-11-4.3L0,22.9l11.9,5.9l0,0L22.2,33L12,29.6l0.5,9.3L25,45.8
			l12.5-6.9l0.6-10l11.9-6L49.6,22.2z M25.3,34.2L25,43.1l-0.3-9.3l10.8-3.5L25.3,34.2z"/>
	
		<path d="M74.5,19.1c-2.2,0-4,0.9-5.6,2.7v-9.6h-5.1v26.7h4.7v-2.8c0.8,1.1,1.7,1.9,2.8,2.4c1.1,0.6,2.2,0.8,3.3,0.8
			c2.2,0,4.1-0.9,5.7-2.7c1.6-1.8,2.4-4.3,2.4-7.6c0-3.2-0.8-5.6-2.3-7.3C78.8,20,76.8,19.1,74.5,19.1z M76.2,33.8
			c-0.8,1-1.8,1.4-2.9,1.4c-1.5,0-2.6-0.7-3.5-2c-0.6-1-0.9-2.4-0.9-4.4c0-1.9,0.4-3.4,1.2-4.3c0.8-1,1.8-1.4,3.1-1.4
			c1.2,0,2.3,0.5,3.1,1.5c0.8,1,1.2,2.6,1.2,4.8C77.4,31.4,77,32.9,76.2,33.8z"/>
		<path d="M59.4,21.3c-0.5-0.6-1.2-1.1-2.1-1.6c-0.9-0.4-2-0.6-3.1-0.6c-2.6,0-4.7,1.1-6.4,3.3v-2.8h-1.1l-3.6,3.6
			v15.7h5.1v-8.7c0-2.2,0.1-3.6,0.4-4.4c0.3-0.8,0.7-1.4,1.4-1.9c0.7-0.5,1.5-0.7,2.4-0.7c0.7,0,1.3,0.2,1.8,0.5
			c0.5,0.3,0.8,0.8,1.1,1.4c0.2,0.6,0.3,2,0.3,4v9.9h5.1v-12c0-1.5-0.1-2.6-0.3-3.4C60.2,22.7,59.9,21.9,59.4,21.3z"/>
		<path d="M132.6,19.1c-2.6,0-4.7,0.9-6.3,2.7c-1.7,1.8-2.5,4.3-2.5,7.5c0,2.7,0.6,4.9,1.9,6.7
			c1.6,2.2,4.1,3.3,7.5,3.3c2.1,0,3.9-0.5,5.3-1.5c1.4-1,2.4-2.4,3.1-4.3l-5.1-0.9c-0.3,1-0.7,1.7-1.2,2.1c-0.5,0.4-1.2,0.7-2,0.7
			c-1.2,0-2.2-0.4-2.9-1.3c-0.8-0.8-1.2-2-1.2-3.5h12.8c0.1-3.9-0.7-6.8-2.4-8.7C137.8,20.1,135.5,19.1,132.6,19.1z M129.1,27.6
			c0-1.4,0.3-2.5,1.1-3.3c0.7-0.8,1.6-1.2,2.8-1.2c1,0,1.9,0.4,2.7,1.2c0.7,0.8,1.1,1.9,1.1,3.4H129.1z"/>
		<path d="M157.4,12.2v9.6c-1.6-1.8-3.4-2.7-5.6-2.7c-2.4,0-4.3,0.9-5.8,2.6c-1.5,1.7-2.3,4.2-2.3,7.5
			c0,3.2,0.8,5.7,2.4,7.5c1.6,1.8,3.5,2.7,5.7,2.7c1.1,0,2.2-0.3,3.2-0.8c1.1-0.5,2-1.4,2.8-2.5v2.8h4.7V12.2H157.4z M156.2,33.8
			c-0.8,1-1.8,1.5-3,1.5c-1.5,0-2.6-0.7-3.5-2c-0.6-0.9-0.9-2.4-0.9-4.5c0-1.9,0.4-3.4,1.2-4.3c0.8-1,1.8-1.4,3-1.4
			c1.2,0,2.3,0.5,3.1,1.5c0.8,1,1.2,2.6,1.2,4.8C157.4,31.3,157,32.8,156.2,33.8z"/>
		<path d="M101.5,22c-1.9-1.9-4.3-2.8-7.2-2.8c-1.9,0-3.6,0.4-5.1,1.3c-1.5,0.8-2.7,2-3.6,3.6
			c-0.8,1.6-1.3,3.2-1.3,4.9c0,2.2,0.4,4.1,1.3,5.6c0.8,1.5,2.1,2.7,3.7,3.5c1.6,0.8,3.3,1.2,5.1,1.2c2.9,0,5.2-1,7.1-2.9
			c1.9-1.9,2.8-4.3,2.8-7.3C104.3,26.3,103.3,23.9,101.5,22z M97.7,33.6c-0.9,1-2,1.5-3.4,1.5c-1.3,0-2.5-0.5-3.4-1.5
			c-0.9-1-1.4-2.5-1.4-4.4c0-1.9,0.5-3.4,1.4-4.4c0.9-1,2-1.5,3.4-1.5c1.3,0,2.5,0.5,3.4,1.5c0.9,1,1.4,2.5,1.4,4.4
			C99,31.1,98.6,32.6,97.7,33.6z"/>
		<polygon points="113.6,26 108.2,20.2 104.3,20.2 104.3,23.1 110.3,29.5 104.3,35.8 104.3,39.1 107.8,39.1 113.6,33 
			119.3,39.1 122.9,39.1 122.9,35.8 116.9,29.5 122.9,23.3 122.9,20.2 119.1,20.2 	"/>
		<path d="M107.4,46.9v-4.5h-1.7v-0.6h4.2v0.6h-1.7v4.5H107.4z"/>
		<path d="M111.1,46.9v-5.2h3.8v0.6h-3.1v1.6h2.9v0.6h-2.9v1.8h3.2v0.6H111.1z"/>
		<path d="M120.3,45.1l0.7,0.2c-0.1,0.6-0.4,1-0.8,1.3c-0.4,0.3-0.8,0.4-1.4,0.4c-0.6,0-1-0.1-1.4-0.3
			c-0.4-0.2-0.6-0.6-0.8-1c-0.2-0.4-0.3-0.9-0.3-1.4c0-0.5,0.1-1,0.3-1.4c0.2-0.4,0.5-0.7,0.9-0.9c0.4-0.2,0.8-0.3,1.3-0.3
			c0.5,0,1,0.1,1.3,0.4c0.4,0.3,0.6,0.6,0.8,1.1l-0.7,0.2c-0.1-0.4-0.3-0.6-0.5-0.8c-0.2-0.2-0.5-0.3-0.9-0.3c-0.4,0-0.7,0.1-1,0.3
			c-0.3,0.2-0.5,0.4-0.6,0.8c-0.1,0.3-0.2,0.7-0.2,1c0,0.4,0.1,0.8,0.2,1.1c0.1,0.3,0.3,0.6,0.6,0.7c0.3,0.2,0.6,0.2,0.9,0.2
			c0.4,0,0.7-0.1,1-0.3C120.1,45.8,120.3,45.5,120.3,45.1z"/>
		<path d="M122.5,46.9v-5.2h0.7v2.1h2.7v-2.1h0.7v5.2h-0.7v-2.4h-2.7v2.4H122.5z"/>
		<path d="M128.4,46.9v-5.2h0.7l2.8,4v-4h0.7v5.2h-0.7l-2.8-4.1v4.1H128.4z"/>
		<path d="M134,44.4c0-0.9,0.2-1.5,0.7-2c0.5-0.5,1.1-0.7,1.8-0.7c0.5,0,0.9,0.1,1.3,0.3c0.4,0.2,0.7,0.5,0.9,1
			c0.2,0.4,0.3,0.9,0.3,1.4c0,0.5-0.1,1-0.3,1.4c-0.2,0.4-0.5,0.7-0.9,0.9c-0.4,0.2-0.8,0.3-1.3,0.3c-0.5,0-0.9-0.1-1.3-0.4
			c-0.4-0.2-0.7-0.6-0.9-1C134.1,45.3,134,44.8,134,44.4z M134.8,44.4c0,0.6,0.2,1.1,0.5,1.5c0.3,0.4,0.8,0.5,1.3,0.5
			c0.5,0,1-0.2,1.3-0.5c0.3-0.4,0.5-0.9,0.5-1.5c0-0.4-0.1-0.8-0.2-1.1c-0.1-0.3-0.4-0.6-0.6-0.7c-0.3-0.2-0.6-0.3-0.9-0.3
			c-0.5,0-0.9,0.2-1.3,0.5C134.9,43.1,134.8,43.6,134.8,44.4z"/>
		<path d="M140.5,46.9v-5.2h0.7v4.5h2.6v0.6H140.5z"/>
		<path d="M145,44.4c0-0.9,0.2-1.5,0.7-2c0.5-0.5,1.1-0.7,1.8-0.7c0.5,0,0.9,0.1,1.3,0.3c0.4,0.2,0.7,0.5,0.9,1
			c0.2,0.4,0.3,0.9,0.3,1.4c0,0.5-0.1,1-0.3,1.4c-0.2,0.4-0.5,0.7-0.9,0.9c-0.4,0.2-0.8,0.3-1.3,0.3c-0.5,0-0.9-0.1-1.3-0.4
			c-0.4-0.2-0.7-0.6-0.9-1C145.1,45.3,145,44.8,145,44.4z M145.7,44.4c0,0.6,0.2,1.1,0.5,1.5c0.3,0.4,0.8,0.5,1.3,0.5
			c0.5,0,1-0.2,1.3-0.5c0.3-0.4,0.5-0.9,0.5-1.5c0-0.4-0.1-0.8-0.2-1.1c-0.1-0.3-0.4-0.6-0.6-0.7c-0.3-0.2-0.6-0.3-0.9-0.3
			c-0.5,0-0.9,0.2-1.3,0.5C145.9,43.1,145.7,43.6,145.7,44.4z"/>
		<path d="M154,44.9v-0.6l2.2,0v1.9c-0.3,0.3-0.7,0.5-1.1,0.6c-0.4,0.1-0.7,0.2-1.1,0.2c-0.5,0-1-0.1-1.4-0.3
			c-0.4-0.2-0.7-0.5-1-0.9c-0.2-0.4-0.3-0.9-0.3-1.4c0-0.5,0.1-1,0.3-1.4c0.2-0.4,0.5-0.8,0.9-1c0.4-0.2,0.9-0.3,1.4-0.3
			c0.4,0,0.7,0.1,1,0.2c0.3,0.1,0.5,0.3,0.7,0.5c0.2,0.2,0.3,0.5,0.4,0.8l-0.6,0.2c-0.1-0.3-0.2-0.5-0.3-0.6
			c-0.1-0.2-0.3-0.3-0.5-0.4c-0.2-0.1-0.5-0.1-0.7-0.1c-0.3,0-0.6,0-0.8,0.1c-0.2,0.1-0.4,0.2-0.6,0.4c-0.1,0.2-0.3,0.3-0.3,0.5
			c-0.1,0.3-0.2,0.7-0.2,1c0,0.5,0.1,0.8,0.2,1.2c0.2,0.3,0.4,0.5,0.7,0.7c0.3,0.2,0.6,0.2,1,0.2c0.3,0,0.6-0.1,0.9-0.2
			c0.3-0.1,0.5-0.2,0.7-0.4v-1H154z"/>
		<path d="M159.3,46.9v-2.2l-2-3h0.8l1,1.6c0.2,0.3,0.4,0.6,0.5,0.9c0.2-0.3,0.3-0.6,0.6-0.9l1-1.5h0.8l-2.1,3v2.2
			H159.3z"/>
	</g>
</svg>
<main>
	<div class="label">
		<h1>Unboxed Technology Footer Animation</h1>
		<small>Click the Bouncing box</small>
		<a href="#" class="button js-trigger-reset">
			<span>Reset</span>
		</a>
	</div>
	<div class="-content -index">
		<div>
			
			
			<div class="bounce-wrap">
				<div class="bounce">
					<div class="-shadow"></div>
					<div class="-box-wrap js-box-wrap">
						<div class="-box">
							<div class="front wall"></div>
							<div class="back wall"></div>
							<div class="right wall"></div>
							<div class="left wall"></div>

							<div class="front-right wall"></div>
							<div class="front-left wall"></div>
							<div class="back-right wall"></div>
							<div class="back-left wall"></div>  
						</div>
					</div>
					<div id="emitter"></div>
					<div class="explode">
						<span class="cloud -one js-cloud-1"></span>
						<span class="cloud -two js-cloud-2"></span>
						<span class="cloud -three js-cloud-3"></span>
					</div>
					<svg class="icon js-icon-logo" viewBox="0 0 162.5 47">
						<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#logo_technology"></use>
					</svg>
				</div>
			</div>
			
			
    	</div>
	</div>
</main>
            
          
!
            
              $ship_cove: #6f7dbc;
$tree_poppy: #f8981c;
$white: #ffffff;
$cube-size: 32px;
$lightb: #d1d5e9;
$darkb: #96a0ce;
$leftb: #b0c2d6;
$rightb: #8a9fb4;
$top: #f8f8fc;
$greyline: #000;

@keyframes bounce {
  0% {
    transform: translateY( 0 );
  }
  100% {
    transform: translateY( -25px );
  }
}

@keyframes shadow {
  0% {
    background: rgba(0,0,0, 0.5);
    transform: scale( 0.75 ) rotateX(75deg) rotateY(0deg) rotateZ(-45deg);
    box-shadow: 0 0 0px rgba(0,0,0, 0.6);
  }
  100% {
    background: rgba(0,0,0, 0.15);
    transform: scale( 1 ) rotateX(75deg) rotateY(0deg) rotateZ(-45deg);
    box-shadow: 0 0 10px rgba(0,0,0, 0.3);
  }
}

body{
	font-size: 1.6rem;
	font-family: "Open Sans", sans-serif;
	color: #fff;
	background-color: #36373c;
	-webkit-font-smoothing: antialiased;
	margin: 0;
	padding: 0;
	overflow: hidden;
}
.label{
	width: 100%;
	position: absolute;
	text-align: center;
	small{
		display: block;
		margin-bottom: 1em;
	}
}
h1{
  color: #fff;
	margin: 1em 0 0;
  /* margin-bottom: 1em; */
  font-size: 2.2rem;
  font-weight: 100;
}
main {
  height: 100vh;
  /* padding: 10px; */
  text-align: center;
  
  .-content{
    position: relative;
    height: 100vh;
    
    > div {
      height: 100%;
      overflow: hidden;
      overflow-y: auto;
    }
    
    &.-index{
        display: table;
        width: 100%;
      
      > div {
        display: table-cell;
        vertical-align: middle;
      }
    }
  }
}

.button{
	cursor: pointer;
	text-align: center;
	border: 0;	
	text-decoration: none;
	position: relative;
	display: none;
	z-index: 10;
	padding: 1rem 3rem;
	line-height: 1rem;


	span{
		font-size: 1rem;
		vertical-align: middle;
		text-transform: uppercase;
		font-weight: 800;
		color: $white;
		display: block;
	}

	&:hover{
		&:before{
			opacity: 1;
			transform: scale(1);
		}
		&:after{
			opacity: 0;
			transform: scale(0.85);
		}
	}

	&:before,
	&:after{
		display: block;
		content: ' ';
		z-index: -1;
		border-radius: 999px;
		pointer-events: none;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		backface-visibility: hidden;
		transition: all 280ms;
		animation-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
	}

	&:after{
		background-color: $tree_poppy;
	}
	&:before{
		opacity: 0;
		transform: scale(1.15);
		background-color: $ship_cove;
	}
}

#emitter{
	width: 50px;
	height: 60px;
	// background-color: lighten($tuna, 10%);
	display: block;
	position: absolute;
	left: 50%;
	transform: translateX(-50%) translateY(-12px);
	cursor: pointer;

}
.emitter-dot {
	background-color: #fff;
	border-radius: 999px;
	position: absolute;
}
// bouncy box
.bounce-wrap{
	display: block;
	height: 90px;

	.icon{
		width: 232px;
		height: 66px;
		position: absolute;
		fill: $white;
		left: 47%;
		transform: translateX(-50%) translateY(-32px);
		opacity: 0;
		visibility: hidden;
	}
}
.bounce{
	position: relative;
	margin: 4rem 0;

	.-box,
	.-box-wrap,
	.-shadow{
		left: 0;
		margin: auto;
		position: absolute;
		right: 0;
		top: 0;
	}
	.-shadow{

		bottom: -90px;
		height: 32px;
		width: 32px;
		background: rgba(0,0,0, 0.5);
	    transform: scale( 0.75 ) rotateX(75deg) rotateY(0deg) rotateZ(-45deg);
	    box-shadow: 0 0 0px rgba(0,0,0, 0.6);
		animation: shadow 250ms cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite alternate;
	}
	.-box-wrap{
	    transform: translateY( 0 );
		animation: bounce 250ms cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite alternate;
	}
	.-box {
	    width: $cube-size;
	    height: $cube-size;
	    position: relative;
	    transform-style: preserve-3d;
	    transform: rotateX(-14deg) rotateY(-45deg) rotateZ(0deg);
	    
	    .wall{
			width: $cube-size;
			height: $cube-size;
			position: absolute;
			transition: all 1s ease-out;
			backface-visibility: hidden;
	    }
	    .front{
			background: $top;
			transform: rotateX(0deg) rotateY(0deg) translateZ($cube-size/2) rotateX(90deg);
			transform-origin: 50% 100%;
			height: 50%;
			z-index: 1;
	    }
	    .right{
			height: $cube-size;
			background: $top;
			transform-style: preserve-3d;
			transform: translateX($cube-size/2) rotateY(90deg) rotateX(90deg);
			transform-origin: 50% 100%;
			height: 50%;
			z-index: 1;
	    }
	    .back{
			background: $top;
			transform: rotateY(180deg) translateZ($cube-size/2) rotateX(90deg);
			transform-origin: 50% 100%;
			height: 50%;
	    }
	    .left{
			background: $top;
			transform: translateX(-$cube-size/2) rotateY(-90deg) rotateX(90deg);
			transform-origin: 50% 100%;
			height: 50%;
	    }
	    .front-left{
			background: $lightb;
			height: $cube-size;
			transform: rotateX(0deg) rotateY(0deg) translateZ($cube-size/2)  translateY($cube-size/2);
			transform-origin: 50% 100%;
	    }
	    .front-right{
			background: $darkb;
			height: $cube-size;
			transform: translateX($cube-size/2) rotateY(90deg)  translateY($cube-size/2);
			transform-origin: 50% 100%;
	    }
	    .back-left{
			background: $leftb;
			height: $cube-size;
			transform: rotateX(0deg) translateX(-$cube-size/2) rotateY(-90deg) translateY($cube-size/2);
			transform-origin: 50% 100%;
	    }
	    .back-right{
			background: $rightb;
			height: $cube-size;
			transform: rotateX(0deg)  rotateY(180deg) translateZ($cube-size/2) translateY($cube-size/2);
			transform-origin: 50% 100%;
	    }
	}
}
            
          
!
            
              function init() {
	var emitter = document.getElementById("emitter"),
		container = document.createElement("div"),
		emitterSize = 100,
		dotQuantity = 50,
		dotSizeMax = 100,
		dotSizeMin = 10,
		speed = 1,
		gravity = 1;
	
	container.setAttribute("id", "emit-wrap");
	//setup the container with the appropriate styles
    container.style.cssText = "position:absolute; left:0; top:0; overflow:visible; z-index:5000; pointer-events:none;";
	document.body.appendChild(container);
	
	function createExplosion(container) {
		var tl = new TimelineLite({
			onComplete: function() {
				$('#emit-wrap').remove();
			}
		}),
			angle, length, dot, i, size;
		//create all the dots
		for (i = 0; i < dotQuantity; i++) {
			dot = document.createElement("div");
			dot.className = "emitter-dot";
			size = getRandom(dotSizeMin, dotSizeMax);
			container.appendChild(dot);
			angle = Math.random() * Math.PI * 2; //random angle
			//figure out the maximum distance from the center, factoring in the size of the dot (it must never go outside the circle), and then pick a random spot along that length where we'll plot the point. 
			length = Math.random() * (emitterSize / 2 - size / 2);
			//place the dot at a random spot within the emitter, and set its size.
			TweenLite.set(dot, {
				x: Math.cos(angle) * length,
				y: Math.sin(angle) * length,
				width: size,
				height: size,
				xPercent: -50,
				yPercent: -50,
				force3D: true
			});
			//this is where we do the animation...
			tl.to(dot, 1 + Math.random(), {
				opacity: 0,

				//if you'd rather not do physics, you could just animate out directly by using the following 2 lines instead of the physics2D:
				x: Math.cos(angle) * length * 24,
				y: Math.sin(angle) * length * 24
			}, 0);
		}
		return tl;
	}
	
	function explode(element) {
		var explosion = createExplosion(container);
		// var bounds = element.getBoundingClientRect();

		var offset = $(element).offset();
		var width = $(element).width();
		var height = $(element).height();

		// TweenLite.set(container, {
		//     x: bounds.left + bounds.width / 2,
		//     y: bounds.top + bounds.height / 2
		// });
		TweenLite.set(container, {
			x: offset.left + width / 2,
			y: offset.top + height / 2
		});
		explosion.restart();
	}

	function getRandom(min, max) {
		return min + Math.random() * (max - min);
	}
	
	emitter.onmousedown = emitter.ontouchstart = function() {
		explode(emitter);
		$(emitter).hide();

		$('.-shadow').hide();
		$('.js-box-wrap').hide();
		setTimeout(function(){
			$('.js-trigger-reset').css({
				'display': 'inline-block'
			});
		}, 2000);
		

		var tl = new TimelineMax();
		tl.add("logo")
		.add(logoReveal,"logo");
	}
}

function logoReveal() {
	var logoReveal = new TimelineMax();
             
    logoReveal.to('.js-icon-logo', 1, {autoAlpha: 1, ease: Power4.easeOut});
              
    return logoReveal;
}

function reset() {
	$('.-shadow').attr('style', '');
	$('.js-box-wrap').attr('style', '');
	$('.js-icon-logo').attr('style', '');
	$('#emitter').attr('style', '');
	$('.js-trigger-reset').hide();
}

$(document).ready(function () {
	init();
	$('.js-trigger-reset').click(function() {
		reset();
		init();
	});
});
            
          
!
999px
Loading ..................

Console