JavaScript Library For Interactive CSS3 Animations – micron.js

Preview:

Description:

micron.js a micro interaction library for applying interactive CSS3 animations (controlled by JavaScript) to any DOM element.

Available interactions:

• “shake”
• “fade”
• “jelly”
• “bounce”
• “tada”
• “groove”
• “swing”
• “squeeze”
• “flicker”
• “jerk”
• “blink”
• “pop”

How to use it:

Import the JavaScript and CSS files into the document.

<link href="micron.min.css" rel="stylesheet">
<script src="micron.min.js"></script>

Add an interaction of your choice to the element.

<span data-micron="bounce">
  Element
</span>

Set the duration of the interaction.

<span data-micron="bounce"
      data-micron-duration=".75">
  Element
</span>

Set the easing/timing.

<span data-micron="bounce"
      data-micron-duration=".75"
      data-micron-timing="ease-in">
  Element
</span>

Set the trigger element.

<span data-micron="bounce"
      data-micron-duration=".75"
      data-micron-bind="true" 
      data-micron-id="target">
  Trigger Element
</span>
<span id="target">
  Target Element
</span>

Archive the interaction with JavaScript.

micron.getEle("#el").interaction("bounce").duration(".75").timing("ease-in");

Changelog:

10/25/2018

• Bugfixed