Card Shuffle Animation

card-shuffle-animation.markdown

Card Shuffle Animation

A Pen by Craig Coles on CodePen.

License.

index.html

<div class="grid">
  <ul class="list">
    <li class="card"></li>
    <li class="card"></li>
    <li class="card"></li>
    <li class="card"></li>
    <li class="card"></li>
    <li class="card"></li>
    <li class="card"></li>
    <li class="card"></li>
    <li class="card"></li>
  </ul>
  
  <button class="stack">Stack</button>
  <button class="spread">Spread</button>
  
</div>

script.js

$('.stack').click(function() {
  
  $(".card").each(function(e) {

    setTimeout(function() {
      $(".card").eq(e).attr("class", "card");
    }, e * 150)
    
  });
  
});

$('.spread').click(function() {
  
  $(".card").each(function(e) {

    setTimeout(function() {
      $(".card").eq(e).attr("class", "card ani" + e);
    }, e * 150)
    
  });
  
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.scss

.grid {
  width: 1170px;
  margin:0 auto;
}

.list {
  height: 652px;
  position: relative;
  list-style-type:none;
  padding-left:0;
}

.card {
  
  transition: all 1s cubic-bezier(0.68,-.55,.265,1.55);
  
  perspective: 1000;
  -ms-transform: perspective(1000px);
  -moz-transform: perspective(1000px);
  -ms-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  
  float: left;
  width: 222px;
  height: 311px;
  background-color:#eee;
  
  position: absolute;
  right: 0;
  bottom: 0;
  margin: 30px 0 15px 15px;
  
  &:nth-child(5n) {
      margin-right: 0;
  }
  
  &.ani0 {
      right: 948px;
      bottom: 326px;
  }
  
  &.ani1 {
      right: 711px;
      bottom: 326px;
  }
  
  &.ani2 {
      right: 474px;
      bottom: 326px;
  }
  
  &.ani3 {
      right: 237px;
      bottom: 326px;
  }
  
  &.ani4 {
      right: 0;
      bottom: 326px;
  }
  
  &.ani5 {
      right: 948px;
      bottom: 0;
  }
  
  &.ani6 {
      right: 711px;
      bottom: 0;
  }
  
  &.ani7 {
      right: 474px;
      bottom: 0;
  }
  
  &.ani8 {
      right: 237px;
      bottom: 0;
  }
  
}