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

View on GitHub

Why [μ] micron?

Add Interaction

Choose from ready to use [μ] interactions and add a ‘click’ interaction just using data-micron

Bind Interaction

An element's interaction can easily bind with another element's ‘click’ with data-micron-bind="true"

Control Interaction

Interaction behaviours like effect, speed and ease can be controlled using data-attributes

[μ] Interactions

"shake"
"fade"
"jelly"
"bounce"
"tada"
"groove"
"swing"
"squeeze"
"flicker"
"jerk"
"blink"
"pop"

Add Interaction

Easily add an interaction to the DOM element with data attributes. You can add the click interaction to every element whether it's Button, SVG or a Paper.

Add Interaction to the element with data-micron="interaction"

Control Interaction's duration with data-micron-duration="number"

Control Interaction's timing-function with data-micron-timing="type"

Read Docs

Bind Interaction

Easily bind an interaction defined on DOM element to a different DOM element with just two data attributes.

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

Read Docs

Access Anywhere

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

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

Read Docs

© Copyright 2018 Webkul Software. All rights reserved under MIT License.