webkul/micron

a [μ] microInteraction library built with CSS Animations and controlled by JavaScript Power

Check Interactive Doc on Website.

---

Introduction

Micron.JS is a micro interaction library which can be used to add Interactions to different DOM Elements. Micron.JS animates an element using CSS power and the interactive behaviours are controlled by JavaScript.

Micron.JS is easy to adapt and can bring interactions to life using html5 data attributes or a chain of JavaScript methods.

Getting Started

To get started with Micron.JS, you need to include both micron.min.css * (which have all ready to use interaction animations) and micron.min.js If you don't need all the available interactions, you can simply include the respective *.min.css file only.

Installation

Compiled CSS and JavaScript minified files can be directly linked from UNPKG CDN or Micron.JS can be included within your workflow using your favorite package managers as well.

Link from UNPKG CDN

Include both the Micron CSS and JavaScript files in the header section of your document.

<link href="https://unpkg.com/[email protected]/dist/css/micron.min.css" type="text/css" rel="stylesheet">
<script src="https://unpkg.com/[email protected]/dist/script/micron.min.js" type="text/javascript"></script>

Package Managers

You can use either npm or bower to get the Micron.JS package.

Copy and Paste the command below in your terminal to get package with npm -

npm install webkul-micron

Load the package with the code below:

const micron = require('webkul-micron');

Copy and Paste the command below in your terminal to get package with bower -

bower install webkul-micron

Usage

Micron JS is very easy and quick to use.

Adding an Interaction

Add the data-micron="interaction" attribute to the respective element and Voila! you are already there.

Example Code

<a href="#!" class="button" data-micron="bounce">Label</a>

Controlling Duration

Micron Interactions defaults to ".45" seconds. Add the data-micron-duration="number" attribute to control the duration of the defined interaction.

Example Code

<a href="#!" class="button" data-micron="bounce" data-micron-duration=".95">Label</a>

Controlling Timing or Ease

Micron Interactions defaults to "ease-in-out". Add the data-micron-timing="@type" attribute to control the easing of the defined interaction.

For now, @type only supports the easings mentioned below-

linear

ease-in

ease-out

ease-in-out

Example Code

<a href="#!" class="button" data-micron="bounce" data-micron-timing="ease-in">Label</a>

Bind Interaction

Add data-micron-bind="true" & data-micron-id="name" to the defined triggering element, and interaction will be applied to the element which reference to the defined id attribute.

Example Code

<a href="#!" class="button" data-micron="bounce" data-micron-bind="true" data-micron-id="me">Label</a>
<a href="#!" class="button" id="me">Binded</a>

Access inside JavaScript

Call micron chained methods to apply interactions to any DOM Element, right in your custom block of JavaScript Code.

micron.getEle("").interaction("").duration("").timing("");

Pass an argument with selector name which can either be id or a class to getEle() method.

Pass an argument with interaction name to interaction() method.

Pass an argument which is a number to duration() method.

Pass an argument with type of ease to timing() method.

Example Code

function myFunc(){
    micron.getEle("#me").interaction("bounce").duration(".45").timing("ease-out");
 }

//Call Interaction
myFunc();

Interactions

Currently, Micron.JS supports the interactions mentioned below, head back to the homepage to see all interactions in the real action.

data-micron="shake"

data-micron="fade"

data-micron="jelly"

data-micron="bounce"

data-micron="tada"

data-micron="groove"

data-micron="swing"

data-micron="squeeze"

data-micron="flicker"

data-micron="jerk"

data-micron="blink"

data-micron="pop"

Customization

You can even add your very own css interaction to Micron.JS.

First include the code mentioned below in your css file.

.mjs-linear{animation-timing-function:cubic-bezier(0,0,1,1)}.mjs-ease-in{animation-timing-function:cubic-bezier(.4,0,1,1)}.mjs-ease-out{animation-timing-function:cubic-bezier(0,0,.2,1)}.mjs-ease-in-out{animation-timing-function:cubic-bezier(.4,0,.2,1)}

Create a class with .mjs- prefix. Call the keyframe css animation inside it. Use the interaction with your class name without .mjs- prefix.

Example Code

 /*Define a Class*/
 .mjs-custom{
    animation: custom-action;
 }

 @keyframes custom-action{
    from { . . . }
    to { . . . }
 }

Now use interaction with data-micron="custom"

Credits

© Copyright 2018 Webkul Software, All rights reserved.

micron's Issues

Using micron when "hovering" a respective element

