Micron.js: Create Interactive Buttons and Forms

1/24/18

Micron.js is a brand new library created by Webkul Software that uses CSS and JavaScript to make DOM elements interactive and fun. Lets see an example! Try clicking this button:

First, add the library to your document head like so:

<link href="https://unpkg.com/webkul-micron@1.0.4/dist/css/micron.min.css" type="text/css" rel="stylesheet">
<script src="https://unpkg.com/webkul-micron@1.0.4/dist/script/micron.min.js" type="text/javascript"></script>

Then, this button can be accomplished with the following HTML:

<a class="button" data-micron="jerk">Click Me!</a>

This is just one of 12 interactions that Micron.js provides. See all of them here. We don't just have to use buttons, though, and we can create custom bindings as well. Let's dig deeper into this library!

Making a Form

Let's apply Micron.js to something useful by creating a form. Be sure to include the jQuery library in your head for this example:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Now take a look at the demo. Try clicking submit without filling in one or both of the text inputs.

The form uses the following HTML:

<form id="form">
	<input type="text" name="firstname" placeholder="First Name">
	<input type="text" name="lastname" placeholder="Last Name">
	<input type="submit" value="Submit">
</form>

Then we use JavaScript to handle the form submission like so:

onDocumentReady = function() {
	$("#form").submit(onFormSubmit);
}

onFormSubmit = function(event) {
	$("#form > input[type='text']").each(function(index) {
		//apply a micron interaction if a text input is empty
		if ($(this).val() == "") {
			var name = $(this).attr("name");
			var selector = `#form > input[type='text'][name='${name}']`;
			micron.getEle(selector).interaction("tada").duration(".45").timing("ease-out");
		}
	});
	//prevent form from actually submitting for testing
	event.preventDefault();
}

$(document).ready(onDocumentReady);

The hard part of this is actually finding the element in question with jQuery and getting the proper selector to pass to micron. The easy part is triggering the interaction with this key line:

micron.getEle(selector).interaction("tada").duration(".45").timing("ease-out");

Here, we can customize the duration of the animation and the timing.

Conclusion

Micron.js is certainly not the first of its kind. When I first saw it, CSShake came to mind as a similar DOM animation library. However, Micron.js certainly wins when it comes to customization, as well as possibly default animation smoothness and appeal.

Spread the word about Micron.js! Let us know on Twitter how you could add Micron.js to your website.

Up Next