Answered Jan 25, 2022 · 0 votes
I played a little with your animation...
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: 100, backgroundColor: "#D3D3D3", // Change the color here. }) .add({ targets: ".button", duration: 1200, height: 20, width: 200, //backgroundColor: "#D3D3D3", // Not here! 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", left: 26 // Added to position at the left, aligned with the rest }) .add({ targets: pathEl, strokeDashoffset: [offset, 0], duration: 200, easing: "easeInOutSine", //complete: () => //setTimeout(() => $('#my-form').submit(), 100) // Commented just to see the result longer... });$(".button").click(playButtonAnim);$(".text").click(playButtonAnim);function playButtonAnim() { basicTimeline.play();}
/* Contact Form */-input[type=text],[type=email],select,textarea { width: 100%; padding: 12px; border: 1px solid #555; margin-top: 6px; margin-bottom: 16px; resize: vertical;}input[type=submit] { background-color: #0563bb; color: white; padding: 12px 20px; border: none; cursor: pointer;}input[type="text"]:focus,input[type="email"]:focus,#subject:focus { background: var(--bgFormElsFocus); transform: scale(1.02); transition: transform 0.2s ease-in-out;}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: 20px; /* For the button vertical alignement */ width: 100%; position: relative; margin-top: 0.9em; /* For the button vertical alignement */}.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: 26px; /* CHANGED - was 100px */ transform: translateY(-50%) translateX(-50%);}.check { fill: none; stroke: #FFFFFF; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;}
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>replit</title> <link href="style.css" rel="stylesheet" type="text/css" /> <link href="https://fonts.googleapis.com/css?family=Poppins:600" rel="stylesheet"> <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.js"> </script> <!--/script--> <!--script src="http://code.jquery.com/jquery-1.11.3.min.js"> </script--> <!--link href="https://fonts.googleapis.com/css?family=Poppins:600" rel="stylesheet"--> <!--script src="lib/jquery-1.11.3.min.js" type="application/javascript"></script--> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script></head><body> <!-- start contact section --> <section id="contact"> <div class="container" data-aos="fade-up"> <div class="contactform"> <div style="text-align:center"> <div class="section-title"> <h2> <br/>Get In Touch </h2> </div> <p>Feel Free To Reach Out To Me Through This Form! </p> </div> <div class="row"> <div class="column"> <form name="myform" action="#" id="my-form" method="POST" novalidate> <label for="firstname">First Name</label> <input type="text" id="first name" name="firstname" placeholder="Your First Name.." required> <label for="lastname">Last Name</label> <input type="text" id="lastname" name="lastname" placeholder="Your Last Name.." required> <label for="email">Email:</label> <input type="email" id="email" name="email" placeholder="Your Email.." required> <label for="subject">Subject</label> <textarea id="subject" name="subject" placeholder="Lets Collaborate.." style="height:170px" required></textarea> <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> <!-- End Contact Section --> <script src="script.js"></script></body></html>
