1. Web Design
  2. Motion

How to Quickly Add Microinteractions to Your Website

Scroll to top
Read Time: 2 min

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!

Watch the Micron.js Screencast

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:

<link href="" type="text/css" rel="stylesheet">
<script src="" type="text/javascript"></script>

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.

2. Add a Microinteraction

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

<a href="#" class="demo-button">Default</a>

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.

<a href="#" class="demo-button" data-micron="shake">Default</a>

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
  • fade
  • jelly
  • bounce
  • tada
  • groove
  • swing
  • squeeze
  • flicker
  • jerk
  • blink
  • pop

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

3. Adjust Animation Duration

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


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

4. Adjust Easing Function

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


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:

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):


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

Learn More

Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.