Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI

CodeMyUI/index.html

Created January 15, 2020 23:34
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save CodeMyUI/495dc37a35d73e650bcaa2545a6b0df0 to your computer and use it in GitHub Desktop.
Save CodeMyUI/495dc37a35d73e650bcaa2545a6b0df0 to your computer and use it in GitHub Desktop.
Download ZIP
Search field animation
Raw
index.html
<div>
<div class="search">
<div class="bar">
<div class="icon">
<i></i>
</div>
</div>
<form>
<input type="text">
</form>
<div class="close"></div>
<ul>
<li>
<a href="https://dribbble.com/Gavingao" target="_blank">
<img src="https://cdn.dribbble.com/assets/dribbble-ball-icon-e94956d5f010d19607348176b0ae90def55d61871a43cb4bcb6d771d8d235471.svg">
<h5>Gale G. on Dribbble</h5>
<p>Check out his awesome works</p>
<span>https://dribbble.com/Gavingao</span>
</a>
</li>
<li>
<a href="http://www.queblesolutions.com/" target="_blank">
<img class="queble" src="https://cdn.dribbble.com/users/1763851/avatars/normal/0e0aa5c6da81f17d43efa9c92c76a70d.png">
<h5>Queblesolutions</h5>
<p>Digital Product Design Studio</p>
<span>http://www.queblesolutions.com</span>
</a>
</li>
</ul>
</div>
<em>Type a kind word and hit <strong>Enter</strong></em>
</div>
<!-- dribbble -->
<a class="dribbble" href="https://dribbble.com/shots/5282901-Search-field-animation-v2" target="_blank"><img src="https://cdn.dribbble.com/assets/dribbble-ball-mark-2bd45f09c2fb58dbbfb44766d5d1d07c5a12972d602ef8b32204d28fa3dda554.svg" alt=""></a>
Raw
script.js
$(document).ready(function() {
$('.search').each(function() {
var self = $(this);
var form = self.children('form');
var input = form.children('input');
var span = $('<span />').appendTo(form);
var bar = self.children('.bar');
var close = self.children('.close');
var list = self.children('ul');
input.keypress(function (e) {
if(e.which && e.charCode) {
resizeForText(input, span, $(this).val() + String.fromCharCode(e.keyCode | e.charCode));
}
});
input.keyup(function(e) {
if(e.keyCode === 8 || e.keyCode === 46) {
resizeForText(input, span, $(this).val());
}
});
resizeForText(input, span, self.val());
form.submit(function(e) {
e.preventDefault();
if(!self.hasClass('prepare')) {
input.blur();
$('<span />').text(input.val()).appendTo(bar);
self.addClass('prepare submit');
setTimeout(function() {
self.removeClass('submit');
}, 200);
setTimeout(function() {
self.addClass('animate');
bar.animate({
width: (self.outerWidth() - 32)
}, 800, function() {
var searchW = ((list.outerWidth() + 32) > (72 + bar.outerWidth())) ? (list.outerWidth() + 32) : 72 + bar.outerWidth();
self.animate({
width: searchW
}, 400);
setTimeout(function() {
self.animate({
height: self.outerHeight() + list.outerHeight()
}, 500, function() {
list.addClass('show');
});
}, 200);
});
setTimeout(function() {
self.addClass('done');
}, 800);
}, 1250);
}
});
close.on('click', function(e) {
self.removeClass('done');
setTimeout(function() {
input.val('');
bar.animate({
width: 32
}, 1000, function() {
self.addClass('reset');
bar.children('span').remove();
setTimeout(function() {
self.removeClass('animate reset prepare');
setTimeout(function() {
input.animate({
width: 32
}, 400, function() {
bar.removeAttr('style');
});
}, 200);
}, 400);
});
list.removeClass('show');
setTimeout(function() {
self.animate({
height: 62
}, 400, function() {
self.animate({
width: 92
}, 400, function() {
self.removeAttr('style');
});
});
}, 200);
}, 500);
});
});
});
function resizeForText(input, span, text) {
text = (!text) ? ' ' : text;
span.text(text);
input.width(span.width());
}
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Raw
style.scss
$primary: #5628EE;
$primaryLight: #8C6FF0;
.search {
background: #fff;
padding: 12px 16px 12px 48px;
position: relative;
display: table;
margin: auto;
border-radius: 8px;
box-shadow: 0 4px 16px -1px rgba(#121621, .3);
transition: background .1s ease, transform .1s ease, padding .5s ease .1s;
.bar {
position: absolute;
left: 16px;
top: 15px;
width: 32px;
height: 32px;
overflow: hidden;
span {
display: block;
color: #fff;
position: absolute;
left: 12px;
top: 0;
line-height: 32px;
font-weight: 500;
font-size: 16px;
opacity: 0;
right: 16px;
overflow: hidden;
white-space: nowrap;
}
&:before {
content: '';
position: absolute;
display: block;
left: 0;
top: 0;
bottom: 0;
right: 16px;
border-radius: 16px 0 0 16px;
background: $primary;
opacity: 0;
}
.icon {
flex: 0 0 32px;
width: 32px;
height: 32px;
background: $primary;
border-radius: 50%;
position: absolute;
z-index: 1;
top: 0;
right: 0;
transform-style: preserve-3d;
transform-origin: 0 0;
transform: scale(.8);
transition: transform .4s ease 0s, background .1s ease;
&:before,
&:after {
content: '';
display: block;
position: absolute;
backface-visibility: hidden;
border-radius: 50%;
}
&:before {
background: #fff;
left: 4px;
top: 4px;
right: 4px;
bottom: 4px;
z-index: 2;
transform: rotateY(0deg);
transition: background .1s ease;
}
&:after {
background: $primary;
left: 0;
top: 0;
right: 0;
bottom: 0;
transform: rotateY(180deg);
transition: background .1s ease;
}
i {
left: 75%;
top: 84%;
position: absolute;
display: block;
transform: rotate(-45deg);
transform-origin: 0 0;
&:before {
content: '';
width: 4px;
height: 16px;
border-radius: 2px;
background: $primary;
display: block;
transform-origin: 50% 0;
transition: transform .4s ease 0s, background .1s ease;
}
}
}
}
form {
display: block;
padding: 0;
margin: 0;
input,
span {
white-space: pre;
font-size: 16px;
font-family: inherit;
padding: 8px 16px 8px 12px;
display: block;
line-height: 22px;
font-weight: 500;
}
input {
color: $primaryLight;
caret-color: $primaryLight;
border: 0;
background: 0;
outline: none;
transition: color .1s ease;
}
span {
display: none;
}
}
.close {
border-radius: 50%;
position: absolute;
right: 16px;
width: 24px;
height: 24px;
background: #E4ECFA;
top: 19px;
cursor: pointer;
opacity: 0;
visibility: hidden;
transform: translate(-8px, 0);
transition: transform .3s ease 0s, opacity .3s ease 0s, visibility .3s ease 0s;
&:before,
&:after {
content: '';
position: absolute;
width: 2px;
border-radius: 1px;
height: 10px;
background: #6C7486;
display: block;
left: 50%;
top: 50%;
transition: background .3s ease;
}
&:before {
transform: translate(-50%, -50%) rotate(45deg);
}
&:after {
transform: translate(-50%, -50%) rotate(-45deg);
}
}
ul {
overflow: hidden;
margin: 0;
padding: 8px 0 24px 0;
list-style: none;
position: absolute;
left: 16px;
top: 62px;
white-space: nowrap;
&.show {
li {
opacity: 1;
visibility: visible;
transform: translate(0, 0);
&:nth-child(1) {
transition-delay: 0s;
}
&:nth-child(2) {
transition-delay: .3s;
}
}
}
li {
margin: 0 0 20px 0;
opacity: 0;
visibility: hidden;
transition: all .3s ease;
transform: translate(0, -6px);
&:last-child {
margin-bottom: 0;
}
a {
display: block;
font-size: 12px;
text-decoration: none;
padding-left: 36px;
padding-right: 24px;
position: relative;
img {
display: block;
left: 0;
width: 20px;
top: 50%;
position: absolute;
transform: translate(0, -50%);
&.queble {
width: 24px;
}
}
h5 {
margin: 0;
color: #151924;
font-size: 12px;
}
p {
margin: 4px 0;
color: #6C7486;
}
span {
display: block;
font-size: 10px;
color: #6C7486;
opacity: .6;
font-style: italic;
}
}
&:nth-child(1) {
transition-delay: .3s;
}
&:nth-child(2) {
transition-delay: 0s;
}
&:hover {
transition: transform .3s ease 0s;
transform: translate(0, -2px);
}
}
}
&.submit {
background: $primary;
transform: scale(.92);
.bar {
.icon {
background: #fff;
&:before {
background: $primary;
}
&:after {
background: #fff;
}
i {
&:before {
background: #fff;
}
}
}
}
form {
input {
color: #fff;
}
}
}
&.prepare {
.bar {
&:before {
opacity: 1;
transition: opacity 0s ease 1.25s;
}
.icon {
transform: scale(1);
transform-origin: 50% 50% 0;
transition: transform .4s ease .85s, transform-origin 0s ease 1.25s, background .1s ease;
i {
&:before {
transform: scaleY(0);
transition: transform .4s ease .4s, background .1s ease;
}
}
}
}
}
&.animate {
.bar {
.icon {
transform: rotateY(75deg);
transition: transform .6s ease 0s;
}
span {
opacity: 1;
}
}
}
&.done {
padding-right: 56px;
transition: padding .4s ease;
.bar {
.icon {
transform: rotateY(180deg);
transition: transform .7s ease 0s;
}
}
.close {
opacity: 1;
visibility: visible;
transform: translate(0, 0);
transition: transform .4s ease .5s, opacity .4s ease .5s, visibility .4s ease .5s;
&:hover {
background: $primaryLight;
transition: background .3s ease;
&:before,
&:after {
background: #fff;
}
}
}
}
&.reset {
.bar {
&:before {
opacity: 0;
transition: opacity 0s ease .4s;
}
.icon {
transform: rotateY(0deg);
transition: transform .4s ease 0s;
}
}
}
}
em {
color: #6C7486;
font-size: 12px;
margin: 24px 0 0 0;
display: block;
text-align: center;
font-style: italic;
strong {
font-weight: bold;
}
}
html {
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
}
* {
box-sizing: inherit;
&:before,
&:after {
box-sizing: inherit;
}
}
// Center & dribbble
body {
min-height: 100vh;
font-family: Roboto, Arial;
color: #ADAFB6;
background: #2F3545;
display: flex;
justify-content: center;
align-items: center;
.dribbble {
position: fixed;
display: block;
right: 20px;
bottom: 20px;
img {
display: block;
height: 28px;
}
}
}
Raw
styles
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment