Search Icon Animation

index.html

<div class="text">click anywhere</div>
<div class="wrapper search">
  <div class="element" id="one"></div>
  <div class="element" id="two"></div>  
</div>

script.js

$('body').click(function() {
		if ($('.wrapper').hasClass('active')) {
				return false;
		} else if ($('.wrapper').hasClass('search')) {
				$('.wrapper').addClass('active');
				$('#one').velocity({
						width: '0',
						borderRadius: '0',
						rotateZ: '-45deg'
				}, {
						duration: 250,
						easing: 'easeOutSine',
						complete: function() {
								$('#one').velocity({
										left: '62px',
										borderWidth: '1px',
										top: '38px'
								}, {
										duration: 250,
										easing: 'easeOutSine'
								});
						}
				});
				$('#two').velocity({
						rotateZ: '225deg'
				}, {
						duration: 500,
						easing: 'easeOutSine',
						complete: function() {
								$('.wrapper').removeClass('active');
						}
				});
				$('.wrapper').addClass('close').removeClass('search');
		} else if ($('.wrapper').hasClass('close')) {
				$('.wrapper').addClass('active');
				$('#one').velocity('reverse', {
						duration: 250,
						easing: 'easeOutSine',
						complete: function() {
								$('#one').velocity({
										width: '50px',
										borderRadius: '50%'
								}, {
										duration: 250,
										easing: 'easeOutSine'
								});
						}
				});
				$('#two').velocity({
						rotateZ: '-45deg'
				}, {
						duration: 500,
						easing: 'easeOutSine',
						complete: function() {
								$('.wrapper').removeClass('active');
						}
				});
				$('.wrapper').addClass('search').removeClass('close');
		}
});

scripts

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

Search Icon Animation.markdown

Search Icon Animation

Simple subtle velocity based animation.

A Pen by Siddharth Parmar on CodePen.

License.

style.css

body {
  background-color: #1D1F20;
  cursor: pointer;
  width: 100vw;
  height: 100vh;
}
.text{
  display: inline-block;
  color: #f6f6f6;
  text-transform: capitalize;
  text-align: center;
  margin: 0 auto;
  position: absolute;
  left: 50%;
  top: 50px;
  font-size: 2em;
  letter-spacing: 1px;
  transform: translateX(-50%);
  border-bottom: 1px solid #f6f6f6;
}
.wrapper {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-30%);
  text-align: center;
  width: 100px;
  height: 100px;
  cursor: pointer;
}

.element {
  width: 0;
  height: 50px;
  position: relative;
  margin-bottom: 5px;
  border: 1px solid #f2f2f2;
  box-shadow: 0 0 2px #f2f2f2;
/*   border-radius: 50%; */
}

#one {
  width: 50px;
  border-radius: 50%;
  border: 2px solid #fff;
}

#two {
  position: relative;
  left: 62px;
  top: -20px;
  transform: rotate(-45deg);
}