{"id":753,"date":"2024-10-12T01:51:15","date_gmt":"2024-10-12T01:51:15","guid":{"rendered":"https:\/\/www.cssportal.com\/blog\/?p=753"},"modified":"2026-03-22T04:49:49","modified_gmt":"2026-03-22T04:49:49","slug":"adding-animation-effects-when-using-clipboard-js","status":"publish","type":"post","link":"https:\/\/www.cssportal.com\/blog\/adding-animation-effects-when-using-clipboard-js\/","title":{"rendered":"Adding Animation Effects When Using Clipboard.js"},"content":{"rendered":"<p><script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/clipboard.js\/2.0.11\/clipboard.min.js\"><\/script><\/p>\n<p>Interactive animations can greatly enhance user experience, especially when it comes to small actions like copying text. Visual feedback lets users know that their action was successful, and creative animations can make your web application stand out. In this blog post, we\u2019ll explore various animations that provide delightful feedback to users when they click a &quot;Copy&quot; button. We&#39;ll implement these effects using <a href=\"https:\/\/clipboardjs.com\/\" rel=\"nofollow\">Clipboard.js<\/a>, a simple and powerful JavaScript library that makes copying text to the clipboard effortless.<\/p>\n<h3 class=\"highlight\">What is Clipboard.js?<\/h3>\n<p><strong>Clipboard.js<\/strong> is a lightweight, no-dependency JavaScript library designed to make copying text to the clipboard a breeze. Unlike traditional methods that often require Flash or complex workarounds, Clipboard.js uses modern browser APIs to handle clipboard actions natively. It is widely supported and easy to integrate with buttons, forms, or any clickable element, allowing developers to provide seamless copy-to-clipboard functionality.<\/p>\n<p>In this post, we&#39;ll use Clipboard.js to trigger various animations, giving users instant feedback when they copy content. Whether it&#39;s a glowing textarea, a sliding confirmation message, or a scanner effect, these animations will bring an extra layer of polish to your user interface.<\/p>\n<h3 class=\"highlight\">Before We Get Started<\/h3>\n<p>Before implementing any of the animations, you&#39;ll need to include the <strong>Clipboard.js<\/strong> script to handle the copy-to-clipboard functionality. Clipboard.js makes it easy to copy text with just a few lines of code. To use it, simply add the following script tag to your HTML:<\/p>\n<div class=\"headerblog\">HTML Code<\/div>\n<pre><code class=\"language-html\">&lt;script src=&quot;https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/clipboard.js\/2.0.11\/clipboard.min.js&quot;&gt;&lt;\/script&gt;\r\n<\/code><\/pre>\n<p>This script ensures that our copy functionality will work seamlessly. Now that we have Clipboard.js ready to go, let&#39;s dive into the animations!<\/p>\n<div class=\"text-center mb-20 mt-20\">\n<script async src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script>\n<!-- CSS Responsive -->\n<ins class=\"adsbygoogle\"\n     style=\"display:block\"\n     data-ad-client=\"ca-pub-1356719463849900\"\n     data-ad-slot=\"5275015068\"\n     data-ad-format=\"horizontal\"\n     data-full-width-responsive=\"true\"><\/ins>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script>\n<\/div>\n<div class=\"adblock-message bg-main-50 rounded p-10 mb-20\">  \n\t<div class=\"d-flex align-items-center justify-content-between\">\n\t  <span class=\"text-gray-400\">If this site has been useful, we\u2019d love your support! Consider buying us a coffee to keep things going strong!<\/span>\n\t  <div class=\"buymeacoffee\">\n\t\t<a target=\"_blank\" href=\"https:\/\/buymeacoffee.com\/rpjs\"><img decoding=\"async\" width=\"180\" src=\"\/assets\/images\/coffee.png\"><\/a>\n\t  <\/div>\n\t<\/div>\n<\/div>\n<h3 class=\"highlight\">Button Text Change on Copy<\/h3>\n<p>This simple yet effective animation provides immediate feedback by changing the button text to &quot;Copied&quot; when the user clicks it. The text reverts to the original label after a short delay, indicating that the content was successfully copied to the clipboard. This subtle interaction is an intuitive way to confirm the action without overwhelming the user with extra elements or animations. It\u2019s perfect for minimalistic designs where you want functionality with a clean, straightforward approach. <\/p>\n<p><script>\ndocument.addEventListener(\"DOMContentLoaded\",function(){var r=new ClipboardJS(\".copy-btn-1\");r.on(\"success\",function(r){var e=r.trigger.innerText;r.trigger.innerText=\"Copied!\",setTimeout(function(){r.trigger.innerText=e},2e3),r.clearSelection()}),r.on(\"error\",function(r){console.error(\"Action:\",r.action),console.error(\"Trigger:\",r.trigger)})});\n<\/script><\/p>\n<div class=\"card-body\">\n<ul class=\"nav nav-tabs nav-tabs-custom\" role=\"tablist\">\n<li class=\"nav-item\"><a class=\"nav-link active\" data-bs-toggle=\"tab\" href=\"#a1\" role=\"tab\">Animation<\/a><\/li>\n<li class=\"nav-item\"><a class=\"nav-link\" data-bs-toggle=\"tab\" href=\"#h1\" role=\"tab\">HTML<\/a><\/li>\n<li class=\"nav-item\"><a class=\"nav-link\" data-bs-toggle=\"tab\" href=\"#j1\" role=\"tab\">JavaScript<\/a><\/li>\n<\/ul>\n<div class=\"tab-content\">\n<div class=\"tab-pane border p-3 active\" id=\"a1\" role=\"tabpanel\">\n<div class=\"copy-container\">\n  <button class=\"btn btn-info btn-lg copy-btn-1\" data-clipboard-text=\"Text to copy\">Copy<\/button>\n<\/div>\n<\/p><\/div>\n<div class=\"tab-pane\" id=\"h1\" role=\"tabpanel\">\n<pre><code class=\"language-html\">&lt;button class=&quot;copy-btn&quot; data-clipboard-text=&quot;Text to copy&quot;&gt;Copy&lt;\/button&gt;\r\n<\/code><\/pre>\n<\/p><\/div>\n<div class=\"tab-pane\" id=\"j1\" role=\"tabpanel\">\n<pre><code class=\"language-html\">&lt;script&gt;\r\n  document.addEventListener(&quot;DOMContentLoaded&quot;, function() {\r\n    var clipboard = new ClipboardJS(&#39;.copy-btn&#39;);\r\n\r\n    clipboard.on(&#39;success&#39;, function(e) {\r\n      var originalText = e.trigger.innerText;\r\n\r\n      e.trigger.innerText = &#39;Copied!&#39;;\r\n\r\n      setTimeout(function() {\r\n        e.trigger.innerText = originalText;\r\n      }, 2000); \r\n\r\n      e.clearSelection();\r\n    });\r\n\r\n    clipboard.on(&#39;error&#39;, function(e) {\r\n      console.error(&#39;Action:&#39;, e.action);\r\n      console.error(&#39;Trigger:&#39;, e.trigger);\r\n    });\r\n  });\r\n&lt;\/script&gt;\r\n<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<h3 class=\"highlight\">Ripple Effect on Copy<\/h3>\n<p>The ripple effect adds a subtle, visually engaging touch to the copy action. When the user clicks the button, a ripple animation radiates outward from the point of contact, giving the appearance that the copy action is spreading across the button. This effect mimics the material design ripple and adds a modern, dynamic feel to your interface, providing immediate, tactile feedback to the user without disrupting the flow of the experience.<\/p>\n<style>.copy-btn-2 .ripple{position:absolute;background:rgba(255,255,255,.5);border-radius:50%;width:20px;height:20px;transform:scale(0);animation:.6s linear ripple-effect}@keyframes ripple-effect{to{transform:scale(20);opacity:0}}<\/style>\n<p><script>document.addEventListener(\"DOMContentLoaded\",function(){new ClipboardJS(\".copy-btn-2\").on(\"success\",function(e){var t=e.trigger,n=document.createElement(\"span\");n.classList.add(\"ripple\");var l=t.getBoundingClientRect(),c=e.clientX-l.left,i=e.clientY-l.top;n.style.left=c+\"px\",n.style.top=i+\"px\",t.appendChild(n),setTimeout(()=>n.remove(),600),e.clearSelection()})});<\/script><\/p>\n<div class=\"card-body\">\n<ul class=\"nav nav-tabs nav-tabs-custom\" role=\"tablist\">\n<li class=\"nav-item\"><a class=\"nav-link active\" data-bs-toggle=\"tab\" href=\"#a2\" role=\"tab\">Animation<\/a><\/li>\n<li class=\"nav-item\"><a class=\"nav-link\" data-bs-toggle=\"tab\" href=\"#h2\" role=\"tab\">HTML<\/a><\/li>\n<li class=\"nav-item\"><a class=\"nav-link\" data-bs-toggle=\"tab\" href=\"#c2\" role=\"tab\">CSS<\/a><\/li>\n<li class=\"nav-item\"><a class=\"nav-link\" data-bs-toggle=\"tab\" href=\"#j2\" role=\"tab\">JavaScript<\/a><\/li>\n<\/ul>\n<div class=\"tab-content\">\n<div class=\"tab-pane border p-3 active\" id=\"a2\" role=\"tabpanel\">\n<div class=\"copy-container\">\n  <button class=\"btn btn-info btn-lg copy-btn-2\" data-clipboard-text=\"Text to copy\">Copy<\/button>\n<\/div>\n<\/p><\/div>\n<div class=\"tab-pane\" id=\"h2\" role=\"tabpanel\">\n<pre><code class=\"language-html\">&lt;button class=&quot;copy-btn&quot; data-clipboard-text=&quot;Text to copy&quot;&gt;Copy&lt;\/button&gt;\r\n<\/code><\/pre>\n<\/p><\/div>\n<div class=\"tab-pane\" id=\"c2\" role=\"tabpanel\">\n<pre><code class=\"language-css\">.copy-btn .ripple {\r\n  position: absolute;\r\n  background: rgba(255, 255, 255, 0.5);\r\n  border-radius: 50%;\r\n  width: 20px;\r\n  height: 20px;\r\n  transform: scale(0);\r\n  animation: ripple-effect 0.6s linear;\r\n}\r\n\r\n@keyframes ripple-effect {\r\n  to {\r\n    transform: scale(20);\r\n    opacity: 0;\r\n  }\r\n}\r\n<\/code><\/pre>\n<\/p><\/div>\n<div class=\"tab-pane\" id=\"j2\" role=\"tabpanel\">\n<pre><code class=\"language-html\">&lt;script&gt;\r\n  document.addEventListener(&quot;DOMContentLoaded&quot;, function() {\r\n    var clipboard = new ClipboardJS(&#39;.copy-btn&#39;);\r\n\r\n    clipboard.on(&#39;success&#39;, function(e) {\r\n      var button = e.trigger;\r\n      \r\n      var ripple = document.createElement(&quot;span&quot;);\r\n      ripple.classList.add(&quot;ripple&quot;);\r\n\r\n      var rect = button.getBoundingClientRect();\r\n      var x = e.clientX - rect.left;\r\n      var y = e.clientY - rect.top;\r\n\r\n      ripple.style.left = x + &quot;px&quot;;\r\n      ripple.style.top = y + &quot;px&quot;;\r\n\r\n      button.appendChild(ripple);\r\n\r\n      setTimeout(() =&gt; ripple.remove(), 600);\r\n\r\n      e.clearSelection();\r\n    });\r\n  });\r\n&lt;\/script&gt;\r\n<\/code><\/pre>\n<\/p><\/div>\n<\/p><\/div>\n<\/div>\n<div class=\"text-center mb-20 mt-20\">\n<script async src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script>\n<!-- CSS Responsive -->\n<ins class=\"adsbygoogle\"\n     style=\"display:block\"\n     data-ad-client=\"ca-pub-1356719463849900\"\n     data-ad-slot=\"5275015068\"\n     data-ad-format=\"horizontal\"\n     data-full-width-responsive=\"true\"><\/ins>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script>\n<\/div>\n<div class=\"adblock-message bg-main-50 rounded p-10 mb-20\">  \n\t<div class=\"d-flex align-items-center justify-content-between\">\n\t  <span class=\"text-gray-400\">If this site has been useful, we\u2019d love your support! Consider buying us a coffee to keep things going strong!<\/span>\n\t  <div class=\"buymeacoffee\">\n\t\t<a target=\"_blank\" href=\"https:\/\/buymeacoffee.com\/rpjs\"><img decoding=\"async\" width=\"180\" src=\"\/assets\/images\/coffee.png\"><\/a>\n\t  <\/div>\n\t<\/div>\n<\/div>\n<h3 class=\"highlight\">Fading &quot;Copied&quot; Message<\/h3>\n<p>This animation adds a smooth, subtle visual cue by displaying a &quot;Copied&quot; message above the button when clicked. The message gently fades away after a short moment, giving users a clear indication that the text was successfully copied. It\u2019s a stylish and non-intrusive way to provide feedback, enhancing the user experience without cluttering the interface. This effect works well for designs where a temporary notification is preferable over changing button text.<\/p>\n<style>.copy-btn-3{position:relative;margin-top:20px;white-space:nowrap;}.copy-btn-3::after{content:\"Copied!\";position:absolute;top:-30px;left:50%;transform:translateX(-50%);font-size:16px;color:#28a745;opacity:0;pointer-events:none;transition:opacity .3s ease-out;z-index:999}@keyframes moveUpFadeOut{0%{transform:translateX(-50%) translateY(0);opacity:1}100%{transform:translateX(-50%) translateY(-20px);opacity:0}}.copy-btn-3.show-msg::after{opacity:1;animation:1s forwards moveUpFadeOut}<\/style>\n<p><script>document.addEventListener(\"DOMContentLoaded\",function(){var r=new ClipboardJS(\".copy-btn-3\");r.on(\"success\",function(r){r.trigger.classList.add(\"show-msg\"),setTimeout(function(){r.trigger.classList.remove(\"show-msg\")},2e3),r.clearSelection()}),r.on(\"error\",function(r){console.error(\"Action:\",r.action),console.error(\"Trigger:\",r.trigger)})});<\/script><\/p>\n<div class=\"card-body\">\n<ul class=\"nav nav-tabs nav-tabs-custom\" role=\"tablist\">\n<li class=\"nav-item\"><a class=\"nav-link active\" data-bs-toggle=\"tab\" href=\"#a3\" role=\"tab\">Animation<\/a><\/li>\n<li class=\"nav-item\"><a class=\"nav-link\" data-bs-toggle=\"tab\" href=\"#h3\" role=\"tab\">HTML<\/a><\/li>\n<li class=\"nav-item\"><a class=\"nav-link\" data-bs-toggle=\"tab\" href=\"#c3\" role=\"tab\">CSS<\/a><\/li>\n<li class=\"nav-item\"><a class=\"nav-link\" data-bs-toggle=\"tab\" href=\"#j3\" role=\"tab\">JavaScript<\/a><\/li>\n<\/ul>\n<div class=\"tab-content\">\n<div class=\"tab-pane border p-3 active\" id=\"a3\" role=\"tabpanel\">\n<div class=\"copy-container\">\n  <button class=\"btn btn-info btn-lg copy-btn-3\" data-clipboard-text=\"Text to copy\">Copy<\/button>\n<\/div>\n<\/p><\/div>\n<div class=\"tab-pane\" id=\"h3\" role=\"tabpanel\">\n<pre><code class=\"language-html\">&lt;div class=&quot;copy-container&quot;&gt;\r\n  &lt;button class=&quot;copy-btn&quot; data-clipboard-text=&quot;Text to copy&quot;&gt;Copy&lt;\/button&gt;\r\n&lt;\/div&gt;\r\n<\/code><\/pre>\n<\/p><\/div>\n<div class=\"tab-pane\" id=\"c3\" role=\"tabpanel\">\n<pre><code class=\"language-css\">.copy-btn {\r\n  position: relative;\r\n  white-space: nowrap;\r\n}\r\n.copy-btn::after {\r\n  content: &quot;Copied!&quot;;\r\n  position: absolute;\r\n  top: -30px;\r\n  left: 50%;\r\n  transform: translateX(-50%);\r\n  font-size: 14px;\r\n  color: #28a745;\r\n  opacity: 0;\r\n  pointer-events: none;\r\n  transition: opacity 0.3s ease-out;\r\n}\r\n\r\n@keyframes moveUpFadeOut {\r\n  0% {\r\n    transform: translateX(-50%) translateY(0);\r\n    opacity: 1;\r\n  }\r\n  100% {\r\n    transform: translateX(-50%) translateY(-20px);\r\n    opacity: 0;\r\n  }\r\n}\r\n\r\n.copy-btn.show-msg::after {\r\n  opacity: 1;\r\n  animation: moveUpFadeOut 1s forwards;\r\n}\r\n<\/code><\/pre>\n<\/p><\/div>\n<div class=\"tab-pane\" id=\"j3\" role=\"tabpanel\">\n<pre><code class=\"language-html\">&lt;script&gt;\r\n  document.addEventListener(&quot;DOMContentLoaded&quot;, function() {\r\n    var clipboard = new ClipboardJS(&#39;.copy-btn&#39;);\r\n\r\n    clipboard.on(&#39;success&#39;, function(e) {\r\n      e.trigger.classList.add(&#39;show-msg&#39;);\r\n\r\n      setTimeout(function() {\r\n        e.trigger.classList.remove(&#39;show-msg&#39;);\r\n      }, 2000);\r\n\r\n      e.clearSelection();\r\n    });\r\n\r\n    clipboard.on(&#39;error&#39;, function(e) {\r\n      console.error(&#39;Action:&#39;, e.action);\r\n      console.error(&#39;Trigger:&#39;, e.trigger);\r\n    });\r\n  });\r\n&lt;\/script&gt;\r\n<\/code><\/pre>\n<\/p><\/div>\n<\/p><\/div>\n<\/div>\n<h3 class=\"highlight\">Slide-in Confirmation from the Top<\/h3>\n<p>For a more noticeable copy confirmation, this effect displays a message that slides in from the top of the screen when the user clicks the &quot;Copy&quot; button. The message stays visible for a couple of seconds, then slides back out, providing a clear and eye-catching notification. This animation works well for scenarios where you want to ensure that users don&#39;t miss the confirmation, without disrupting the flow of the page.<\/p>\n<style>.global-copied-msg{position:fixed;top:-50px;left:50%;transform:translateX(-50%);background-color:#28a745;color:#fff;padding:10px 20px;font-size:16px;border-radius:4px;opacity:0;pointer-events:none;z-index:10000;transition:opacity .3s}@keyframes slideDownAndUp{0%,100%{top:-50px;opacity:0}10%,90%{top:20px;opacity:1}}.show-global-msg{animation:2s forwards slideDownAndUp}<\/style>\n<p><script>document.addEventListener(\"DOMContentLoaded\",function(){var o=new ClipboardJS(\".copy-btn-4\");o.on(\"success\",function(o){var e=document.querySelector(\".global-copied-msg\");e.classList.add(\"show-global-msg\"),setTimeout(function(){e.classList.remove(\"show-global-msg\")},2e3),o.clearSelection()}),o.on(\"error\",function(o){console.error(\"Action:\",o.action),console.error(\"Trigger:\",o.trigger)})});<\/script><\/p>\n<div class=\"card-body\">\n<ul class=\"nav nav-tabs nav-tabs-custom\" role=\"tablist\">\n<li class=\"nav-item\"><a class=\"nav-link active\" data-bs-toggle=\"tab\" href=\"#a4\" role=\"tab\">Animation<\/a><\/li>\n<li class=\"nav-item\"><a class=\"nav-link\" data-bs-toggle=\"tab\" href=\"#h4\" role=\"tab\">HTML<\/a><\/li>\n<li class=\"nav-item\"><a class=\"nav-link\" data-bs-toggle=\"tab\" href=\"#c4\" role=\"tab\">CSS<\/a><\/li>\n<li class=\"nav-item\"><a class=\"nav-link\" data-bs-toggle=\"tab\" href=\"#j4\" role=\"tab\">JavaScript<\/a><\/li>\n<\/ul>\n<div class=\"tab-content\">\n<div class=\"tab-pane border p-3 active\" id=\"a4\" role=\"tabpanel\">\n<div class=\"global-copied-msg\">Copied!<\/div>\n<div class=\"copy-container\">\n  <button class=\"btn btn-info btn-lg copy-btn-4\" data-clipboard-text=\"Text to copy\">Copy<\/button>\n<\/div>\n<\/p><\/div>\n<div class=\"tab-pane\" id=\"h4\" role=\"tabpanel\">\n<pre><code class=\"language-html\">&lt;div class=&quot;global-copied-msg&quot;&gt;Copied!&lt;\/div&gt;\r\n\r\n&lt;div class=&quot;copy-container&quot;&gt;\r\n  &lt;button class=&quot;copy-btn&quot; data-clipboard-text=&quot;Text to copy&quot;&gt;Copy&lt;\/button&gt;\r\n&lt;\/div&gt;\r\n<\/code><\/pre>\n<\/p><\/div>\n<div class=\"tab-pane\" id=\"c4\" role=\"tabpanel\">\n<pre><code class=\"language-css\">.global-copied-msg {\r\n  position: fixed;\r\n  top: -50px;\r\n  left: 50%;\r\n  transform: translateX(-50%);\r\n  background-color: #28a745;\r\n  color: white;\r\n  padding: 10px 20px;\r\n  font-size: 16px;\r\n  border-radius: 4px;\r\n  opacity: 0;\r\n  pointer-events: none;\r\n  z-index: 1000;\r\n  transition: opacity 0.3s ease;\r\n}\r\n\r\n@keyframes slideDownAndUp {\r\n  0% {\r\n    top: -50px;\r\n    opacity: 0;\r\n  }\r\n  10% {\r\n    top: 20px;\r\n    opacity: 1;\r\n  }\r\n  90% {\r\n    top: 20px;\r\n    opacity: 1;\r\n  }\r\n  100% {\r\n    top: -50px;\r\n    opacity: 0;\r\n  }\r\n}\r\n\r\n.show-global-msg {\r\n  animation: slideDownAndUp 2s forwards;\r\n}\r\n<\/code><\/pre>\n<\/p><\/div>\n<div class=\"tab-pane\" id=\"j4\" role=\"tabpanel\">\n<pre><code class=\"language-html\">&lt;script&gt;\r\n  document.addEventListener(&quot;DOMContentLoaded&quot;, function() {\r\n    var clipboard = new ClipboardJS(&#39;.copy-btn&#39;);\r\n\r\n    clipboard.on(&#39;success&#39;, function(e) {\r\n\r\n      var globalMsg = document.querySelector(&#39;.global-copied-msg&#39;);\r\n      globalMsg.classList.add(&#39;show-global-msg&#39;);\r\n\r\n      setTimeout(function() {\r\n        globalMsg.classList.remove(&#39;show-global-msg&#39;);\r\n      }, 2000);\r\n\r\n      e.clearSelection();\r\n    });\r\n\r\n    clipboard.on(&#39;error&#39;, function(e) {\r\n      console.error(&#39;Action:&#39;, e.action);\r\n      console.error(&#39;Trigger:&#39;, e.trigger);\r\n    });\r\n  });\r\n&lt;\/script&gt;\r\n<\/code><\/pre>\n<\/p><\/div>\n<\/p><\/div>\n<\/div>\n<div class=\"text-center mb-20 mt-20\">\n<script async src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script>\n<!-- CSS Responsive -->\n<ins class=\"adsbygoogle\"\n     style=\"display:block\"\n     data-ad-client=\"ca-pub-1356719463849900\"\n     data-ad-slot=\"5275015068\"\n     data-ad-format=\"horizontal\"\n     data-full-width-responsive=\"true\"><\/ins>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script>\n<\/div>\n<div class=\"adblock-message bg-main-50 rounded p-10 mb-20\">  \n\t<div class=\"d-flex align-items-center justify-content-between\">\n\t  <span class=\"text-gray-400\">If this site has been useful, we\u2019d love your support! Consider buying us a coffee to keep things going strong!<\/span>\n\t  <div class=\"buymeacoffee\">\n\t\t<a target=\"_blank\" href=\"https:\/\/buymeacoffee.com\/rpjs\"><img decoding=\"async\" width=\"180\" src=\"\/assets\/images\/coffee.png\"><\/a>\n\t  <\/div>\n\t<\/div>\n<\/div>\n<h3 class=\"highlight\">Scanner Effect on Copy<\/h3>\n<p>This eye-catching animation mimics a high-tech &quot;scanner&quot; sweeping across the text area when the user clicks the copy button. The scanner bar moves from left to right, creating the illusion that the text is being scanned and copied. This effect adds a futuristic, dynamic touch to your UI, making the copy action feel more engaging and visually appealing. It&#39;s a great option for interfaces that aim to provide a more interactive and fun user experience.<\/p>\n<style>.copy-container{position:relative;display:inline-block;margin:20px}.scanner-bar,.scanner-bar::before{position:absolute;top:0;left:0;height:100%}.copy-area{padding:10px;border:1px solid #ccc;width:100%}.scanner-bar{width:5px;background-color:transparent;animation:1.5s linear forwards scan}.scanner-bar::before{content:\"\";width:25px;background:linear-gradient(to right,transparent,#b0d0ec)}@keyframes scan{0%{left:0}100%{left:calc(100% - 25px)}}<\/style>\n<p><script>document.addEventListener(\"DOMContentLoaded\",function(){var r=new ClipboardJS(\".copy-btn-5\");r.on(\"success\",function(r){var e=r.trigger.innerText,n=document.querySelector(\"#scanner\");r.trigger.innerText=\"Copying!\",n.classList.add(\"scanner-bar\"),setTimeout(function(){r.trigger.innerText=e,n.classList.remove(\"scanner-bar\")},1500),r.clearSelection()}),r.on(\"error\",function(r){console.error(\"Action:\",r.action),console.error(\"Trigger:\",r.trigger)})});<\/script><\/p>\n<div class=\"card-body\">\n<ul class=\"nav nav-tabs nav-tabs-custom\" role=\"tablist\">\n<li class=\"nav-item\"><a class=\"nav-link active\" data-bs-toggle=\"tab\" href=\"#a5\" role=\"tab\">Animation<\/a><\/li>\n<li class=\"nav-item\"><a class=\"nav-link\" data-bs-toggle=\"tab\" href=\"#h5\" role=\"tab\">HTML<\/a><\/li>\n<li class=\"nav-item\"><a class=\"nav-link\" data-bs-toggle=\"tab\" href=\"#c5\" role=\"tab\">CSS<\/a><\/li>\n<li class=\"nav-item\"><a class=\"nav-link\" data-bs-toggle=\"tab\" href=\"#j5\" role=\"tab\">JavaScript<\/a><\/li>\n<\/ul>\n<div class=\"tab-content\">\n<div class=\"tab-pane border p-3 active\" id=\"a5\" role=\"tabpanel\">\n<div class=\"copy-container\">\n<div id=\"scanner\"><\/div>\n<div class=\"copy-area\">The rusty swing set creaked a lonely lullaby in the twilight, shadows lengthening like grasping fingers across the dew-kissed grass. A lone dandelion seed, adrift on the breeze, whispered secrets of faraway fields, of dandelion suns and galaxies spun from fluff. Somewhere, beyond the veil of dusk, a coyote laughed, echoing through the stillness like a forgotten memory.<\/div>\n<\/div>\n<p><button class=\"btn btn-info btn-lg copy-btn-5\" data-clipboard-target=\".copy-area\">Copy Text<\/button>\n\t\t<\/div>\n<div class=\"tab-pane\" id=\"h5\" role=\"tabpanel\">\n<pre><code class=\"language-html\">&lt;div class=&quot;copy-container&quot;&gt;\r\n  &lt;div id=&quot;scanner&quot;&gt;&lt;\/div&gt;\r\n  &lt;div class=&quot;copy-area&quot;&gt;The rusty swing set creaked a lonely lullaby in the twilight, shadows lengthening like grasping fingers across the dew-kissed grass. A lone dandelion seed, adrift on the breeze, whispered secrets of faraway fields, of dandelion suns and galaxies spun from fluff. Somewhere, beyond the veil of dusk, a coyote laughed, echoing through the stillness like a forgotten memory.&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n&lt;button class=&quot;copy-btn&quot; data-clipboard-target=&quot;.copy-area&quot;&gt;Copy Text&lt;\/button&gt;\r\n<\/code><\/pre>\n<\/p><\/div>\n<div class=\"tab-pane\" id=\"c5\" role=\"tabpanel\">\n<pre><code class=\"language-css\">.copy-container {\r\n  position: relative;\r\n  display: inline-block;\r\n  margin: 20px;\r\n}\r\n.copy-area {\r\n  border: 1px solid #ccc;\r\n  width: 100%;\r\n}\r\n.scanner-bar {\r\n  width: 5px;\r\n  height: 100%;\r\n  position: absolute;\r\n  top: 0;\r\n  left: 0;\r\n  background-color: transparent;\r\n  animation: scan 1.5s linear 1;\r\n  animation-fill-mode: forwards;\r\n}\r\n.scanner-bar::before {\r\n  content: &quot;&quot;;\r\n  position: absolute;\r\n  top: 0;\r\n  left: 0;\r\n  width: 25px;\r\n  height: 100%;\r\n  background: linear-gradient(to right, transparent, #b0d0ec);\r\n}\r\n@keyframes scan {\r\n  0% {\r\n    left: 0;\r\n  }\r\n  100% {\r\n    left: calc(100% - 25px);\r\n  }\r\n}\r\n<\/code><\/pre>\n<\/p><\/div>\n<div class=\"tab-pane\" id=\"j5\" role=\"tabpanel\">\n<pre><code class=\"language-html\">&lt;script&gt;\r\ndocument.addEventListener(&quot;DOMContentLoaded&quot;, function() {\r\n\r\n  var clipboard = new ClipboardJS(&#39;.copy-btn&#39;);\r\n\r\n  clipboard.on(&#39;success&#39;, function(e) {\r\n    var originalText = e.trigger.innerText;\r\n    var copyArea = document.querySelector(&quot;#scanner&quot;);\r\n\r\n    e.trigger.innerText = 'Copying!';    \r\n    copyArea.classList.add(&quot;scanner-bar&quot;);\r\n    \r\n    setTimeout(function () {\r\n\t  e.trigger.innerText = originalText;\r\n      copyArea.classList.remove(&quot;scanner-bar&quot;);\r\n    }, 1500);\r\n    \r\n    e.clearSelection();\r\n  });\r\n\r\n  clipboard.on(&#39;error&#39;, function(e) {\r\n    console.error(&#39;Action:&#39;, e.action);\r\n    console.error(&#39;Trigger:&#39;, e.trigger);\r\n  });\r\n});\r\n&lt;\/script&gt;\r\n<\/code><\/pre>\n<\/p><\/div>\n<\/p><\/div>\n<\/div>\n<h3 class=\"highlight\">Background Flash on Copy<\/h3>\n<p>In this animation, the background of the target area briefly flashes to a different color when the copy action is triggered, giving a strong and immediate visual cue. This flash effect momentarily highlights the copied content, signaling success in a bold yet simple way. It&#39;s an eye-catching way to grab the user&#39;s attention, making it clear that the action was completed without needing any additional text or icons.<\/p>\n<style>.copy-container{position:relative;display:inline-block;margin:20px}.copy-area-1{padding:10px;border:1px solid #ccc;width:100%}.flash{animation:1.5s a}@keyframes a{0%{background:#ffdf5d}}<\/style>\n<p><script>document.addEventListener(\"DOMContentLoaded\",function(){var e=new ClipboardJS(\".copy-btn-6\");e.on(\"success\",function(e){var r=e.trigger.innerText,n=document.querySelector(\".copy-area-1\");e.trigger.innerText=\"Copying!\",n.classList.add(\"flash\"),setTimeout(function(){e.trigger.innerText=r,n.classList.remove(\"flash\")},1500),e.clearSelection()}),e.on(\"error\",function(e){console.error(\"Action:\",e.action),console.error(\"Trigger:\",e.trigger)})});<\/script><\/p>\n<div class=\"card-body\">\n<ul class=\"nav nav-tabs nav-tabs-custom\" role=\"tablist\">\n<li class=\"nav-item\"><a class=\"nav-link active\" data-bs-toggle=\"tab\" href=\"#a6\" role=\"tab\">Animation<\/a><\/li>\n<li class=\"nav-item\"><a class=\"nav-link\" data-bs-toggle=\"tab\" href=\"#h6\" role=\"tab\">HTML<\/a><\/li>\n<li class=\"nav-item\"><a class=\"nav-link\" data-bs-toggle=\"tab\" href=\"#c6\" role=\"tab\">CSS<\/a><\/li>\n<li class=\"nav-item\"><a class=\"nav-link\" data-bs-toggle=\"tab\" href=\"#j6\" role=\"tab\">JavaScript<\/a><\/li>\n<\/ul>\n<div class=\"tab-content\">\n<div class=\"tab-pane border p-3 active\" id=\"a6\" role=\"tabpanel\">\n<div class=\"copy-container\">\n<div class=\"copy-area-1\">The rusty swing set creaked a lonely lullaby in the twilight, shadows lengthening like grasping fingers across the dew-kissed grass. A lone dandelion seed, adrift on the breeze, whispered secrets of faraway fields, of dandelion suns and galaxies spun from fluff. Somewhere, beyond the veil of dusk, a coyote laughed, echoing through the stillness like a forgotten memory.<\/div>\n<\/div>\n<p><button class=\"btn btn-info btn-lg copy-btn-6\" data-clipboard-target=\".copy-area-1\">Copy Text<\/button>\n\t\t<\/div>\n<div class=\"tab-pane\" id=\"h6\" role=\"tabpanel\">\n<pre><code class=\"language-html\">&lt;div class=&quot;copy-container&quot;&gt;\r\n  &lt;div class=&quot;copy-area&quot;&gt;The rusty swing set creaked a lonely lullaby in the twilight, shadows lengthening like grasping fingers across the dew-kissed grass. A lone dandelion seed, adrift on the breeze, whispered secrets of faraway fields, of dandelion suns and galaxies spun from fluff. Somewhere, beyond the veil of dusk, a coyote laughed, echoing through the stillness like a forgotten memory.&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n&lt;button class=&quot;copy-btn&quot; data-clipboard-target=&quot;.copy-area&quot;&gt;Copy Text&lt;\/button&gt;\r\n<\/code><\/pre>\n<\/p><\/div>\n<div class=\"tab-pane\" id=\"c6\" role=\"tabpanel\">\n<pre><code class=\"language-css\">.copy-container {\r\n  position: relative;\r\n  display: inline-block;\r\n  margin: 20px;\r\n}\r\n.copy-area {\r\n  border: 1px solid #ccc;\r\n  width: 100%;\r\n}\r\n.flash{\r\n  animation:a 1.5s\r\n}\r\n@keyframes a {\r\n  0%{\r\n    background:#ffdf5d\r\n  }\r\n}\r\n<\/code><\/pre>\n<\/p><\/div>\n<div class=\"tab-pane\" id=\"j6\" role=\"tabpanel\">\n<pre><code class=\"language-html\">&lt;script&gt;\r\ndocument.addEventListener(&quot;DOMContentLoaded&quot;, function() {\r\n\r\n  var clipboard = new ClipboardJS(&#39;.copy-btn&#39;);\r\n\r\n  clipboard.on(&#39;success&#39;, function(e) {\r\n    var originalText = e.trigger.innerText;\r\n    var copyArea = document.querySelector(&quot;.copy-area&quot;);\r\n\r\n    e.trigger.innerText = 'Copying!';    \r\n    copyArea.classList.add(&quot;flash&quot;);\r\n    \r\n    setTimeout(function () {\r\n\t  e.trigger.innerText = originalText;\r\n      copyArea.classList.remove(&quot;flash&quot;);\r\n    }, 1500);\r\n    \r\n    e.clearSelection();\r\n  });\r\n\r\n  clipboard.on(&#39;error&#39;, function(e) {\r\n    console.error(&#39;Action:&#39;, e.action);\r\n    console.error(&#39;Trigger:&#39;, e.trigger);\r\n  });\r\n});\r\n&lt;\/script&gt;\r\n<\/code><\/pre>\n<\/p><\/div>\n<\/p><\/div>\n<\/div>\n<h3 class=\"highlight\">Flicker Effect on Copy<\/h3>\n<p>For a more futuristic vibe, this animation makes the copied text flicker momentarily, simulating a high-tech data transfer. When the copy action is triggered, the text briefly flashes, adding a touch of visual drama to the process. This effect is perfect if you want to give your interface a tech-savvy, modern feel. The flicker is quick and subtle, providing instant feedback without overwhelming the user.<\/p>\n<style>.copy-container{position:relative;display:inline-block;margin:20px}.copy-area-2{padding:10px;border:1px solid #ccc;width:100%}.flicker{animation:.1s infinite alternate flicker}@keyframes flicker{0%,100%{opacity:1}50%{opacity:.5}}<\/style>\n<p><script>document.addEventListener(\"DOMContentLoaded\",function(){var e=new ClipboardJS(\".copy-btn-7\");e.on(\"success\",function(e){var r=e.trigger.innerText,n=document.querySelector(\".copy-area-2\");e.trigger.innerText=\"Copying!\",n.classList.add(\"flicker\"),setTimeout(function(){e.trigger.innerText=r,n.classList.remove(\"flicker\")},1500),e.clearSelection()}),e.on(\"error\",function(e){console.error(\"Action:\",e.action),console.error(\"Trigger:\",e.trigger)})});<\/script><\/p>\n<div class=\"card-body\">\n<ul class=\"nav nav-tabs nav-tabs-custom\" role=\"tablist\">\n<li class=\"nav-item\"><a class=\"nav-link active\" data-bs-toggle=\"tab\" href=\"#a7\" role=\"tab\">Animation<\/a><\/li>\n<li class=\"nav-item\"><a class=\"nav-link\" data-bs-toggle=\"tab\" href=\"#h7\" role=\"tab\">HTML<\/a><\/li>\n<li class=\"nav-item\"><a class=\"nav-link\" data-bs-toggle=\"tab\" href=\"#c7\" role=\"tab\">CSS<\/a><\/li>\n<li class=\"nav-item\"><a class=\"nav-link\" data-bs-toggle=\"tab\" href=\"#j7\" role=\"tab\">JavaScript<\/a><\/li>\n<\/ul>\n<div class=\"tab-content\">\n<div class=\"tab-pane border p-3 active\" id=\"a7\" role=\"tabpanel\">\n<div class=\"copy-container\">\n<div class=\"copy-area-2\">The rusty swing set creaked a lonely lullaby in the twilight, shadows lengthening like grasping fingers across the dew-kissed grass. A lone dandelion seed, adrift on the breeze, whispered secrets of faraway fields, of dandelion suns and galaxies spun from fluff. Somewhere, beyond the veil of dusk, a coyote laughed, echoing through the stillness like a forgotten memory.<\/div>\n<\/div>\n<p><button class=\"btn btn-info btn-lg copy-btn-7\" data-clipboard-target=\".copy-area-2\">Copy Text<\/button>\n\t\t<\/div>\n<div class=\"tab-pane\" id=\"h7\" role=\"tabpanel\">\n<pre><code class=\"language-html\">&lt;div class=&quot;copy-container&quot;&gt;\r\n  &lt;div class=&quot;copy-area&quot;&gt;The rusty swing set creaked a lonely lullaby in the twilight, shadows lengthening like grasping fingers across the dew-kissed grass. A lone dandelion seed, adrift on the breeze, whispered secrets of faraway fields, of dandelion suns and galaxies spun from fluff. Somewhere, beyond the veil of dusk, a coyote laughed, echoing through the stillness like a forgotten memory.&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n&lt;button class=&quot;copy-btn&quot; data-clipboard-target=&quot;.copy-area&quot;&gt;Copy Text&lt;\/button&gt;\r\n<\/code><\/pre>\n<\/p><\/div>\n<div class=\"tab-pane\" id=\"c7\" role=\"tabpanel\">\n<pre><code class=\"language-css\">.copy-container {\r\n  position: relative;\r\n  display: inline-block;\r\n  margin: 20px;\r\n}\r\n.copy-area {\r\n  border: 1px solid #ccc;\r\n  width: 100%;\r\n}\r\n.flicker {\r\n  animation: flicker 0.1s infinite alternate;\r\n}\r\n@keyframes flicker {\r\n  0%, 100% { opacity: 1; }\r\n  50% { opacity: 0.5; }\r\n}\r\n<\/code><\/pre>\n<\/p><\/div>\n<div class=\"tab-pane\" id=\"j7\" role=\"tabpanel\">\n<pre><code class=\"language-html\">&lt;script&gt;\r\ndocument.addEventListener(&quot;DOMContentLoaded&quot;, function() {\r\n\r\n  var clipboard = new ClipboardJS(&#39;.copy-btn&#39;);\r\n\r\n  clipboard.on(&#39;success&#39;, function(e) {\r\n    var originalText = e.trigger.innerText;\r\n    var copyArea = document.querySelector(&quot;.copy-area&quot;);\r\n\r\n    e.trigger.innerText = 'Copying!';    \r\n    copyArea.classList.add(&quot;flicker&quot;);\r\n    \r\n    setTimeout(function () {\r\n\t  e.trigger.innerText = originalText;\r\n      copyArea.classList.remove(&quot;flicker&quot;);\r\n    }, 1500);\r\n    \r\n    e.clearSelection();\r\n  });\r\n\r\n  clipboard.on(&#39;error&#39;, function(e) {\r\n    console.error(&#39;Action:&#39;, e.action);\r\n    console.error(&#39;Trigger:&#39;, e.trigger);\r\n  });\r\n});\r\n&lt;\/script&gt;\r\n<\/code><\/pre>\n<\/p><\/div>\n<\/p><\/div>\n<\/div>\n<h3 class=\"highlight\">Conclusion<\/h3>\n<p>Animations can play a crucial role in enhancing user experience by providing clear and satisfying feedback for actions like copying text. In this post, we explored several creative ways to incorporate animations using <strong>Clipboard.js<\/strong>\u2014from simple text changes and glowing effects to more dynamic animations like ripples and flickers. These small touches can make your web application feel more polished and engaging.<\/p>\n<p>By leveraging Clipboard.js\u2019s lightweight and easy-to-use functionality, you can implement these animations seamlessly. Whether you&#39;re aiming for a subtle confirmation or a more elaborate effect, the possibilities are endless when it comes to creating visually appealing and interactive clipboard actions.<\/p>\n<p>We hope these examples inspire you to experiment with animations in your projects and give users that extra sense of delight when they interact with your content. Happy coding!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Interactive animations can greatly enhance user experience, especially when it comes to small actions like copying text. Visual feedback lets users know that their action was successful, and creative animations can make your web application stand out. In this blog post, we\u2019ll explore various animations that provide delightful feedback to users when they click a [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":754,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1,3],"tags":[],"class_list":["post-753","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","category-javascript","wpautop"],"_links":{"self":[{"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/posts\/753","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/comments?post=753"}],"version-history":[{"count":4,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/posts\/753\/revisions"}],"predecessor-version":[{"id":771,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/posts\/753\/revisions\/771"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/media\/754"}],"wp:attachment":[{"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/media?parent=753"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/categories?post=753"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/tags?post=753"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}