.jpg)
This Subscription Animation is developed using HTML, CSS, JS, Normalize, JQuery, and AnimeJS. A Normalize is a modern, HTML5-ready alternative to CSS resets. jQuery is a JavaScript library designed to simplify HTML DOM tree traversal and manipulation, as well as event handling, CSS animations, and Ajax. Anime.js is a lightweight JavaScript animation library with a simple, yet powerful API.
You can see the full code of this animation. And there is a video tutorial also.
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Subscription Animation - DevXmart</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"
/>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<section>
<form>
<input type="text" placeholder="Email" />
<button type="submit" class="btn first">
<img
src="https://alikinvv.github.io/subscription-animation/build/mail.svg"
alt=""
/>
<span class="start">GET A PROMO CODE</span>
<span class="done">THANK YOU!</span>
</button>
</form>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js"></script>
<script src="./script.js"></script>
</body>
</html>
CSS Code
html,
body {
height: 100%;
}
body {
background: #333;
font-family: "Roboto", sans-serif;
display: flex;
justify-content: center;
align-items: center;
}
.btn {
display: inline-block;
background: #EF498A;
color: #fff;
text-transform: uppercase;
padding: 20px 35px;
border-radius: 50px;
border: none;
text-decoration: none;
font-weight: bold;
height: 18px;
}
.btn.get-code {
top: 10px;
z-index: 1;
left: -103px;
position: relative;
}
section {
position: relative;
width: 440px;
display: flex;
justify-content: flex-end;
left: -50px;
}
form {
position: absolute;
top: 0;
right: 0;
}
form input {
background: #494949;
border-radius: 50px;
border: none;
padding: 23px 35px;
width: 0;
margin-right: -78px;
opacity: 0;
float: right;
color: #fff;
font-size: 28px;
}
form input::-moz-placeholder {
color: #848484;
font-size: 28px;
z-index: 3;
}
form input:-ms-input-placeholder {
color: #848484;
font-size: 28px;
z-index: 3;
}
form input::placeholder {
color: #848484;
font-size: 28px;
z-index: 3;
}
form input:hover,
form input:focus {
outline: none;
}
form .btn {
padding: 0;
width: 250px;
height: 65px;
position: absolute;
top: 7px;
right: 25px;
opacity: 1;
transform-origin: 50% 50%;
cursor: pointer;
}
form .btn.active .start {
display: none;
}
form .btn.done .start {
display: none;
}
form .btn.done .done {
display: block;
opacity: 0;
}
form .btn img {
width: 29px;
top: 23px;
left: 3px;
opacity: 0;
position: absolute;
pointer-events: none;
}
form .btn .done {
display: none;
}
form .btn:hover,
form .btn:focus {
outline: none;
}
.line {
position: absolute;
bottom: 50px;
left: 50%;
transform: translateX(-50%);
} JavaScript Code
$(document).ready(function () {
var basicTimeline = anime.timeline(),
doneTimeline = anime.timeline();
var trigger = true;
$('form .btn').click(function (e) {
e.preventDefault();
if ($(this).hasClass('first')) {
trigger = false;
$(this).removeClass('first').addClass('active');
basicTimeline
.add({
targets: 'button',
width: 65,
paddingLeft: 17,
paddingRight: 17,
translateX: 97,
scale: 1.2,
duration: 1500
})
.add({
targets: 'form input',
width: 370,
opacity: 1,
duration: 2000,
offset: '-=1500'
})
.add({
targets: 'form button img',
opacity: 1,
translateX: 15,
duration: 2000,
offset: '-=1700',
complete: function (anim) {
trigger = true;
}
})
} else if ($(this).hasClass('active') && trigger) {
$(this).removeClass('active').addClass('done');
doneTimeline
.add({
targets: 'button',
translateX: 180,
duration: 1500,
scale: 1.2
})
.add({
targets: 'button img',
opacity: 0,
duration: 1000,
offset: '-=1200'
})
.add({
targets: 'button',
width: 187,
scale: 1.2,
translateX: -23,
duration: 1500,
offset: '-=1000'
})
.add({
targets: 'form input',
width: 0,
translateX: -193,
duration: 1500,
offset: '-=1500'
})
.add({
targets: 'form button .done',
opacity: 1,
duration: 1000,
offset: '-=1500'
})
}
});
});
.jpg&description=Subscription Animation using HTML, CSS, JS, Normalize, JQuery and AnimeJS){kind=link}