In today’s quick tip I’m going to show you how to add microinteractions to your website using a JavaScript library called micron.js. With micron.js you can add subtle animations to your web page’s elements without having to write the styles yourself–everything is done using data-attributes in your markup. Let’s take a look!

1. Get micron.js

Visit the micron.js homepage and you’ll find, along with some demos, a link to the repo. To get started you’ll need the CSS file and the JavaScript file, the CDN links for which look like this:

 1   2  

Either add these to your page as you see them, or if you’re using a CodePen pen, add the links to the CSS and JavaScript tabs in the pen settings.

Let’s use an anchor element as an example. Take the following:

 1  

Clicking an anchor like this will do absolutely nothing. However, by adding a data-attribute by the name of data-micron, we can add some flair to our anchor.

 1  

Here you’ll see we’ve added the value shake to our attribute. This could have been one of a number of values, all giving us a different interaction:

• shake
• jelly
• bounce
• groove
• swing
• squeeze
• flicker
• jerk
• pop

Now when you click the anchor, you’ll see some visual feedback in the form of our microinteraction.

Adding another data-attribute will allow us to alter the duration of the animation:

 1 data-micron-duration="1" 

The value given is in seconds, so the attribute above would slow the default animation to last one second.

You’re getting the hang of this now, right? Let’s add another attribute to adjust the easing function of the animation.

 1 data-micron-timing="linear" 

Again, a number of familiar values are supported here:

• linear
• ease-in
• ease-out
• ease-in-out

5. Bind to Another Element

We can use micron.js to target elements other than what’s being clicked, this time with two data-attributes:

 1 data-micron-bind="true" data-micron-id="target" 

In this case we say that binding is true, and that we want the animation to take effect on an element with the id of target

Check out the demo below for a collection of all these examples, including the binding (click the bound button and see the red div animate):

Conclusion

Micron.js does even more for microinteractions than we’ve demonstrated in this tutorial, visit the website, get playing, and see for yourself!