A Lightweight, Simple Fast to integrate Animation Library | Motionia

Motionia, Simplified, and lightweight animation library on-demand. This library provides over 100 performance animations that you can choose from to animate any elements and even themes like color and background.

How to make use of it:

1. Download the library and insert the JavaScript motionia.js into the doc.

<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 option to the factor.  Animation names:

motionia(myElement, animationName);

4. Or combine 2 or more animations as follows:

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

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

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

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

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

7. Animate the background of a component.

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 a component.

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

10. Rotate a component by a certain angle.

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

Easy Performant JavaScript Animation Engine, Motionia Plugin/Github

See Demo And Download