Easy Performant Animation Engine - Motionia

Easy Performant Animation Engine - Motionia
File Size: 7.06 MB
Views Total: 339
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Motionia is a lightweight, easy-to-use JavaScript CSS3 animation library that provides 100+ performant animations from which you can pick to animate any elements and even attributes such as color and background.

Animations Included:

  • fadeIn
  • rollIn
  • scaleIn
  • slideIn (Default)
  • slitIn
  • swirlIn
  • flipIn
  • bounceIn
  • presIn
  • presentIn
  • parosIn
  • flickerIn
  • slideOut
  • slitOut
  • rollOut
  • bounceOut
  • flickerOut
  • rotateIn
  • swirlOut
  • rotateOut
  • flipOut
  • swingIn
  • swingOut
  • tiltIn
  • tiltOut
  • presIn
  • scaleOut
  • slideInZ
  • puffIn
  • puffOut
  • slideOutZ
  • slideInBlur
  • rollInBlur
  • swirlOutZ
  • slideOutBlur
  • rollOutBlur
  • flickerOut
  • presOut
  • presentOut
  • rippleIn
  • explodeOut
  • blinkMin
  • blinkMax
  • jellyMin
  • jellyMax
  • shakeMin
  • shakeMax
  • wobbleMin
  • wobbleMax
  • vibrateMin
  • vibrateMax
  • bounceMin
  • bounceMax
  • blurIn
  • blurOut
  • flipScaleOut
  • flipScaleIn
  • rotateScaleIn
  • rotateScaleOut
  • popIn
  • shadowIn
  • expandIn
  • popZ
  • focusIn
  • focusInExpand
  • focusOut
  • doorUp
  • doorDown
  • doorLeft
  • doorRight
  • swingUp
  • swingDown
  • swingLeft
  • swingRight
  • bgUp
  • bgDown
  • bgLeft
  • bgRight
  • slideX
  • slideY
  • rotate
  • flip
  • swing
  • scale
  • swap
  • slideZ
  • color

How to use it:

1. Download the library and insert the JavaScript motionia.js (jQuery is bundled) into the document.

<script src="./dist/motionia.js" defer></script>

2. Or load the library from a CDN.

<script src="https://cdn.jsdelivr.net/gh/abhiprojectz/motionia/dist/motionia.js" defer></script>

3. Apply an animation of your choice to the element. That's it.

motionia(myElement, animationName);

4. Animate colors of an element.

motionia(myElement, "color", Color1, Color2, Color3);

5. Rotate or flip an element by a specific angle.

motionia(myElement, "rotate", "90deg");
motionia(myElement, "flip", "90deg");

6. Slide the element up or right by a specified distance.

motionia(myElement, "slideY","10px");
motionia(myElement, "slideX","10px");

This awesome jQuery plugin is developed by abhiprojectz. For more Advanced Usages, please check the demo page or visit the official website.