.wrapper
form.form-example
input.input(id='email' type='text', placeholder='email')
input.input(id='password' type='password', placeholder='password')
svg.svg(viewBox='0 0 100 100')
path(id='path' stroke='#fff' fill='none' d='m10 19 L 90 19 C 97 19, 97 36, 90 36 L 10 36' stroke-linecap='round' stroke-dasharray='80 185' stroke-dashoffset='81')
View Compiled
@import url('https://fonts.googleapis.com/css?family=Acme');
body {
background: #260F26;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.wrapper {
position: fixed;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
background: #361F36;
box-shadow: 0 0 1rem rgba(0, 0, 0, .5);
}
.form-example {
position: relative;
padding: 2rem 3rem;
width: 30rem;
> .input {
width: 100%;
padding: 1rem 0;
margin: 1rem 0;
background: #361F36;
color: #fff;
border: none;
outline: none;
font-family: 'Acme', sans-serif;
&:focus {
&::placeholder {
opacity: .3;
}
}
&::placeholder {
color: #fff;
opacity: .8;
font-family: 'Acme', sans-serif;
transition: opacity .2s ease;
}
}
> .svg {
position: absolute;
top: 0;
left: 0;
width: 30rem;
height: 30rem;
pointer-events: none;
}
}
View Compiled
let email = document.getElementById('email'),
password = document.getElementById('password');
let currentAnimation = null;
email.addEventListener('focus', () => {
if (currentAnimation) {
currentAnimation.pause();
}
currentAnimation = anime({
targets: '#path',
strokeDashoffset: 0,
easing: 'easeInOutQuart'
})
});
email.addEventListener('blur', () => {
if (currentAnimation) {
currentAnimation.pause();
}
currentAnimation = anime({
targets: '#path',
strokeDashoffset: 81,
easing: 'easeInOutQuart'
})
});
password.addEventListener('focus', () => {
if (currentAnimation) {
currentAnimation.pause();
}
currentAnimation = anime({
targets: '#path',
strokeDashoffset: -102,
easing: 'easeInOutQuart'
})
});
password.addEventListener('blur', () => {
if (currentAnimation) {
currentAnimation.pause();
}
currentAnimation = anime({
targets: '#path',
strokeDashoffset: 81,
easing: 'easeInOutQuart'
})
});
View Compiled
This Pen doesn't use any external CSS resources.