<link href='https://fonts.googleapis.com/css?family=Roboto+Condensed' rel='stylesheet' type='text/css'>
<svg id="splash-svg-node" version="1.1"
	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
	 x="0px" y="0px" width="596.7px" height="565.7px" viewBox="0 0 596.7 565.7" enable-background="new 0 0 596.7 565.7"
	 xml:space="preserve">
<defs>
</defs>
  <path id="splash" fill="none" stroke="#EEF4F2" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" d="M231.8,256
	l-27.7,16 M209.3,229.6l-16,27.7 M174,220V252 M138.7,229.6l16,27.7 M116.1,256l27.7,16 M116.1,303.2l27.7-16 M138.7,329.5l16-27.7
	 M174,339.1v-31.9 M209.3,329.5l-16-27.7 M231.8,303.2l-27.7-16"/>
</svg>

<div id="container">
  <div id="music">MUSIC</div>
<!-- Generator: Adobe Illustrator 18.1.0, SVG Export Plug-In  -->
<svg version="1.1"
	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
	 x="0px" y="0px" width="596.7px" height="565.7px" viewBox="0 0 596.7 565.7" enable-background="new 0 0 596.7 565.7"
	 xml:space="preserve">
<defs>
</defs>
  
<path id="band-shadow" fill="none" stroke="#3D383F" stroke-width="36.72" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
	M186,262.2c1.7-23.5,11.5-43.6,29.4-60.5c19.6-18.4,43.1-27.5,70.5-27.3c27.5,0.2,50.8,9.6,69.8,28.4c17.2,16.8,26.6,36.6,28.3,59.5
	"/>
<path id="arm-right" fill="none" stroke="#3D383F" stroke-width="13.92" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
	M397.6,289.1l0,24.3"/>
<path id="arm-ball-right" fill-rule="evenodd" clip-rule="evenodd" fill="#3C3A3D" d="M379.2,313.5c0-3.5,1.3-6.5,3.8-9
	c2.4-2.4,5.3-3.6,8.8-3.6c3.4,0,6.4,1.2,9,3.6c2.4,2.5,3.6,5.5,3.6,9s-1.2,6.4-3.6,8.8c-2.6,2.5-5.6,3.8-9,3.8
	c-3.5,0-6.4-1.3-8.8-3.8C380.4,319.9,379.2,317,379.2,313.5"/>
<path id="arm-left" fill="none" stroke="#3D383F" stroke-width="13.92" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
	M172.3,289.1v24.3"/>
<path id="arm-ball-left" fill-rule="evenodd" clip-rule="evenodd" fill="#3C3A3D" d="M190.7,313.5c0,3.5-1.3,6.4-3.8,8.8
	c-2.4,2.5-5.3,3.8-8.8,3.8s-6.5-1.3-9.1-3.8c-2.3-2.4-3.5-5.3-3.5-8.8s1.2-6.5,3.5-9c2.6-2.4,5.6-3.6,9.1-3.6s6.4,1.2,8.8,3.6
	C189.4,307,190.7,310,190.7,313.5"/>
<path id="cup-end-left" fill="none" stroke="#626062" stroke-width="13.92" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
	M188.4,350.2l-1.5-35.9"/>
<path id="cup-left" fill="none" stroke="#F0EEF3" stroke-width="43.98" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
	M208.2,309.8l1.7,46.3"/>
<path id="sponge-left" fill="none" stroke="#363739" stroke-width="18.54" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
	M224.1,372.2l-3.5-81"/>
<path id="band-white" fill="none" stroke="#EEF4F2" stroke-width="36.72" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
	M174,272.5c1.7-28.9,12.5-53.9,32.5-75c21.8-23,48.1-34.5,78.8-34.5c30.8,0,57.1,11.5,78.9,34.5c20,21.1,30.8,46.1,32.6,75"/>
<path id="cup-end-right" fill="none" stroke="#626062" stroke-width="13.92" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
	M383,314.4l-1.5,35.9"/>
<path id="cup-right" fill="none" stroke="#F0EEF3" stroke-width="43.98" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
	M361.7,309.8l-1.7,46.3"/>
<path id="sponge-right" fill="none" stroke="#363739" stroke-width="18.54" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
	M349.3,291.2l-3.5,81"/>
<path id="screw-left" fill-rule="evenodd" clip-rule="evenodd" fill="#9F9FA1" d="M182.1,280.9c0,2.2-0.8,4.1-2.5,5.8
	s-3.5,2.5-5.9,2.5c-2.2,0-4.2-0.8-5.8-2.5s-2.4-3.5-2.4-5.8c0-2.3,0.8-4.3,2.4-5.9c1.6-1.6,3.6-2.5,5.8-2.5h0.2
	c2.2,0.1,4.1,0.9,5.6,2.5C181.2,276.6,182.1,278.5,182.1,280.9"/>
<path id="screw-right" fill-rule="evenodd" clip-rule="evenodd" fill="#9F9FA1" d="M405.3,280.9c0,2.2-0.8,4.1-2.4,5.8
	s-3.6,2.5-5.9,2.5c-2.2,0-4.1-0.8-5.8-2.5s-2.5-3.5-2.5-5.8c0-2.3,0.8-4.3,2.5-5.9c1.6-1.6,3.4-2.4,5.6-2.5h0.2
	c2.3,0,4.3,0.8,5.9,2.5C404.5,276.6,405.3,278.5,405.3,280.9z"/>
  <path id="wave" fill="none" stroke="#EEF4F2" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" d="M245.7,332.9
	L263,333l10.7-23.2l11.3,40.4l13.4-61.1l8,43.2l18-0.1"/>
