Whatsapp PTT Animation
How do I make an whatsapp ptt animation?
Just another animation i love.Click on the right record icon to get started. Then "swipe to cancel" and the animation starts :). What is a whatsapp ptt animation? How do you make a whatsapp ptt animation? This script and codes were developed by Eduard Mayer on 13 July 2022, Wednesday.
Whatsapp PTT Animation Previews
Whatsapp PTT Animation - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Whatsapp PTT Animation</title> <link rel='stylesheet prefetch' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <html lang="en">
<head> <meta charset="UTF-8"> <meta name="author" content="Eduard Mayer"> <title>Whatsapp Push-To-Talk Animation</title>
</head>
<body> <section class="pen"> <div class="wa-input-container"> <div class="input-bg"></div> <div class="speech-container"> <span class="time">0:00</span> </div> <div class="wa-input"> <input type="text"> </div> <div class="ptt-icon emoticon"> <svg xmlns:x="http://ns.adobe.com/Extensibility/1.0/" xmlns:i="http://ns.adobe.com/AdobeIllustrator/10.0/" xmlns:graph="http://ns.adobe.com/Graphs/1.0/" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Ebene_1" x="0px" y="0px" width="115.465px" height="115.537px" viewBox="0 0 115.465 115.537" enable-background="new 0 0 115.465 115.537" xml:space="preserve"> <metadata> <sfw xmlns="http://ns.adobe.com/SaveForWeb/1.0/"> <slices/> <sliceSourceBounds height="16383" width="16383" y="-8367" x="-8016" bottomLeftOrigin="true"/> </sfw> </metadata> <g> <path fill-rule="evenodd" clip-rule="evenodd" fill="#999999" d="M42.082 56.833c4.054 0 7.338-4.93 7.338-11.008 s-3.284-11.008-7.338-11.008s-7.338 4.929-7.338 11.008S38.028 56.8 42.1 56.833z M73.532 56.8 c4.054 0 7.338-4.93 7.338-11.008s-3.284-11.008-7.338-11.008s-7.338 4.929-7.338 11.008S69.478 56.8 73.5 56.833z M26.685 64.498c0 0 1.3 28.2 31.4 28.174c30.14 0 30.467-27.846 30.467-27.846s-20.106 2.293-30.262 2.3 S26.685 64.5 26.7 64.498z M58.063 80.223c-18.249 0-26.792-9.5-26.792-9.5s18.315 1.5 27 1.5 s25.778-1.282 25.778-1.282S73.69 80.2 58.1 80.223z M58.332 1.271c-31.555 0-57.133 25.579-57.133 57.1 s25.579 57.1 57.1 57.133s57.133-25.579 57.133-57.133S89.886 1.3 58.3 1.271z M58.332 107.9 C30.977 107.9 8.8 85.8 8.8 58.404c0-27.357 22.177-49.532 49.532-49.532c27.357 0 49.5 22.2 49.5 49.5 C107.863 85.8 85.7 107.9 58.3 107.936z"/> </g> </svg> </div> <div class="ptt-icon record-right"> <svg xmlns:x="http://ns.adobe.com/Extensibility/1.0/" xmlns:i="http://ns.adobe.com/AdobeIllustrator/10.0/" xmlns:graph="http://ns.adobe.com/Graphs/1.0/" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Ebene_1" x="0px" y="0px" width="195.835px" height="270px" viewBox="0 0 195.835 270" enable-background="new 0 0 195.835 270" xml:space="preserve"> <metadata> <sfw xmlns="http://ns.adobe.com/SaveForWeb/1.0/"> <slices/> <sliceSourceBounds height="16383" width="16383" y="-8367" x="-8016" bottomLeftOrigin="true"/> </sfw> </metadata> <g> <path class="record-icon" fill-rule="evenodd" clip-rule="evenodd" d="M171.838 129.146c-0.41 40.426-33.293 73.074-73.815 73.1 s-73.405-32.648-73.815-73.074H1.383c1.192 47.7 36.8 86.9 82.9 93.726v45.572h28.163v-45.521 c46.328-6.627 82.124-45.903 83.319-93.777H171.838z M98.783 170.251c22.699 0 41.104-18.399 41.104-41.104V43.133 c0-22.705-18.405-41.104-41.104-41.104c-22.698 0-41.104 18.399-41.104 41.104v86.014 C57.68 151.9 76.1 170.3 98.8 170.251z"/> </g> </svg> </div> <div class="ptt-icon record-left hide"> <svg xmlns:x="http://ns.adobe.com/Extensibility/1.0/" xmlns:i="http://ns.adobe.com/AdobeIllustrator/10.0/" xmlns:graph="http://ns.adobe.com/Graphs/1.0/" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Ebene_1" x="0px" y="0px" width="195.835px" height="270px" viewBox="0 0 195.835 270" enable-background="new 0 0 195.835 270" xml:space="preserve"> <metadata> <sfw xmlns="http://ns.adobe.com/SaveForWeb/1.0/"> <slices/> <sliceSourceBounds height="16383" width="16383" y="-8367" x="-8016" bottomLeftOrigin="true"/> </sfw> </metadata> <g> <path class="record-icon-red" fill-rule="evenodd" clip-rule="evenodd" d="M171.838 129.146c-0.41 40.426-33.293 73.074-73.815 73.1 s-73.405-32.648-73.815-73.074H1.383c1.192 47.7 36.8 86.9 82.9 93.726v45.572h28.163v-45.521 c46.328-6.627 82.124-45.903 83.319-93.777H171.838z M98.783 170.251c22.699 0 41.104-18.399 41.104-41.104V43.133 c0-22.705-18.405-41.104-41.104-41.104c-22.698 0-41.104 18.399-41.104 41.104v86.014 C57.68 151.9 76.1 170.3 98.8 170.251z"/> </g> </svg> </div> <div class="bin"> <div class="ptt-icon bin-head"> <svg xmlns:x="http://ns.adobe.com/Extensibility/1.0/" xmlns:i="http://ns.adobe.com/AdobeIllustrator/10.0/" xmlns:graph="http://ns.adobe.com/Graphs/1.0/" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Ebene_1" x="0px" y="0px" width="115.465px" height="115.537px" viewBox="0 0 115.465 115.537" enable-background="new 0 0 115.465 115.537" xml:space="preserve"> <metadata> <sfw xmlns="http://ns.adobe.com/SaveForWeb/1.0/"> <slices/> <sliceSourceBounds x="139.2" y="190.5" width="71.6" height="36.7" bottomLeftOrigin="true"/> </sfw> </metadata> <g> <path class="record-icon" fill="#333333" d="M73.199 21.749V9.903c0-2.139-1.751-3.906-3.903-3.906H45.853c-2.137 0-3.897 1.767-3.897 3.906v11.98 c-11.59 1.315-19.525 3.977-19.525 7.061V34.8c0 1.2 1.2 2.3 3.4 3.375c5.717 2.7 18.1 4.5 32.4 4.5 c14.332 0 26.686-1.862 32.41-4.549c2.17-1.031 3.397-2.174 3.397-3.375v-5.855C94.034 25.8 85.5 23 73.2 21.749z M49.45 21.258l-0.988 0.062v-4.907c0-2.146 0.299-3.902 0.653-3.902c0.364 0 2.4 0 4.6 0h7.812c2.139 0 4.2 0 4.6 0 c0.359 0 0.7 1.8 0.7 3.902v4.828c-2.716-0.141-5.542-0.229-8.467-0.229C55.196 21 52.3 21.1 49.5 21.258z"/> </g> </svg> </div> <div class="ptt-icon bin-base"> <svg xmlns:x="http://ns.adobe.com/Extensibility/1.0/" xmlns:i="http://ns.adobe.com/AdobeIllustrator/10.0/" xmlns:graph="http://ns.adobe.com/Graphs/1.0/" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Ebene_1" x="0px" y="0px" width="115.465px" height="115.537px" viewBox="0 0 115.465 115.537" enable-background="new 0 0 115.465 115.537" xml:space="preserve"> <metadata> <sfw xmlns="http://ns.adobe.com/SaveForWeb/1.0/"> <slices/> <sliceSourceBounds x="143.5" y="124.7" width="63" height="61.8" bottomLeftOrigin="true"/> </sfw> </metadata> <g><path class="record-icon" fill="#333333" d="M89.695 48.006c-0.069-0.423-0.328-0.837-0.716-1.234c-3.127 3.178-15.71 3.703-30.753 3.7 s-27.614-0.525-30.754-3.703c-0.387 0.397-0.627 0.811-0.715 1.234h-0.03l0.009 0.229c0 0.026-0.009 0.053-0.009 0.1 c0 0.1 0 0.1 0 0.175l2.448 50.169h0.006c0.218 3.9 4.7 9.9 29 9.88c24.3 0 28.807-5.946 29.019-9.88h0.018 l2.451-50.169c0.005-0.059 0.023-0.114 0.023-0.175c0-0.027-0.019-0.054-0.019-0.08l0.019-0.229H89.695z"/></g> </svg> </div> </div> </div> <div class="start-here"> <p>Click here to get started</p> <div class="circle"></div> </div> </section> <section class="credit"> <p>Best viewed in Google Chrome</p> <p>Code by <a href="http://twitter.com/vsxed" target="_blank" class="credit-link">Eduard Mayer</a></p> <a href="http://vsxed.github.io/whatsapp-ptt-animation" target="_blank" class="credit-link button">View it on Github</a> <a href="https://github.com/vsxed/whatsapp-ptt-animation" target="_blank" class="credit-link button">Fork it on Github</a> </section> <section class="tutorial-dimmer"></section>
</body>
</html> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Whatsapp PTT Animation - Script Codes CSS Codes
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,700);
@import url(http://fonts.googleapis.com/css?family=Roboto:300,400);
body { padding: 0 0 3em; margin: 0; font-family: 'Open Sans', Arial, sans-serif; font-size: 1em; line-height: 1; background: #333;
}
.pen { max-width: 1392px; height: 754px; margin: 0 auto; background: url(http://vsxed.github.io/whatsapp-ptt-animation/img/background.jpg) center 0 no-repeat; background-size: auto; position: relative;
}
.pen img { margin-left: 15px;
}
.credit { display: block; max-width: 400px; text-align: center; margin: 0 auto; padding: 0; font-size: 0.8em; color: #f1f1f1; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.9);
}
.credit p a,
.credit a { color: white; text-decoration: none; font-weight: 700;
}
.credit p a:hover,
.credit a:hover,
.credit p a:active,
.credit a:active { text-shadow: 0 0 5px rgba(255, 255, 255, 0.4); color: white;
}
.credit p a.button,
.credit a.button { padding: 6px 12px; margin-top: 10px; background: #1a1a1a; border-radius: 3px;
}
.credit p a.button:hover,
.credit a.button:hover { background: #4d4d4d;
}
.credit p:last-of-type { margin-bottom: 30px;
}
* { -moz-box-sizing: border-box; box-sizing: border-box;
}
.tutorial-dimmer { position: fixed; height: auto !important; height: 100%; min-height: 100%; width: 100%; background: rgba(0, 0, 0, 0.4); top: 0; z-index: 999;
}
.start-here { max-width: 300px; margin: 0 auto; left: 20px; z-index: 1000; height: 130px; top: 125px; position: relative; text-align: right;
}
.start-here p { color: white; text-shadow: 0 2px 3px rgba(0, 0, 0, 0.3); font-weight: 400; font-size: 20px; font-family: "Roboto", sans-serif; position: relative; right: -20px; top: 20px;
}
.start-here .circle { width: 70px; height: 70px; background: #0099cc; opacity: 0.4; border-radius: 60px; display: block; position: absolute; right: 0; bottom: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-animation: pulse 2s infinite; -moz-animation: pulse 2s infinite; -ms-animation: pulse 2s infinite; -o-animation: pulse 2s infinite; animation: pulse 2s infinite;
}
.wa-input-container { width: 310px; font-family: "Roboto", sans-serif; position: relative; margin: 0 auto; top: 259px; height: 170px; overflow: hidden;
}
.wa-input-container .input-bg { height: 38px; position: absolute; bottom: 0; width: inherit; background: #f1f1f1;
}
.wa-input-container .wa-input { border-bottom: 2px solid #0099cc; width: 228px; margin: 0 auto; height: 33px; position: absolute; bottom: 6px; left: 40px; line-height: 2; z-index: 1; padding: 0 10px; border-right: 0; display: block; border-top: 0; border-left: 0;
}
.wa-input-container .wa-input input[type=text] { border: 0; width: 100%; display: block; height: 100%; font-size: 15px; font-family: "Roboto", sans-serif; font-weight: 300; background-color: transparent;
}
.wa-input-container .wa-input input[type=text]:focus { outline: 0;
}
.wa-input-container .wa-input:before,
.wa-input-container .wa-input:after { height: 4px; border-left: 2px solid #0099cc; position: absolute; content: ''; display: block; bottom: 0;
}
.wa-input-container .wa-input:before { left: 0;
}
.wa-input-container .wa-input:after { right: 0;
}
.wa-input-container .speech-container { display: block; position: absolute; height: 38px; bottom: 0; background: #f1f1f1; z-index: 2; width: 230px; right: -230px; -webkit-transition: right 500ms; -moz-transition: right 500ms; -ms-transition: right 500ms; -o-transition: right 500ms; transition: right 500ms; backface-visibility: hidden; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden;
}
.wa-input-container .speech-container .time { font-family: "Roboto", sans-serif; font-size: 24px; position: absolute; height: inherit; padding: 0 3px; color: #525150; line-height: 38px; background: #f1f1f1;
}
.wa-input-container .speech-container .swipe-to-cancel { display: block; position: absolute; background: #f1f1f1; width: 176px; left: 55px; background-repeat: no-repeat; background-position: 150px; background-image: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 25%, #ffffff 50%, rgba(255, 255, 255, 0) 75%, rgba(255, 255, 255, 0) 100%); background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(25%, rgba(255, 255, 255, 0)), color-stop(50%, #ffffff), color-stop(75%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(255, 255, 255, 0))); background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 25%, #ffffff 50%, rgba(255, 255, 255, 0) 75%, rgba(255, 255, 255, 0) 100%); background-image: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 25%, #ffffff 50%, rgba(255, 255, 255, 0) 75%, rgba(255, 255, 255, 0) 100%); background-image: -ms-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 25%, #ffffff 50%, rgba(255, 255, 255, 0) 75%, rgba(255, 255, 255, 0) 100%); background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 25%, #ffffff 50%, rgba(255, 255, 255, 0) 75%, rgba(255, 255, 255, 0) 100%); height: inherit; -webkit-animation: swipe 2s infinite; -moz-animation: swipe 2s infinite; -ms-animation: swipe 2s infinite; -o-animation: swipe 2s infinite; animation: swipe 2s infinite;
}
.wa-input-container .speech-container .swipe-to-cancel:before { display: block; text-transform: uppercase; content: 'Swipe to cancel'; top: 13px; color: #525150; font-size: 12px; font-weight: 300; position: relative; text-align: center;
}
.wa-input-container .bin { bottom: -40px; position: absolute; -webkit-transition: bottom 500ms; -moz-transition: bottom 500ms; -ms-transition: bottom 500ms; -o-transition: bottom 500ms; transition: bottom 500ms; backface-visibility: hidden; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden;
}
.wa-input-container .bin.show { opacity: 1;
}
.wa-input-container .ptt-icon { height: 19px; width: 20px; position: absolute; cursor: pointer;
}
.wa-input-container .ptt-icon.record-right { bottom: 10px; right: 10px;
}
.wa-input-container .ptt-icon.bin-base,
.wa-input-container .ptt-icon.bin-head { bottom: 3px; width: 25px; height: 25px; left: 7px; -webkit-transition: all 250ms; -moz-transition: all 250ms; -ms-transition: all 250ms; -o-transition: all 250ms; transition: all 250ms; backface-visibility: hidden; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden;
}
.wa-input-container .ptt-icon.bin-head.anim { transform: rotate(-80deg); transform-origin: 20% 40%; -moz-transform: rotate(-80deg); -moz-transform-origin: 20% 40%; -webkit-transform: rotate(-80deg); -webkit-transform-origin: 20% 40%; backface-visibility: hidden; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden;
}
.wa-input-container .ptt-icon.record-left { height: 25px; bottom: 6px; opacity: 0; left: 10px; width: 20px;
}
.wa-input-container .ptt-icon.record-left.show { opacity: 1;
}
.wa-input-container .ptt-icon.record-left.small { height: 20px; width: 15px; bottom: 9px; left: 12px;
}
.wa-input-container .ptt-icon.record-left.record-start { -webkit-transition: opacity, 500ms; -moz-transition: opacity, 500ms; -ms-transition: opacity, 500ms; -o-transition: opacity, 500ms; transition: opacity, 500ms; -webkit-animation: shine 1s infinite 750ms; -moz-animation: shine 1s infinite 750ms; -ms-animation: shine 1s infinite 750ms; -o-animation: shine 1s infinite 750ms; animation: shine 1s infinite 750ms; backface-visibility: hidden; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden;
}
.wa-input-container .ptt-icon.record-left.record-delete { -webkit-animation: jump 2s 1 250ms forwards; -moz-animation: jump 2s 1 250ms forwards; -ms-animation: jump 2s 1 250ms forwards; -o-animation: jump 2s 1 250ms forwards; animation: jump 2s 1 250ms forwards; backface-visibility: hidden; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden;
}
.wa-input-container .ptt-icon.emoticon { bottom: 10px; left: 10px; -webkit-transition: opacity 250ms; -moz-transition: opacity 250ms; -ms-transition: opacity 250ms; -o-transition: opacity 250ms; transition: opacity 250ms; backface-visibility: hidden; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden;
}
.wa-input-container .ptt-icon svg { height: inherit; width: inherit;
}
.wa-input-container .ptt-icon svg .record-icon { fill: #858583;
}
.wa-input-container .ptt-icon svg .record-icon-red { fill: #ff3314;
}
.hide { opacity: 0;
}
@keyframes swipe { from { background-position: 150px; } to { background-position: -150px; }
}
@-moz-keyframes swipe { from { background-position: 150px; } to { background-position: -150px; }
}
@-webkit-keyframes swipe { from { background-position: 150px; } to { background-position: -150px; }
}
@keyframes shine { 0% { opacity: 1; } 60% { opacity: 0.6; } 61% { opacity: 0; } 100% { opacity: 0; }
}
@-moz-keyframes shine { 0% { opacity: 1; } 60% { opacity: 0.6; } 61% { opacity: 0; } 100% { opacity: 0; }
}
@-webkit-keyframes shine { 0% { opacity: 1; } 60% { opacity: 0.6; } 61% { opacity: 0; } 100% { opacity: 0; }
}
@keyframes jump { 0% { transform: rotate(0deg); opacity: 1; } 50% { bottom: 150px; transform: rotate(360deg); opacity: 1; } 85% { transform: rotate(360deg); opacity: 0; } 100% { bottom: -30px; transform: rotate(360deg); opacity: 0; }
}
@-moz-keyframes jump { 0% { -moz-transform: rotate(0deg); opacity: 1; } 50% { bottom: 150px; -moz-transform: rotate(360deg); opacity: 1; } 85% { -moz-transform: rotate(360deg); opacity: 0; } 100% { bottom: -30px; -moz-transform: rotate(360deg); opacity: 0; }
}
@-webkit-keyframes jump { 0% { -webkit-transform: rotate(0deg); opacity: 1; } 50% { bottom: 150px; -webkit-transform: rotate(360deg); opacity: 1; } 85% { -webkit-transform: rotate(360deg); opacity: 0; } 100% { bottom: -30px; -webkit-transform: rotate(360deg); opacity: 0; }
}
@-webkit-keyframes pulse { 0% { -webkit-transform: scale(1); opacity: 0.4; } 2% { -webkit-transform: scale(1.1); } 4% { -webkit-transform: scale(1); } 100% { -webkit-transform: scale(1.7); opacity: 0; }
}
@keyframes pulse { 0% { transform: scale(1); opacity: 0.4; } 2% { transform: scale(1.1); } 4% { transform: scale(1); } 100% { transform: scale(1.7); opacity: 0; }
}
@-moz-keyframes pulse { 0% { -moz-transform: scale(1); opacity: 0.4; } 2% { -moz-transform: scale(1.1); } 4% { -moz-transform: scale(1); } 100% { -moz-transform: scale(1.7); opacity: 0; }
}
Whatsapp PTT Animation - Script Codes JS Codes
$(document).ready(function (e) { var pttbtn = $('.record-right'), recordTime = $('.time'), spcon = $('.speech-container'), btnEmoticon = $('.emoticon'), sec = 0, min = 0, count = 0, restartCount = function() { if (count !== 0) {return;} count = setInterval(function () { if (sec <= 9 && min == 0) { recordTime.text(min + ':0' + sec++); return min;} else if (sec > 9 && sec < 60 && min == 0) { recordTime.text(min + ':' + sec++); return min;} else if (sec >= 60) { sec = 0; min = min + 1; recordTime.text(min + ':0' + sec++); return min;} else if (sec <= 9 && min >= 1) { recordTime.text(min + ':0' + sec++); return min;} else if (sec > 9 && sec < 60 && min >= 1) { recordTime.text(min + ':' + sec++); return min;} else if ( sec >= 60 && min >= 1) { sec = 0; min = min + 1; recordTime.text(min + ':' + sec++); return min;} }, 1000);}; // Initialize tutorial $('.circle').on('mouseover', function() { $('.start-here, .tutorial-dimmer').remove(); }); pttbtn.on('click', function(e) { if ($('.swipe-to-cancel').length == 0) { spcon.prepend('<div class="swipe-to-cancel"></div>'); } btnEmoticon.addClass('hide'); $('.record-left').addClass('record-start'); spcon.css({'right' : "40px"}); $('.swipe-to-cancel').draggable({ axis: "x", containment: ".speech-container", drag: function() { if ($('.swipe-to-cancel').offset().left - $('.wa-input-container').offset().left === 40) { $(this).draggable('destroy'); $(this).remove(); spcon.attr("style", ""); recordTime.text('0:00'); clearInterval(count); count = 0; sec = 0; min = 0; $('.record-left').removeClass('record-start').addClass('show small record-delete').delay(2000).queue(function() { $(this).removeClass('show small record-delete').dequeue(); }); $('.bin').delay(1000).queue(function() { $(this).css({'bottom' : '5px'}).dequeue(); }); $('.bin').delay(1000).queue(function() { $(this).css({'bottom' : '-40px'}).dequeue(); }); $('.bin-head').delay(1000).queue(function() { $(this).addClass('anim').dequeue(); }); $('.bin-head').delay(1000).queue(function() { $(this).removeClass('anim').dequeue(); $('.bin').removeClass('show').dequeue(); }); btnEmoticon.delay(2500).queue(function() { $(this).removeClass('hide').dequeue(); }); } }, stop: function() { if ($('.swipe-to-cancel').offset().left - $('.wa-input-container').offset().left >= 40) { $(this).css({'left' : '55px'}); } } }); restartCount(); });
});
| Developer | Eduard Mayer |
| Username | codewunder |
| Uploaded | July 13, 2022 |
| Rating | 4 |
| Size | 9,106 Kb |
| Views | 54,648 |
Do you need developer help for Whatsapp PTT Animation?
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Eduard Mayer (codewunder) Script Codes
| Name | Size |
| Social Sharing Buttons | 2,711 Kb |
| CSSOff 2013 Submission | 14,766 Kb |
| Animated Ubuntu Touch-styled checkboxes | 3,420 Kb |
| Scrollable see-through headline | 3,171 Kb |
| A Pen by Eduard Mayer | 2,381 Kb |
| Twitter Widget Rebound | 4,890 Kb |
| Responsive GTA V Slider | 2,854 Kb |
| Social Slides | 2,985 Kb |
| A Pen by Eduard Mayer | 2,130 Kb |
| Infotype SVG Animation | 5,309 Kb |
Create amazing blog posts with AI!
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Similar Scripts & Codes
| Name | Username | Size |
| Simple checkbox style | Vncnz | 2,628 Kb |
| LAMP PURE CSS with Animation | Dam62500 | 2,911 Kb |
| A Pen by Moeid Saleem | Moeidsaleem | 1,862 Kb |
| Vertical drag to change | Plasm | 4,488 Kb |
| Wikipedia viewer | Chpecson | 2,865 Kb |
| Jquery 2d character movement | Drewtadams | 4,291 Kb |
| Heatmap Color Scales | Stevepepple | 2,331 Kb |
| Cool Page Split Effect | Anthonyadamski | 6,128 Kb |
| Simple personal profile | Miroot | 2,856 Kb |
| Portfolio page | Bhavya_j | 2,804 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!