Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Search Icon Animation
<div class="text">click anywhere</div>
<div class="wrapper search">
<div class="element" id="one"></div>
<div class="element" id="two"></div>
</div>
$('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');
}
});
<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>
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);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment