Select Option Interaction

index.haml

%div.select-ctr
  %div.selected-input.input-preview What is your favourite pet?
  %div.input.input-1{:data => {:val => "Cat"}} Cat
  %div.input.input-2{:data => {:val => "Dog"}} Dog
  %div.input.input-3{:data => {:val => "Birds"}} Birds
  %div.input.input-4{:data => {:val => "Cow"}} Cow
  %div.input.input-5{:data => {:val => "Bear"}} Bear

script.js

$(document).ready(function() {

  var inputPreview = $(".input-preview"),
      input = $(".input");

  TweenMax.set(input, {
    scale: 1.2,
    alpha: 0
  });

  inputPreview.on("click", function(){
    
    var that = $(this);
    
    that.toggleClass("active");
    
    if(that.hasClass("active")){
      
      TweenMax.staggerTo(input, 1.25, {
        scale: 1,
        alpha: 1,
        ease: Elastic.easeOut
      }, .1);   
    }
    else {
      TweenMax.staggerTo(input, 1, {
        scale: 1.2,
        alpha: 0,
        ease: Elastic.easeOut
      }, .1);
    }
  });

  input.on("click", function() {

    var tlInput = new TimelineMax({
      onComplete: done
    });

    var that = $(this),
      siblings = that.siblings(".input"),
      data = that.data("val"),
      top = that.css("top");

    siblings.removeClass("active");

    tlInput.to(siblings, .25, {
        alpha: 0
      })
      .to(that, .25, {
        scale: 1.2
      })
      .to(that, .25, {
        top: 0,
      })
      .set(inputPreview, {
        display: "none"
      })
      .to(that, .25, {
        scale: 1,
      })
      .to(that, .5, {
        backgroundColor: "#1D77EF"
      })
      .set(inputPreview, {
        text: data,
        display: "block"
      })
      .to(that, .25, {
        alpha: 0
      })

    function done() {
      inputPreview.removeClass("active");
      that.css("top", top).addClass("active");

      TweenMax.set(input, {
        scale: 1.2,
        alpha: 0,
        backgroundColor: "#fff"
      });
    }

  });
  
  // copy
  balapaCop("Select Input Interaction", "rgba(255,255,255,.5)");
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/TextPlugin.min.js"></script>
<script src="https://codepen.io/balapa/pen/c58fffe58d661ae3d4b168a43eb3b2b8.js"></script>

select-option-interaction.markdown

Select Option Interaction

Built with TweenMax GSAP.

A Pen by 王树贤 on CodePen.

License.

style.scss

@import "bourbon";
@import url(https://fonts.googleapis.com/css?family=Roboto:400,300);

body {
  height: 100%;
  font-size: 16px;
  background: #1D77EF;
}

.select-ctr {
  @include position(absolute, 50% x x 50%);
  @include transform(translate(-50%, -50%));
  width: 350px;
  height: 370px;
  font-family:"Roboto";
  
  > div {
    padding: 15px 20px;
    position: absolute;
    width: 100%;
    font-size: 1.25rem;
    cursor: pointer;
  }
  
  $num: 5;

  @while $num > 0 {
      .input-#{$num} {
          top: #{$num*60}px;
      }
      $num: $num - 1;
  }
  
  > div.input {
    background: #fff;
    color: #777;
    border-radius: 2px;
    box-shadow: 0 2px 15px 3px rgba(0, 0, 0, 0.1) 
  }
  
  > div.input.active {
    color: #1D77EF;
  }
  
  > div.input-preview {
    color: rgba(255,255,255,.75);;
    position: relative;
    transition: .3s all ease;
    
    &.active {
      color: rgba(255,255,255,1);
    }
    
    &:before {
      content:"";
      @include position(absolute, 18px 20px 20px x);
      width: 20px;
      background: rgba(255,255,255,.75);
-webkit-clip-path: polygon(50% 73%, 0 0, 100% 0);
clip-path: polygon(50% 73%, 0 0, 100% 0);
      padding: 10px;
      box-sizing: border-box;
      transition: .3s all ease;
    }
    
    &.active:before {
      background: rgba(255,255,255,1);
      -webkit-clip-path: polygon(50% 0, 0 73%, 100% 73%);
clip-path: polygon(50% 0, 0 73%, 100% 73%);
    }
  } 
}