I think it’s safe to say that micro-interactions are cool. We – web people – universally all enjoy them. And no matter if you’re noticing them or not, they provide a significant user experience improvement. By making your website or web tool come to life subtly and in a friendly way, they simply make the user enjoy the whole interaction a tiny bit more.
In that spirit, I want to give you a quick micro-interactions tutorial and show you how to create a cool “Like” button for your site. With minimal code. Here it is in action:
But first:
Why bother with micro-interactions in the first place?
I’m not going to try to convince you too heavily here, but let’s just look at a couple of things.
Micro-interactions have been around for a while – enough so that they even have full books written about them. Plus, there have been many experiments and studies looking into how useful and effective they actually are.
One of the most notable research houses, the Nielsen Norman Group, looked at micro-interactions more closely in 2018. As per their conclusions, micro-interactions have proven to, among other things, improve user experience by encouraging engagement, and communicating brand.
In short, micro-interactions can be really beneficial if used right and, also, not too heavily. Today, we’re going to show you one simple example of a micro-interaction in action:
Micro-interactions tutorial: The markup and basic CSS of our thumbs-up button
💡 Note; at the bottom, we have some options for you that don’t involve writing code by hand.
First of all, we need some good old HTML and CSS magic to make it work. The structure is pretty straightforward.
We are going to use an SVG tag for the like icon itself – this is from Font Awesome; you can find most of the icons here. Just to adjust the width and height attributes of the SVG tag, we’re going to use the HTML below:
<html>
<body>
<a href="#" class="like-button">
<svg width="20" height="20" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M320 1344q0-26-19-45t-45-19q-27 0-45.5 19t-18.5 45q0 27 18.5 45.5t45.5 18.5q26 0 45-18.5t19-45.5zm160-512v640q0 26-19 45t-45 19h-288q-26 0-45-19t-19-45v-640q0-26 19-45t45-19h288q26 0 45 19t19 45zm1184 0q0 86-55 149 15 44 15 76 3 76-43 137 17 56 0 117-15 57-54 94 9 112-49 181-64 76-197 78h-129q-66 0-144-15.5t-121.5-29-120.5-39.5q-123-43-158-44-26-1-45-19.5t-19-44.5v-641q0-25 18-43.5t43-20.5q24-2 76-59t101-121q68-87 101-120 18-18 31-48t17.5-48.5 13.5-60.5q7-39 12.5-61t19.5-52 34-50q19-19 45-19 46 0 82.5 10.5t60 26 40 40.5 24 45 12 50 5 45 .5 39q0 38-9.5 76t-19 60-27.5 56q-3 6-10 18t-11 22-8 24h277q78 0 135 57t57 135z"/></svg>
</svg>
</a>
</body>
</html>
Now for the CSS, we’re going to go real basic. What we want to happen here is to give a nice look to our like button and have everything nicely centered on the screen. We already know that we’re going to toggle a class upon click (the active class), so we need to account for that. We’re going to fill the icon with a blue color when active and dark-gray when not:
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.like-button {
display: flex;
align-items: center;
justify-content: center;
}
.like-button.active {
-webkit-animation: pop 0.9s both;
animation: pop 0.9s both;
}
.like-button svg {
opacity: 1;
}
.like-button svg path {
fill: #333;
transition: fill .4s ease-out;
}
.like-button.active svg path {
fill: #2196f3;
}
Another thing we want here is the pop animation used when the button becomes active, so we’re going to add that to our CSS file:
@-webkit-keyframes pop {
0% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
30% {
-webkit-transform: scale3d(1.25, 0.75, 1);
transform: scale3d(1.25, 0.75, 1);
}
40% {
-webkit-transform: scale3d(0.75, 1.25, 1);
transform: scale3d(0.75, 1.25, 1);
}
50% {
-webkit-transform: scale3d(1.15, 0.85, 1);
transform: scale3d(1.15, 0.85, 1);
}
65% {
-webkit-transform: scale3d(0.95, 1.05, 1);
transform: scale3d(0.95, 1.05, 1);
}
75% {
-webkit-transform: scale3d(1.05, 0.95, 1);
transform: scale3d(1.05, 0.95, 1);
}
100% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
@keyframes pop {
0% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
30% {
-webkit-transform: scale3d(1.25, 0.75, 1);
transform: scale3d(1.25, 0.75, 1);
}
40% {
-webkit-transform: scale3d(0.75, 1.25, 1);
transform: scale3d(0.75, 1.25, 1);
}
50% {
-webkit-transform: scale3d(1.15, 0.85, 1);
transform: scale3d(1.15, 0.85, 1);
}
65% {
-webkit-transform: scale3d(0.95, 1.05, 1);
transform: scale3d(0.95, 1.05, 1);
}
75% {
-webkit-transform: scale3d(1.05, 0.95, 1);
transform: scale3d(1.05, 0.95, 1);
}
100% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
The “interaction” part of this micro-interactions tutorial
Now that we’ve got the basic styling out of the way, it’s time to handle the actual interactions – that means JavaScript!
First of all, we’re going to need a JavaScript function that generates a random integer between a given interval (a minimum and a maximum):
function randomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
Next up, we’re going to need another function that randomly returns +1 or -1 so we can have random negative or positive values:
function plusOrMinus() {
return Math.random() < 0.5 ? -1 : 1;
}
Now for the actual interaction handling; let’s look at the code to explain it properly:
- First up, we’re going to save our button in a variable and add a click event listener to it.
- When the button is clicked, we’re going to add a preventDefault() function so that we’re sure that nothing unwanted happens.
- After that, we’re going to add our active class to the button, which we previously styled with a blue color via CSS.
- Then we’re going to run the generateClones() function (that isn’t defined yet), passing our button as a parameter via this.
let button = document.querySelector(".like-button");
button.addEventListener("click", function(e) {
e.preventDefault();
this.classList.toggle("active");
generateClones(this);
});
Now let’s define the generateClones() function and run through the following steps with it:
- First, let’s decide on a random number of clones. We’re going to instantiate between two and four clones for the icon. We’re going to use the previously defined randomInt() function.
- Then, for each clone, we’re going to use the SVG tag inside our button as a “model” and use the cloneNode(true) JavaScript function to clone it into a new variable. We’re also going to define a size between 5 and 16 for our clone using the random integer generator function.
- Next up, we’re going to add our clones to the button, set their width and height with the previously generated number, and make their position absolute so that we can move them around independently from the button.
- Another thing we need is a transition for our clones, so they don’t just pop into their new place when clicking.
- Now, for adding the actual transformations that will move our icon around, we’re going to go a bit crazy. We want our clones to move from the center of our button outwards randomly. Using a combination of our randomInt() and plusOrMinus() functions, we’re going to move our clones in the XY axis with the translate3d CSS property. We’re also going to use a “hack”, as our transition wouldn’t apply otherwise. So adding a simple setTimeout() function is going to help us achieve that. At the same time, we’re going to move the opacity to 0, making the clones disappear.
- Deleting our clones. We have to clear up the DOM after we’re done with all the jazz. So we need another setTimeout() function that’s going to remove our clones from the DOM after one second.
generateClones(button) {
// 1. Generate clones and iterate over the set number
let clones = randomInt(2, 4);
for (let it = 1; it <= clones; it++) {
// 2. Get the SVG tag clone in a variable and generate a random size
let clone = button.querySelector("svg").cloneNode(true),
size = randomInt(5, 16);
// 3. Add our clone to the button and change its' width/height/position
button.appendChild(clone);
clone.setAttribute("width", size);
clone.setAttribute("height", size);
clone.style.position = "absolute";
// 4. Add some flashy transitions
clone.style.transition =
"transform 0.5s cubic-bezier(0.12, 0.74, 0.58, 0.99) 0.3s, opacity 1s ease-out .5s";
// 5. Animate our icon outwards with a setTimeout function so that CSS complies.
let animTimeout = setTimeout(function() {
clone.style.transform =
"translate3d(" +
plusOrMinus() * randomInt(10, 25) +
"px," +
plusOrMinus() * randomInt(10, 25) +
"px,0)";
clone.style.opacity = 0;
clearTimeout(animTimeout);
}, 1);
// 6. Removing the clones after 0.9 seconds
let removeNodeTimeout = setTimeout(function() {
clone.parentNode.removeChild(clone);
clearTimeout(removeNodeTimeout);
}, 900);
}
}
That’s it! We’ve made it through the end! Down below you’ll find the CodePen example:
Thanks for going through this!
Other options to add micro-interactions to WordPress
If writing code manually isn’t entirely your thing, there are actually quite a handful of WordPress plugins that you can use to get micro-interactions onto your site without needing to worry about how it all works under the hood.
First, you can use the Animate It! plugin to animate pretty much any element on your pages using CSS3.
For example, you can add a button, or a piece of text, and then set it to animate in a certain way on click.
Here’s an example of what the plugin can do – video 📹.
Another plugin, and one of our editor’s favorites, is Shortcodes Ultimate.
Among a whole plethora of different shortcodes, there’s one for simple animations. There are some presets as to how the animation should behave, and you can put pretty much anything inside the block that’s going to get animated.
Here’s an example of an animated button:
These two plugins should give you more than enough options to animate certain elements on your pages and make them pop a little more when the user is interacting with them. Of course, you don’t want to go overboard with those, but giving the user an additional nudge when they’re interacting with your key call to actions might help a lot.
What do you think of micro-interactions, are you considering putting this micro-interactions tutorial to good use and adding something to your site? Let us know in the comments.
The article was originally published on CodeinWP.com
Top comments (0)