Adding Animation Effects When Using Clipboard.js
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’ll explore various animations that provide delightful feedback to users when they click a "Copy" button. We'll implement these effects using Clipboard.js, a simple and powerful JavaScript library that makes copying text to the clipboard effortless.
What is Clipboard.js?
Clipboard.js 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.
In this post, we'll use Clipboard.js to trigger various animations, giving users instant feedback when they copy content. Whether it'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.
Before We Get Started
Before implementing any of the animations, you'll need to include the Clipboard.js 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:
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.11/clipboard.min.js"></script>
This script ensures that our copy functionality will work seamlessly. Now that we have Clipboard.js ready to go, let's dive into the animations!
Button Text Change on Copy
This simple yet effective animation provides immediate feedback by changing the button text to "Copied" 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’s perfect for minimalistic designs where you want functionality with a clean, straightforward approach.
<button class="copy-btn" data-clipboard-text="Text to copy">Copy</button>
<script>
document.addEventListener("DOMContentLoaded", function() {
var clipboard = new ClipboardJS('.copy-btn');
clipboard.on('success', function(e) {
var originalText = e.trigger.innerText;
e.trigger.innerText = 'Copied!';
setTimeout(function() {
e.trigger.innerText = originalText;
}, 2000);
e.clearSelection();
});
clipboard.on('error', function(e) {
console.error('Action:', e.action);
console.error('Trigger:', e.trigger);
});
});
</script>
Ripple Effect on Copy
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.
<button class="copy-btn" data-clipboard-text="Text to copy">Copy</button>
.copy-btn .ripple {
position: absolute;
background: rgba(255, 255, 255, 0.5);
border-radius: 50%;
width: 20px;
height: 20px;
transform: scale(0);
animation: ripple-effect 0.6s linear;
}
@keyframes ripple-effect {
to {
transform: scale(20);
opacity: 0;
}
}
<script>
document.addEventListener("DOMContentLoaded", function() {
var clipboard = new ClipboardJS('.copy-btn');
clipboard.on('success', function(e) {
var button = e.trigger;
var ripple = document.createElement("span");
ripple.classList.add("ripple");
var rect = button.getBoundingClientRect();
var x = e.clientX - rect.left;
var y = e.clientY - rect.top;
ripple.style.left = x + "px";
ripple.style.top = y + "px";
button.appendChild(ripple);
setTimeout(() => ripple.remove(), 600);
e.clearSelection();
});
});
</script>
Fading "Copied" Message
This animation adds a smooth, subtle visual cue by displaying a "Copied" 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’s 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.
<div class="copy-container">
<button class="copy-btn" data-clipboard-text="Text to copy">Copy</button>
</div>
.copy-btn {
position: relative;
}
.copy-btn::after {
content: "Copied!";
position: absolute;
top: -30px;
left: 50%;
transform: translateX(-50%);
font-size: 14px;
color: #28a745;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease-out;
}
@keyframes moveUpFadeOut {
0% {
transform: translateX(-50%) translateY(0);
opacity: 1;
}
100% {
transform: translateX(-50%) translateY(-20px);
opacity: 0;
}
}
.copy-btn.show-msg::after {
opacity: 1;
animation: moveUpFadeOut 1s forwards;
}
<script>
document.addEventListener("DOMContentLoaded", function() {
var clipboard = new ClipboardJS('.copy-btn');
clipboard.on('success', function(e) {
e.trigger.classList.add('show-msg');
setTimeout(function() {
e.trigger.classList.remove('show-msg');
}, 2000);
e.clearSelection();
});
clipboard.on('error', function(e) {
console.error('Action:', e.action);
console.error('Trigger:', e.trigger);
});
});
</script>
Slide-in Confirmation from the Top
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 "Copy" 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't miss the confirmation, without disrupting the flow of the page.
<div class="global-copied-msg">Copied!</div>
<div class="copy-container">
<button class="copy-btn" data-clipboard-text="Text to copy">Copy</button>
</div>
.global-copied-msg {
position: fixed;
top: -50px;
left: 50%;
transform: translateX(-50%);
background-color: #28a745;
color: white;
padding: 10px 20px;
font-size: 16px;
border-radius: 4px;
opacity: 0;
pointer-events: none;
z-index: 1000;
transition: opacity 0.3s ease;
}
@keyframes slideDownAndUp {
0% {
top: -50px;
opacity: 0;
}
10% {
top: 20px;
opacity: 1;
}
90% {
top: 20px;
opacity: 1;
}
100% {
top: -50px;
opacity: 0;
}
}
.show-global-msg {
animation: slideDownAndUp 2s forwards;
}
<script>
document.addEventListener("DOMContentLoaded", function() {
var clipboard = new ClipboardJS('.copy-btn');
clipboard.on('success', function(e) {
var globalMsg = document.querySelector('.global-copied-msg');
globalMsg.classList.add('show-global-msg');
setTimeout(function() {
globalMsg.classList.remove('show-global-msg');
}, 2000);
e.clearSelection();
});
clipboard.on('error', function(e) {
console.error('Action:', e.action);
console.error('Trigger:', e.trigger);
});
});
</script>
Scanner Effect on Copy
This eye-catching animation mimics a high-tech "scanner" 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's a great option for interfaces that aim to provide a more interactive and fun user experience.
<div class="copy-container">
<div id="scanner"></div>
<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>
</div>
<button class="copy-btn" data-clipboard-target=".copy-area">Copy Text</button>
.copy-container {
position: relative;
display: inline-block;
margin: 20px;
}
.copy-area {
border: 1px solid #ccc;
width: 100%;
}
.scanner-bar {
width: 5px;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: transparent;
animation: scan 1.5s linear 1;
animation-fill-mode: forwards;
}
.scanner-bar::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 25px;
height: 100%;
background: linear-gradient(to right, transparent, #b0d0ec);
}
@keyframes scan {
0% {
left: 0;
}
100% {
left: calc(100% - 25px);
}
}
<script>
document.addEventListener("DOMContentLoaded", function() {
var clipboard = new ClipboardJS('.copy-btn');
clipboard.on('success', function(e) {
var originalText = e.trigger.innerText;
var copyArea = document.querySelector("#scanner");
e.trigger.innerText = 'Copying!';
copyArea.classList.add("scanner-bar");
setTimeout(function () {
e.trigger.innerText = originalText;
copyArea.classList.remove("scanner-bar");
}, 1500);
e.clearSelection();
});
clipboard.on('error', function(e) {
console.error('Action:', e.action);
console.error('Trigger:', e.trigger);
});
});
</script>
Background Flash on Copy
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's an eye-catching way to grab the user's attention, making it clear that the action was completed without needing any additional text or icons.
<div class="copy-container">
<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>
</div>
<button class="copy-btn" data-clipboard-target=".copy-area">Copy Text</button>
.copy-container {
position: relative;
display: inline-block;
margin: 20px;
}
.copy-area {
border: 1px solid #ccc;
width: 100%;
}
.flash{
animation:a 1.5s
}
@keyframes a {
0%{
background:#ffdf5d
}
}
<script>
document.addEventListener("DOMContentLoaded", function() {
var clipboard = new ClipboardJS('.copy-btn');
clipboard.on('success', function(e) {
var originalText = e.trigger.innerText;
var copyArea = document.querySelector(".copy-area");
e.trigger.innerText = 'Copying!';
copyArea.classList.add("flash");
setTimeout(function () {
e.trigger.innerText = originalText;
copyArea.classList.remove("flash");
}, 1500);
e.clearSelection();
});
clipboard.on('error', function(e) {
console.error('Action:', e.action);
console.error('Trigger:', e.trigger);
});
});
</script>
Flicker Effect on Copy
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.
<div class="copy-container">
<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>
</div>
<button class="copy-btn" data-clipboard-target=".copy-area">Copy Text</button>
.copy-container {
position: relative;
display: inline-block;
margin: 20px;
}
.copy-area {
border: 1px solid #ccc;
width: 100%;
}
.flicker {
animation: flicker 0.1s infinite alternate;
}
@keyframes flicker {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
<script>
document.addEventListener("DOMContentLoaded", function() {
var clipboard = new ClipboardJS('.copy-btn');
clipboard.on('success', function(e) {
var originalText = e.trigger.innerText;
var copyArea = document.querySelector(".copy-area");
e.trigger.innerText = 'Copying!';
copyArea.classList.add("flicker");
setTimeout(function () {
e.trigger.innerText = originalText;
copyArea.classList.remove("flicker");
}, 1500);
e.clearSelection();
});
clipboard.on('error', function(e) {
console.error('Action:', e.action);
console.error('Trigger:', e.trigger);
});
});
</script>
Conclusion
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 Clipboard.js—from 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.
By leveraging Clipboard.js’s lightweight and easy-to-use functionality, you can implement these animations seamlessly. Whether you'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.
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!
