@keyframes loadbar {
  from {
    width: 0px;
  }
  to {
    width: 450px;
  }
}

@mixin ballb($yaxis: 0) {
  transform: translate3d(0, $yaxis, 0);
}

@keyframes packit {
  1% { @include ballb(-400px); }
  20%, 40%, 60%, 80%, 95%, 99%, 100% { @include ballb() }
  30% { @include ballb(-80px); }
  50% { @include ballb(-40px); }
  70% { @include ballb(-30px); }
  90% { @include ballb(-15px); }
  97% { @include ballb(-10px); }
}

.packitin {
  animation: packit 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.tossitaway {
  @include ballb(-400px);
}

line.volume-line {
  stroke: #333;
  stroke-dasharray: 2,1;
  stroke-width: 1;
  stroke-opacity: 0.7;
}

@mixin itemp($yaxis: 0px) {
  transform: translateY($yaxis);
}

polygon.volume-line {
  stroke: #000;
  stroke-width: 1;
  fill-opacity: 0.9;
  stroke-opacity: 0.8;
  visibility: hidden;
}

@keyframes packit {
  1% {
  	@include itemp(-600px);
  	visibility: visible;
   }
  70% { @include itemp(-300px); visibility: visible;}
  100% { @include itemp(0.1px); visibility: visible;}
}

.box-figure.packani svg polygon{
	@for $box from 1 through 50 {
		&.volume-line[data-volume-index='#{$box}']{
			// transform: none;
			// visibility:hidden;
			// display: block;
			// @include iopa(1);
	    	animation: packit 1s ($box * 0.2s) forwards;
		}
	}
}