Watch the Micron.js Screencast
1. Get micron.js
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:
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:
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:
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
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!
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!Translate this post