let muted = true,
    n = 8;

gsap.timeline()
    .set('#container', {perspective:800})
    .set('#soundBtn', {width:16, height:32, left:'50%', top:'100%', x:-8, y:-40, cursor:'pointer', opacity:0.5});


for (let i=0; i<n; i++){ 
  
  let b = document.createElement('div'),
      a = new Audio('https://assets.codepen.io/721952/chime'+(n-i)+'.mp3');
  
  b.classList.add('box');
  document.getElementById('container').appendChild(b);
  b.appendChild(a);

  gsap.set(b, {
    left:'50%',
  	top:'50%',
    x:-100,
    y:-300,
    z:600,
  	width:200,
	  height:600,
    borderRadius:20,
    background:()=>'hsl('+(i/n*200)+',100%,50%)'
  });
  
  gsap.fromTo(b, {
    scaleY:0,
    opacity:0,
    zIndex:-i,
    rotationY:90+i/n*205,
    transformOrigin:String("50% 50% -900%")
  },{
    scaleY:1,
    opacity:0.7,
    duration:1,
    delay:1-0.5*(i/n),
    ease:'elastic'
  })
  
  b.onmouseenter = (e)=>{
    if (!muted){
      a.currentTime=0;
      a.volume=0.15;
      a.play();
    }
    gsap.to(b, {duration:0.3, opacity:1, scaleY:1.2, ease:'back.out(5)'});
  }
  
  b.onmouseleave = (e)=>{
    gsap.to(b, {duration:0.4, opacity:0.7, scaleY:1});
  }
}

window.onmousemove = (e)=>{
  gsap.to('.box', {duration:0.6, rotationY:(i)=>45+i/n*205+90*(e.clientX/window.innerWidth) });
}


document.getElementById('soundBtn').onclick = (e)=>{
  gsap.timeline()
      .to('#soundBtn', {width:()=>(muted)?16:32, duration:0.15, ease:'power3.in'}, 0)
      .to('#soundBtn', {x:()=>(muted)?-8:-16, duration:0.3, ease:'back.out(2)'}, 0)
  muted=!muted;
}