JavaScript Library For Interactive CSS3 Animations – micron.js

Category: Animation , Javascript , Recommended | January 23, 2018
Author: webkul
Views Total: 270
Official Page: Go to website
Last Update: January 23, 2018
License: MIT

Preview:

JavaScript Library For Interactive CSS3 Animations – micron.js

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");

Leave a Reply