Animated Card Stacks.markdown

Animated Card Stacks

Testing some simple animations to separate stacks of cards

A Pen by Chris Hutchinson on CodePen.

License.

index.html

header.hero
  h1 Animated Card Stacks
  p Click each stack to toggle it open and closed

ul.cards
  li.title
    h2 Slide right
  li.card.card-1
    img(src="http://lorempixel.com/400/250/city")
    div.content
      h1 Card 1 Title
      p Card description
  li.card.card-2
    img(src="http://lorempixel.com/400/250/food")
    div.content
      h1 Card 2 Title
      p Card description
  li.card.card-3
    img(src="http://lorempixel.com/400/250/animals")
    div.content
      h1 Card 3 Title
      p Card description
      
hr

ul.card-stacks
  li.title
    h2 Expand to grid
  li.stack.stack-1
    ul.cards-down
      li.card.card-1
        img(src="http://lorempixel.com/401/250/city")
        div.content
          h1 Card 1 Title
          p Stack 1
      li.card.card-2
        img(src="http://lorempixel.com/401/250/food")
        div.content
          h1 Card 2 Title
          p Stack 1
      li.card.card-3
        img(src="http://lorempixel.com/401/250/animals")
        div.content
          h1 Card 3 Title
          p Stack 1
  li.stack.stack-2
    ul.cards-down
      li.card.card-1
        img(src="http://lorempixel.com/402/250/city")
        div.content
          h1 Card 1 Title
          p Stack 2
      li.card.card-2
        img(src="http://lorempixel.com/402/250/food")
        div.content
          h1 Card 2 Title
          p Stack 2
      li.card.card-3
        img(src="http://lorempixel.com/402/250/animals")
        div.content
          h1 Card 3 Title
          p Stack 2
  li.stack.stack-3
    ul.cards-down
      li.card.card-1
        img(src="http://lorempixel.com/403/250/city")
        div.content
          h1 Card 1 Title
          p Stack 3
      li.card.card-2
        img(src="http://lorempixel.com/403/250/food")
        div.content
          h1 Card 2 Title
          p Stack 3
      li.card.card-3
        img(src="http://lorempixel.com/403/250/animals")
        div.content
          h1 Card 3 Title
          p Stack 3

hr

ul.cards-split
  li.title
    h2 Split from middle
  li.card.card-1
    img(src="http://lorempixel.com/400/250/city")
    div.content
      h1 Card 1 Title
      p Card description
  li.card.card-2
    img(src="http://lorempixel.com/400/250/food")
    div.content
      h1 Card 2 Title
      p Card description
  li.card.card-3
    img(src="http://lorempixel.com/400/250/animals")
    div.content
      h1 Card 3 Title
      p Card description
      
hr

ul.cards-split-delay
  li.title
    h2 Delayed split from middle
  li.card.card-1
    img(src="http://lorempixel.com/400/250/city")
    div.content
      h1 Card 1 Title
      p Card description
  li.card.card-2
    img(src="http://lorempixel.com/400/250/food")
    div.content
      h1 Card 2 Title
      p Card description
  li.card.card-3
    img(src="http://lorempixel.com/400/250/animals")
    div.content
      h1 Card 3 Title
      p Card description

script.js

jQuery(document).ready(function($){
  $('ul.cards').on('click', function(){
    $(this).toggleClass('transition');
  });
  
  $('ul.card-stacks').on('click', function(){
    $(this).toggleClass('transition');
  });
  
  $('ul.cards-split').on('click', function(){
    $(this).toggleClass('transition');
  });
  
  $('ul.cards-split-delay').on('click', function(){
    $(this).toggleClass('transition');
  });
});

scripts

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

style.css

*, *:before, *:after{ box-sizing: border-box; }

html{ min-height: 100%; }

