My code has a few issues that I am looking to fix:
One problem is the sudden color change that occurs when the submit button is clicked. It seems like a glitchy animation, and I want to remove it. Right after clicking the submit button, there is an abrupt color change to something yellowish or whitish.
Another issue is with the positioning of the checkmark and circle background that appear when the animation plays after clicking the submit button. Currently, they are displayed more towards the right, but I want them to be shown at the same place where the button is located. How can I adjust their position?
Any suggestions on how to address these issues would be greatly appreciated. Thanks!
var basicTimeline = anime.timeline({
autoplay: false,
});
var pathEls = $(".check");
for (var i = 0; i < pathEls.length; i++) {
var pathEl = pathEls[i];
var offset = anime.setDashoffset(pathEl);
pathEl.setAttribute("stroke-dashoffset", offset);
}
basicTimeline
.add({
targets: ".text",
duration: 1,
opacity: "0"
})
.add({
targets: ".button",
duration: 1200,
height: 20,
width: 200,
backgroundColor: "#D3D3D3",
border: "0",
borderRadius: 100
})
.add({
targets: ".progress-bar",
duration: 2000,
width: 200,
easing: "linear"
})
.add({
targets: ".button",
width: 0,
duration: 1
})
.add({
targets: ".progress-bar",
width: 50,
height: 50,
delay: 500,
duration: 750,
borderRadius: 80,
backgroundColor: "#0563bb"
})
.add({
targets: pathEl,
strokeDashoffset: [offset, 0],
duration: 200,
easing: "easeInOutSine",
complete: () =>
setTimeout(() => $('#my-form').submit(), 100)
});
$(".button").click(playButtonAnim);
$(".text").click(playButtonAnim);
function playButtonAnim() {
basicTimeline.play();
}input[type=submit] {
background-color: #0563bb;
color: white;
padding: 12px 20px;
border: none;
cursor: pointer;
}
input[type=submit]:hover {
opacity: 0.9;
}
.contactform {
position: relative;
border-radius: 50px;
background-color: #f2f2f2;
padding: 5px;
z-index: 2;
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: auto;
margin-top: 1%;
width: 100%;
animation-name: gradient;
animation-duration: 3s;
animation-iteration-count: infinite;
}
.contactform:hover {
animation-name: gradient;
animation-duration: 15s;
animation-iteration-count: infinite;
}
.column {
float: center;
width: 50%;
margin-top: 6px;
padding: 20px;
display: block;
margin-left: auto;
margin-right: auto;
}
.row:after {
content: "";
display: table;
clear: both;
}
@media screen and (max-width: 600px) {
.column,
input[type=submit] {
width: auto;
margin-top: 0;
}
}
.shakingErr {
border-color: red;
animation: shake 0.82s forwards;
}
@keyframes shake {
10%,
90% {
transform: translate3d(-1px, 0, 0);
}
20%,
80% {
transform: translate3d(2px, 0, 0);
}
30%,
50%,
70% {
transform: translate3d(-4px, 0, 0);
}
40%,
60% {
transform: translate3d(4px, 0, 0);
}
}
/* fancy button styles */
.buttonWrapper {
height: 80px;
width: 100%;
position: relative;
}
.button {
background: #0563bb;
height: 40px;
width: 90px;
text-align: center;
position: absolute;
top: 25%;
transform: translateY(-50%);
left: 0;
cursor: pointer;
border-radius: 1px;
}
.text {
font: .7rem;
color: white;
position: absolute;
top: 50%;
transform: translateY(-52%);
left: 0;
right: 0;
cursor: pointer;
}
.progress-bar {
position: absolute;
height: 20px;
width: 0;
left: 100px;
top: 25%;
border-radius: 200px;
transform: translateY(-50%) translateX(-50%);
background: #0563bb;
}
svg {
width: 20px;
position: absolute;
top: 25%;
left: 100px;
transform: translateY(-50%) translateX(-50%);
}
.check {
fill: none;
stroke: #FFFFFF;
stroke-width: 3;
stroke-linecap: round;
stroke-linejoin: round;
}<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.0.2/anime.js">
</script>
<section id="contact">
<div class="container" data-aos="fade-up">
<div class="contactform">
<div class="row">
<div class="column">
<form name="myform" action="#" id="my-form" method="POST" novalidate>
<div class='buttonWrapper'>
<div class="button">
<div class="text">Submit</div>
</div>
<div class="progress-bar"></div>
<svg x="0px" y="0px" viewBox="0 0 25 30" style="enable-background:new 0 0 25 30;">
<path class="check" class="st0" d="M2,19.2C5.9,23.6,9.4,28,9.4,28L23,2" />
</svg>
</div>
</form>
</div>
</div>
</div>
</div>
</section>update
I am facing alignment issues near the bottom of the contact form, specifically after clicking the submit button. How can I resolve this issue?
This is my current output:
https://i.sstatic.net/lGyla.png
The expected output should look like this: