.box{
  height:50px;
  width:50px;
  margin:5px;
  border-radius:5px;
  opacity:1
  
}

.green{
  background-color:green
}

.orange{
  background-color:orange
}

.grey{
  background-color:grey
}

.spacing{
  height: 500px
}

.container{
  width:50px;
  margin:0px auto;
  padding: 150px 0px;
 
}

/* Initialize Controller */
const controller = new ScrollMagic.Controller();


/* GSAP Timeline Animation */
const tl = gsap.timeline({defaults: {duration: 0.5}});

tl.from(".green", {opacity: 0, scale: 0.5},)
  .from(".orange", {opacity: 0, scale: 0.5}) 
  .from(".grey", {opacity: 0, scale: 0.5});


/* ScrollMagic Scene */
const scene=new ScrollMagic.Scene({
  triggerElement:'.container',  
  triggerHook: 0  
})  
.setTween(tl) // add gsap animation to scene
.addIndicators()
.addTo(controller) // add scene to controller