Motionia - JS animation library

Motionia

Welcome

Motionia- a lightweight simplified on demand animation library.

With motionia you can animate elements by just one line of code.

lightweight, simple fast & easiest to integrate.

=> motionia("target", "anim");

Getting started

Just add a script path of motionia via JSDELIVR into the head of your project

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

Use motionia in inline script as:

=> motionia("target", "anim");

Target can be any html element.

Elements can be a id , class or body,p etc html parametric element.

anim refers to animation name!

Features

There is a lot of potential in motionia just keep exploring it.

Animations lists

There are 100+ builtin animations + capability to create a lot more..

Appear In

Add In to make a appering anim.

fadeIn

rollIn

slideIn

slitIn

bounceIn

swirlIn

rotateIn

presentIn

presIn

parosIn

flickerIn

tiltIn

swingIn

and a lot more!

Disapper Out

add Out to disappear a element

fadeOut

slideOut

rollOut

slitOut

etc

Wanna customize ?

You can customize above anim easily without writing a long code all you need is just A LINE!!

Make a element slide right by some amount

Use motionia("div", "slideX" , "100px");

That's all!

motionia("target", "slideY" , "100px");

Example

// Animate a element to slide up by 10px

motionia("#div","slideY","10px") 

// px can be % em vh vw etc.

Don't forget to give motionia a star & a share thanks.