Hello,
Is there a way to use micron when hovering a respective element (without using js) by using an attribute like triggering-micron="hover" ... and then using "visited" or "active" ... ?
best

great idea btw !

Docs site issue on mobile

All of the examples on the docs page cause my Chrome browser on Android to jump to the top of the page. (I know that the Micron library itself works on mobile because all of the examples on the main webpage work properly and don't exhibit this behavior.) The behavior in question can be reproduced by a desktop version of Chrome when placed in mobile emulation mode via DevTools.

I did a little digging and according to the HTML5 standard describing how to navigate to a fragment, an empty fragment should refer to the top of the document.

1. Apply the URL parser algorithm to the URL, and let fragid be the fragment component of the resulting URL record.
2. If fragid is the empty string, then the indicated part of the document is the top of the document; stop the algorithm here.

(More curious, then, is why in desktop mode Chrome doesn't do the same thing.)

Therefore, any anchor tag that resembles <a href="#"></a> is at risk of sending the viewport to the top of the document.

Not working as advertised!

Hello and thank you for sharing your work!

Reading through the announcement on the home page one would expect micron to be a dead easy way to add simple animations (Just add data attributes to DOM/SVG elements) amd voila!

<link href="https://unpkg.com/[email protected]/dist/css/micron.min.css" type="text/css" rel="stylesheet">
<script src="https://unpkg.com/[email protected]/dist/script/micron.min.js" type="text/javascript"></script>

Went quickly through the docs, tried a couple of examples and nothing works!
I even went ahead and copied the custom CSS from the demo page but things still did not work (BTW, No mention of any specific CSS. I.e other than 'micron.min.css' ).

The way I see it, the value of micron is supposed to be ease of use. If this is the case, a more thorough and tested walk through would go a long way in promoting micron.

Here's a link to my testing of micron:
https://jsfiddle.net/7gbsnvLf/
Could you be nice and point out what's missing for it to work (I'm using the latest Chrome on a Windows 10 pro-machine)

Thank you again and good luck!

console.log in minified distribution file

Really cool project!

IMO the console.log() calls in micron/dist/script/micron.min.js should be removed and if something hasn't been set up correctly, it just fails silently. Will save some KBs as well.

Happy to raise a PR if you'd like 😃

No support for iPhone Safari?

Going to the example page on iPhone 7, iOS 11 Safari, None on the grid of examples do anything on press.

Event listeners don't fire again after firing once

When I add the data-micron attribute to an element, the event listeners I attached to the element only fire once.

Latest NPM Install Contains Vulnerabilities

After installing this package, I ran npm audit fix to resolve any issue. High vulnerabilities were fixed but some dependencies are not resolved:

=== npm audit security report ===


                                Manual Review
            Some vulnerabilities require your attention to resolve

         Visit https://go.npm.me/audit-guide for additional guidance


 Moderate        Prototype Pollution

 Package         hoek

 Patched in      > 4.2.0 < 5.0.0 || >= 5.0.3

 Dependency of   webkul-micron

 Path            webkul-micron > gulp-less > less > request > hawk > boom >
                 hoek

 More info       https://npmjs.com/advisories/566


 Moderate        Prototype Pollution

 Package         hoek

 Patched in      > 4.2.0 < 5.0.0 || >= 5.0.3

 Dependency of   webkul-micron

 Path            webkul-micron > gulp-less > less > request > hawk >
                 cryptiles > boom > hoek

 More info       https://npmjs.com/advisories/566


 Moderate        Prototype Pollution

 Package         hoek

 Patched in      > 4.2.0 < 5.0.0 || >= 5.0.3

 Dependency of   webkul-micron

 Path            webkul-micron > gulp-less > less > request > hawk > hoek

 More info       https://npmjs.com/advisories/566


 Moderate        Prototype Pollution

 Package         hoek

 Patched in      > 4.2.0 < 5.0.0 || >= 5.0.3

 Dependency of   webkul-micron

 Path            webkul-micron > gulp-less > less > request > hawk > sntp >
                 hoek

 More info       https://npmjs.com/advisories/566

found 4 moderate severity vulnerabilities in 24674 scanned packages
 4 vulnerabilities require manual review. See the full report for details.

I am unsure if this packaging for NPM needs to be fixed at this level.

How about receiving parent node?

Hi.

It would be better to receive parent node as a second argument, I think.
This change will be beneficial for those who use web application framework / library such as Angular, React, Vue and so on.

micron.getEle("", parentNode).interaction("").duration("").timing("")

// and
function getEle(query, parentNode = document) {
 //
}