Easy Performant JavaScript Animation Engine – Motionia

Category: Animation , Javascript , Recommended | September 21, 2020
Author:abhiprojectz
Views Total:58 views
Official Page:Go to website
Last Update:September 21, 2020
License:MIT

Preview:

Easy Performant JavaScript Animation Engine – Motionia

Description:

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

How to use it:

1. Download the library and insert the JavaScript motionia.js 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.  Animation names:

  • fadeIn
  • slideIn
  • slitIn
  • puffIn
  • swirlIn
  • rollIn
  • swingIn
  • rotateIn
  • parosIn
  • presentIn
  • presIn
  • explodeIn
  • popIn
  • bounceIn
  • scaleIn
  • flickerIn
  • tiltIn
  • swapIn
  • fadeOut
  • slideOut
  • slitOut
  • puffOut
  • swirlOut
  • rollOut
  • swOutgOut
  • rotateOut
  • parosOut
  • presentOut
  • presOut
  • explodeOut
  • popOut
  • bounceOut
  • scaleOut
  • flickerOut
  • tiltOut
  • swapOut
motionia(myElement, animationName);

4. Or combine 2 or more animations as follows:

motionia(myElement, 'rotateScaleIn');
motionia(myElement, 'flipScaleOut');

5. Determine the direction of the ‘slide’ animation.

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

6. Apply a 3D door open animation to your element.

motionia(myElement, "doorUp");
motionia(myElement, "doorDown");
motionia(myElement, "doorLeft");
motionia(myElement, "doorRight");

7. Animate the background of an element.

motionia(myElement, "bgUp");
motionia(myElement, "bgDown");
motionia(myElement, "bgLeft");
motionia(myElement, "bgRight");

8. Animate the body background.

motionia("body", "popZ");
motionia("body", "scaleZ");

9. Animate the colors of an element.

motionia(myElement, "color", "red", "#000", "teal");

10. Rotate an element by a certain angle.

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

You Might Be Interested In:


Leave a Reply