a microInteraction library built with CSS Animations and driven by JavaScript Power
npm install webkul-micron
Micron.JS is easy to adapt and can bring interactions to life using html5 data attributes or a chain of JavaScript methods.
micron.min.css * (which have all ready to use interaction animations) and micron.min.js*.min.css file only.``html`
Copy and Paste the command below in your terminal to get package with npm -
`cli`
npm install webkul-micron
Load the package with the code below:
`javascript`
const micron = require('webkul-micron');
Copy and Paste the command below in your terminal to get package with bower -
`cli`
bower install webkul-micron
attribute to the respective element and Voila! you are already there.Example Code
`html
Label
`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
`html
Label
`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-linearease-inease-outease-in-outExample Code
`html
Label
`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
`html
Label
Binded
`Access inside JavaScript
Call micron chained methods to apply interactions to any DOM Element, right in your custom block of JavaScript Code.`javascript
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
`javascript
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.
`css
.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
`css
/Define a Class/
.mjs-custom{
animation: custom-action;
} @keyframes custom-action{
from { . . . }
to { . . . }
}
`Now use interaction with
data-micron="custom"`