A Pen by Captain Anonymous.

Animated-filter.markdown

Animated filter

design by https://dribbble.com/shots/1372856-Flat-UI-Homepage-design-for-Juiiicy?list=users&offset=5

Forked from Igor Dobrovolsky's Pen Animated filter.

A Pen by A Non Ymous on CodePen.

License.

index.haml

.filter
  %p.title Filters
  %p.title_items Type
  %ul
    %li
      %input{type: "radio", id: "all", name: "type"} 
      %label{for: "all"} All
    %li
      %input{type: "radio", id: "website", name: "type"}
      %label{for: "website"} Website
    %li
      %input{type: "radio", id: "icon", name: "type"}
      %label{for: "icon"} Icon
    %li
      %input{type: "radio", id: "mobile", name: "type"}
      %label{for: "mobile"} Mobile
    %li
      %input{type: "radio", id: "logo", name: "type"}
      %label{for: "logo"} Logo
    %li
      %input{type: "radio", id: "print", name: "type"}
      %label{for: "print"} Print
    %li
      %input{type: "radio", id: "ui", name: "type"}
      %label{for: "ui"} UI
    %li
      %input{type: "radio", id: "illustration", name: "type"}
      %label{for: "illustration"} Illustration
  %p.title_items City
  %ul
    %li
      %input{type: "radio", id: "ny", name: "city"}
      %label{for: "ny"} New York
    %li
      %input{type: "radio", id: "va", name: "city"}
      %label{for: "va"} Vancouver
    %li
      %input{type: "radio", id: "la", name: "city"}
      %label{for: "la"} Los Angeles
    %li
      %input{type: "radio", id: "ch", name: "city"}
      %label{for: "ch"} Chicago
    %li
      %input{type: "radio", id: "se", name: "city"}
      %label{for: "se"} Seattle
    %li
      %input{type: "radio", id: "san", name: "city"}
      %label{for: "san"} San Francisco
    %li
      %input{type: "radio", id: "to", name: "city"}
      %label{for: "to"} Toronto
  %p.title_items Budget
  %ul
    %li
      %input{type: "radio", id: "small", name: "bonus"}
      %label{for: "small"} 100 - 300
    %li
      %input{type: "radio", id: "medium", name: "bonus"}
      %label{for: "medium"} 300 - 1000
    %li
      %input{type: "radio", id: "big", name: "bonus"}
      %label{for: "big"} 1000 - 3000
    %li
      %input{type: "radio", id: "bigest", name: "bonus"}
      %label{for: "bigest"} more 3000

script.js

$(function() {
  
  transition_timeout = 40;
  
  $('.title_items').click(function() {
    
    current = $(this).next().find('li');
    
    $(this).toggleClass('active');
    current.toggleClass('visible');
    
    if ($(this).hasClass('active')) {
      for( i = 0; i <= current.length; i++ ) {
        $(current[i]).css('transition-delay', transition_timeout * i + 'ms');
      }
    }
    else {
      for( i = current.length, j = -1; i >= 0; i--, j++) {
        $(current[i]).css('transition-delay', transition_timeout * j + 'ms');
      }
    }
  
  });
});

style.scss

@import "compass/css3";
body {
  background-color: #e0eafd;
}
.filter {
  width: 220px;
  margin: 20px auto;
  font-family: 'Whitney', sans-serif;
  
  p {
    padding: 0 10px;
  }
  p, li {
    font-weight: bold;
    line-height: 35px;
    font-size: 12px;
  }
  .title {
    color: #fff;
    background-color: #1ba0eb;
    @include border-radius(3px 3px 0 0);
  }
  .title_items {
    color: #94a4c3;
    cursor: pointer;
    position: relative;
    background-color: #fff;
    border-bottom: 1px solid #e4effd;
    @include transition(.2s linear background-color);
    
    &:hover {
      background-color: #f4f4f4;
    }
    &.active + ul + .title_items {
      border-top: 1px solid #e4effd;
    }
    &.active:after {
      height: 5px;
      width: 5px;
      right: 14px;
      margin-top: -2.5px;
    }
    &:before, &:after {
      content: "";
      position: absolute;
      @include border-radius(3px);
      background-color: #c3d0e8;
      @include transition(.3s linear all);
    }
    &:before {
      height: 5px;
      width: 13px;
      top: 50%;
      right: 10px;
      margin-top: -2.5px;
    }
    &:after {
      height: 13px;
      width: 5px;
      top: 50%;
      right: 14px;
      margin-top: -6.5px;
    }
  }
  ul {
    @include transition-property(all);
    @include transition-timing-function(linear);
    
    li {
      height: 0;
      @include opacity(0);
      color: #92a5bf;
      background-color: #f5f8fe;
      @include transition(.2s linear all);
      
      &:nth-child(odd) {
        @include transform(scale(.5) translateX(-150px));
      }
      &:nth-child(even) {
        @include transform(scale(.5) translateX(150px));
      }
      &.visible {
        height: 36px;
        @include opacity(1);
        @include transform(scale(1) translateX(0));
      }
      &:last-child label {
        border-bottom: none;
      }
      &:nth-child(1) label:before,
      &:nth-child(1) label:after {
        border-color: #5db6e2;
      }
      &:nth-child(2) label:before,
      &:nth-child(2) label:after {
        border-color: #c0a2f1;
      }
      &:nth-child(3) label:before,
      &:nth-child(3) label:after {
        border-color: #f7a238;
      }
      &:nth-child(4) label:before,
      &:nth-child(4) label:after {
        border-color: #f6d04d;
      }
      &:nth-child(5) label:before,
      &:nth-child(5) label:after {
        border-color: #40c9a1;
      }
      &:nth-child(6) label:before,
      &:nth-child(6) label:after {
        border-color: #ea8b8b;
      }
      &:nth-child(7) label:before,
      &:nth-child(7) label:after {
        border-color: #fe8ae0;
      }
      &:nth-child(8) label:before,
      &:nth-child(8) label:after {
        border-color: #abb6d2;
      }
    }
  }
  input[type="radio"] {
    display: none;
    
    &:checked + label:after {
      @include opacity(1);
    } 
  }
  label {
    margin: 0 15px;
    display: block;
    cursor: pointer;
    position: relative;
    padding: 0 10px 0 25px;
    border-bottom: 1px solid #ddebfd;
    
    &:before {
      content: "";
      height: 10px;
      width: 10px;
      top: 50%;
      left: 0;
      margin-top: -9px;
      position: absolute;
      border-width: 3px;
      border-style: solid;
      @include border-radius(50%);
    }
    &:after {
      content: "";
      top: 50%;
      left: 5px;
      margin-top: -4px;
      position: absolute;
      border-width: 3px;
      border-style: solid;
      @include opacity(0);
      @include border-radius(50%);
      @include transition(.2s linear all);
    }
  }
}