</svg>


</div>

body{
  background-color:#85CF9A;
  width:100%;
  height:100%;
  overflow:hidden;
  font-family:'Roboto Condensed', sans-serif;
}

#music{
  position:absolute;
  color:#EEF4F2;
  font-size:74px;
  text-align:center;
  letter-spacing:-1pt;
}

svg{
 
  opacity:0
}

var container = document.getElementById('container');
var splashSVGNode = document.getElementById('splash-svg-node');
var music = document.getElementById('music');

var bandWhite = document.getElementById('band-white');
var bandShadow = document.getElementById('band-shadow');

var cupEndRight = document.getElementById('cup-end-right');
var cupEndLeft = document.getElementById('cup-end-left');

var armLeft = document.getElementById('arm-left');
var armRight = document.getElementById('arm-right');

var armBallLeft = document.getElementById('arm-ball-left');
var armBallRight = document.getElementById('arm-ball-right');

var spongeLeft = document.getElementById('sponge-left');
var spongeRight = document.getElementById('sponge-right');

var cupLeft = document.getElementById('cup-left');
var cupRight = document.getElementById('cup-right');

var screwLeft = document.getElementById('screw-left');
var screwRight = document.getElementById('screw-right');
var splash = document.getElementById('splash');
var wave = document.getElementById('wave');


TweenMax.set(container, {
  position:'absolute',
  left:'50%',
  xPercent:-50,
  top:'50%',
  yPercent:-50,
  perspective:400,
  //cursor:'pointer',
  userSelect:'none'
});

TweenMax.set([music], {
  position:'absolute',
  left:'48%',
  xPercent:-50,
  top:'75%',
  yPercent:-50,
  alpha:0,
  transformOrigin:'50% 20% 0px',
  rotationX:-90,
  userSelect:'none'
});
TweenMax.set(splashSVGNode, {
  position:'absolute',
  left:'60%',
  xPercent:-50,
  top:'28%',
  yPercent:-50,
  //cursor:'pointer',
  userSelect:'none'
});

TweenMax.set('path', {
  drawSVG:0,
  //boxShadow: "-10px 10px 0px 0px blue",
  transformOrigin:'50% 50%',
  attr:{'fill-opacity':1}
})
TweenMax.set(splash, {
  position:'absolute',
  drawSVG:'40 60'
})
TweenMax.set(wave, {
  position:'absolute',
  drawSVG:0
})



var tl = new TimelineMax({repeat:-1, yoyo:false, repeatDelay:3});
tl.timeScale(3)
tl.set('svg', {
  alpha:1
})
.set([bandWhite, bandShadow],{
  transformOrigin:'50% 0%'
})
.set([cupEndRight, spongeRight, cupRight], {
  transformOrigin:'100% 0%',
  drawSVG:true,
  rotation:-20,
  scale:0
})
.set([cupEndLeft, spongeLeft, cupLeft], {
  transformOrigin:'0% 0%',
  drawSVG:true,
  rotation:20,
  scale:0
})


.to(splash,4, {
  drawSVG:0,
  //top:'+=100',
  ease:Power2.easeOut
})
/*
.to(splashSVGNode,4, {
  top:'+=10%'
  //top:'+=100',
  ease:Power2.easeIn
},'-=4')
*/
.to(splash, 2, {
  alpha:0,
  ease:Power2.easeIn
}, '-=4')
.from(container, 6, {
  rotation:80,
  
  ease:Back.easeOut.config(3)
}, '-=4')

.to([bandWhite, bandShadow], 4, {
  drawSVG:true,
  ease:Power1.easeInOut
}, '-=6')

.set([screwLeft, screwRight], {
  attr:{'fill-opacity':1},
  transformOrigin:'50% 50%'
},'-=2')

.staggerFrom([screwLeft, screwRight], 2, {
  scale:0,
  ease:Elastic.easeOut.config(1)
},1,'-=4')

.staggerTo([armLeft, armRight], 1, {
  drawSVG:true
}, 1, '-=4')

.staggerFrom([armBallLeft, armBallRight], 1, {
  scale:0
},1, '-=3.5')


.to([cupEndLeft, spongeLeft, cupLeft], 2, {
  	scale:1,
  rotation:0,
  //drawSVG:true,
  ease:Back.easeOut.config(1)
}, '-=1.5')

.to([cupEndRight, spongeRight, cupRight], 2, {
  	scale:1,
  rotation:0,
  //drawSVG:true,
  ease:Back.easeOut.config(1)
},'-=1.5')

.to(music, 6, {
  //scale:1,
  rotationX:0,
  
  alpha:1,
  ease:Elastic.easeOut//.config(1)
}, '-=0.5')


.to(wave, 2, {
  //immediateRender:false,
  drawSVG:true
}, '-=7')
.to(container, 1, {
  alpha:0
}, '+=2')

.to(wave, 1, {
  drawSVG:'100% 100%'
}, '-=8')