<!-- 
https://dribbble.com/shots/2252572-Day-083-Social-Connect
 -->

<div class="center">
  <div class="wrapper">
    <a href="https://dribbble.com/shots/2252572-Day-083-Social-Connect">
      <div class="container container--facebook">
        <div class="box box--left box--front">
          <i class="ion ion-social-facebook"></i>
          <span class="count">
            13 K        
          </span>
        </div>    
        <span class="follow follow--left">
          Like
        </span>
      </div>
    </a>

    <a href="https://dribbble.com/shots/2252572-Day-083-Social-Connect">
      <div class="container container--twitter">
        <div class="box box--middle">
          <i class="ion ion-social-twitter"></i>  
          <span class="count">
            10.5 K        
          </span>
        </div>
        <span class="follow follow--middle">
          Follow
        </span>
      </div>
    </a>


    <a href="https://dribbble.com/shots/2252572-Day-083-Social-Connect">
      <div class="container container--instagram">
        <div class="box box--right">
          <i class="ion ion-social-instagram"></i>
          <span class="count">
            11 K
          </span>
        </div>
        <span class="follow follow--right">
          Follow
        </span>
      </div>
    </a>

  </div>
</div>

<button id="stop" class="button" 
  title="Stops the animation from running">
  Stop
</button>

@import "bourbon"

// Colors
$facebook: #37508D
$twitter: #00A5EA
$instagram: #195484

$body__background-color: #ECEFF4

// The height of the boxes
$box-height: 220px
$box-width: 220px

// The box's spacing away from its container  
$spacing: 40px



body
  margin: 50px 0px
  font-family: Montserrat
  font-size: 1rem
  line-height: 1.25rem
  background-color: $body__background-color

a
  text-decoration: none
  display: block



.center
  display: flex
  align-items: center
  justify-content: center
  height: 70vh



.wrapper
  max-width: 780px
  margin: 0 auto
  display: flex






.container
  color: white
  background-color: white
  border-radius: 2px
  box-shadow: 0 35px 80px 7px rgba(black, 0.1)
  margin: 0 20px
  min-width: $box-width
  min-height: $box-height
  perspective: 1000px
  position: relative
  user-select: none

.container--facebook
  background-color: $facebook 

.container--twitter
  background-color: $twitter

.container--instagram
  background-color: $instagram





// Styles for the icons 
.ion
  position: absolute
  left: 50%
  top: 50%
  transform: translate(-50%, -50%)

.ion.ion-social-facebook
  color: $facebook

.ion.ion-social-twitter
  color: $twitter

.ion.ion-social-instagram
  color: $instagram





.box
  align-items: flex-end
  background-color: white
  box-shadow: 0 20px 60px 0px rgba(black, 0.08)
  border-radius: 2px
  color: white
  font-size: 2.25rem
  justify-content: center
  position: relative
  text-align: center
  transition: transform 0.8s
  transform-style: transform-3d
  perspective: 1000px
  +size($box-width $box-height)

  > *
    transition: transform 0.8s
    transform-style: transform-3d

.box--left
  transition: transform 0.8s
  
.box--middle
  transition: transform 0.4s $ease-out-quad

.box--right
  transition: transform 0.7s $ease-out-back





.container:hover, .active
  
  // Not sure how to achieve this in a better way
  // and not sure how to make the text not blurry 
  .box--left
    transform: translate(-$spacing, -$spacing) rotate(-90deg) rotateY(180deg)  

    .ion
      transform: rotate(270deg) rotateY(180deg) translate(-122%, -4%)
      
    .count
      transform: rotate(270deg) rotateY(180deg) translate(-200%, 200%) 


  .box--middle
    transform: translateY(-$spacing) 

  .box--right
    transform: translate($spacing, -$spacing)




// The follow count 
.count
  font-size: 14px
  color: rgba(black, 0.4)
  display: block
  font-weight: 400
  text-center: center
  position: absolute
  left: 50%
  top: 70%
  transform: translate(-50%, -50%)
  




.follow
  bottom: 0 
  color: white
  display: block
  font-size: 13px
  font-weight: 400
  letter-spacing: 0.5px
  text-transform: uppercase
  position: absolute
  
.follow--left
  right: 0
  transform: translate(-14px, -10px)

.follow--middle
  left: 50%
  transform: translate(-50%, -10px) 

.follow--right
  left: 0
  transform: translate(14px, -10px)





$button__background: rgba(white, 0.7)
$button__foreground: #555
$button__background--active: rgba(white, 0.7)
$button__font-size: 14px

.button
  background-color: $button__background
  border: 0
  box-shadow: 0 3px 6px 0 rgba(black, 0.08), 0 4px 12px 0 rgba(black, 0.08)
  border-radius: 3px
  color: $button__foreground
  cursor: pointer
  flex-wrap: nowrap
  font-size: rem($button__font-size)
  outline: 0
  padding: 10px 30px
  position: relative
  text-align: center
  display: block
  transition: box-shadow 0.15s, background-color 0.15s
  user-select: none
  vertical-align: middle

  &:active
    box-shadow: 0 2px 3px 0 rgba(black, 0.1), 0 2px 4px 0 rgba(black, 0.05)

var button = document.querySelector('#stop');
var shouldKeepAnimating = true;
var addClassTimeouts = [];
var containers = document.querySelectorAll('.container');
containers = Array.prototype.slice.call(containers, 0);

setTimeout(setActiveClasses, 500)

button.addEventListener('click', function () {
  shouldKeepAnimating = ! shouldKeepAnimating;
  
  if (shouldKeepAnimating) {
    this.textContent = 'Stop';
    setActiveClasses();
  } else {
    this.textContent = 'Start';
    addClassTimeouts.forEach(function (timeout) {
      clearTimeout(timeout);
    });
    clearActiveClasses();
  }
});

function setActiveClasses() {
  var time = 0;

  if ( ! shouldKeepAnimating) {
    return;
  }
  
  addClassTimeouts = [];
  
  containers
    .forEach(function (container) {
      
      time += 1000;
      var timeoutId= setTimeout(function () {
                
        container.classList.add('active')
      }, time);
      addClassTimeouts.push(timeoutId)
    });

  setTimeout(function () {
    clearActiveClasses();
    setTimeout(setActiveClasses, 2000);
  }, time + 2000)
}

function clearActiveClasses() {
  containers.forEach(function (container) {
    container.classList.remove('active');
  });
}