body{
  font-size: 14px; font-family: 'Source Sans Pro', sans-serif;
  font-weight: 300; margin: 20px;
  height: 2000px;
  background: linear-gradient(to left top, #F5A1D5 0%, #CDD3E9 100%);
}

h1, h2, h3, h4, h5, h6, p{ font-weight: 300; margin: 0; padding: 0; }

header.hero{
  background: rgba(255, 255, 255, 0.6);
  text-align: center; padding: 20px 0;
  border-bottom: 4px solid rgba(255, 255, 255, 0.6);
  h1{ 
    font-size: 3em;
    color: #555;
    margin: 0 0 5px;
  }
  p{}
  margin: 0 0 20px;
}

hr{ border: 0; border-top: 1px solid rgba(255, 255, 255, 0.6); padding: 0 0 20px; }

ul.cards{
  width: 660px; margin: 0 auto 20px;
  height: 300px;
  list-style-type: none;
  position: relative;
  padding: 20px 0;
  cursor: pointer;
  li.title{ margin: 0 0 20px;
    h2{ font-weight: 700; }
  }
  li.card{
    background: #FFF; overflow: hidden;
    height: 200px; width: 200px;
    border-radius: 10px;
    position: absolute; left: 0px;
    box-shadow: 1px 2px 2px 0 #aaa;
    transition: all 0.4s cubic-bezier(.63,.15,.03,1.12);
    img{
       max-width: 100%; height: auto; 
    }
    div.content{
      padding: 5px 10px;
      h1{
        
      }
      p{
        
      }
    }
    
    &.card-1{ 
      z-index: 10; transform: rotateZ(-2deg);
    }
    &.card-2{ 
      z-index: 9; transform: rotateZ(-7deg);
      transition-delay: 0.05s;
    }
    &.card-3{ 
      z-index: 8; transform: rotateZ(5deg);
      transition-delay: 0.1s;
    }
  }
  
  &.transition{
    li.card{
      transform: rotateZ(0deg);
      &.card-1{
        left: 440px;
      }

      &.card-2{
        left: 220px;
      }

      &.card-3{
      }
    }
  }
}

ul.card-stacks{
  width: 660px; 
  list-style-type: none; margin: 0 auto 20px; padding: 0;
  position: relative;
  cursor: pointer;
  height: 700px;
  li.title{ margin: 0 0 20px;
    h2{ font-weight: 700; }
  }
  li.stack{
    position: absolute;
    left: 0px;
    transition: all 0.4s cubic-bezier(.63,.15,.03,1.02);
    ul.cards-down{
      position: relative;
      margin: 0 0 20px; padding: 20px;
      list-style-type: none; margin: 0; padding: 0;
      li.card{
        transition: all 0.4s cubic-bezier(.63,.15,.03,1.22);
        left: 0px;
        transition-delay: 0.4s;
        background: #FFF; overflow: hidden;
        height: 200px; width: 200px;
        border-radius: 10px;
        position: absolute; top: 0px;
        box-shadow: 1px 2px 2px 0 #aaa;
        img{
           max-width: 100%; height: auto; 
        }
        div.content{
          padding: 5px 10px;
          h1{

          }
          p{

          }
        }

        &.card-1{ 
          z-index: 10; transform: rotateZ(-2deg);
        }
        &.card-2{ 
          z-index: 9; transform: rotateZ(-7deg);
        }
        &.card-3{ 
          z-index: 8; transform: rotateZ(5deg);
        }
      }
    }
  }
  
  &.transition{
    li.stack{
      &.stack-1{ left: 0px; }
      &.stack-2{ left: 220px; }
      &.stack-3{ left: 440px; }
      ul.cards-down{
        li.card{
          transform: rotateZ(0deg);
          &.card-1{
            top: 440px;
          }
          &.card-2{
            top: 220px;
          }
          &.card-3{
          }
        }
      }
    }
  }
}

ul.cards-split{
  width: 660px; 
  height: 280px;
  list-style-type: none;
  position: relative;
  margin: 0 auto 20px;
  padding: 20px;
  cursor: pointer;
  li.title{ margin: 0 0 20px;
    h2{ font-weight: 700; }
  }
  li.card{
    background: #FFF; overflow: hidden;
    height: 200px; width: 200px;
    border-radius: 10px;
    position: absolute; left: 220px;
    box-shadow: 1px 2px 2px 0 #aaa;
    transition: all 0.4s cubic-bezier(.63,.15,.03,1.12);
    img{
       max-width: 100%; height: auto; 
    }
    div.content{
      padding: 5px 10px;
      h1{
        
      }
      p{
        
      }
    }
    
    &.card-1{ 
      z-index: 10; transform: rotateZ(-2deg);
    }
    &.card-2{ 
      z-index: 9; transform: rotateZ(-7deg);
      transition-delay: 0.05s;
    }
    &.card-3{ 
      z-index: 8; transform: rotateZ(5deg);
      transition-delay: 0.1s;
    }
  }
  
  &.transition{
    li.card{
      transform: rotateZ(0deg);
      &.card-1{
        left: 0px;
      }

      &.card-2{
        left: 440px;
      }

      &.card-3{
        left: 220px;
      }
    }
  }
}


ul.cards-split-delay{
  width: 660px; 
  height: 280px;
  list-style-type: none;
  position: relative;
  margin: 0 auto 20px; padding: 20px;
  cursor: pointer;
  li.title{ margin: 0 0 20px;
    h2{ font-weight: 700; }
  }
  li.card{
    background: #FFF; overflow: hidden;
    height: 200px; width: 200px;
    border-radius: 10px;
    position: absolute; left: 220px;
    box-shadow: 1px 2px 2px 0 #aaa;
    transition: all 0.4s cubic-bezier(.63,.15,.03,1.12);
    img{
       max-width: 100%; height: auto; 
    }
    div.content{
      padding: 5px 10px;
      h1{
        
      }
      p{
        
      }
    }
    
    &.card-1{ 
      z-index: 10; transform: rotateZ(-2deg);
    }
    &.card-2{ 
      z-index: 9; transform: rotateZ(-7deg);
      transition-delay: 0.6s;
    }
    &.card-3{ 
      z-index: 8; transform: rotateZ(5deg);
      transition-delay: 0s;
    }
  }
  
  &.transition{
    li.card{
      transform: rotateZ(0deg);
      &.card-1{
        left: 0px;
      }

      &.card-2{
        left: 440px;
      }

      &.card-3{
        left: 220px;
        transition-delay: 0.6s;
      }
    }
  }
}

styles

<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700" rel="stylesheet" />