loading...

How to create JS animations by just 1 line?

abhiprojectz profile image abhiprojectz ・2 min read

Welcome!

Ever wonder to create js animations easily like just in one line of code? Without typing page long css keyframes which often messy and difficult too.

What if you get those animations like by writing nothing more than a line.

Does this feel awesome? I guess YEAH

Motionia - JS builtin ondemand animation library!

Motionia is the answer to get beautiful animations just by its name.

motionia("target","slideIn");

Enter fullscreen mode Exit fullscreen mode

Source code https://github.com/abhiprojectz/motionia

This will create a slide animation with the element appearing in the document!

Just add OUT at the end and you get a slide out animation resulting in disappearing a element out of the document often usefull in modal boxes etc.

Animations base list.

There are 25+ base anims.

fadeIn

rollIn

slideIn

slitIn

bounceIn

swirlIn

rotateIn

presentIn

presIn

parosIn

flickerIn

tiltIn

swingIn

and a lot more!

Wanna customize it?

To make a elemnt slide right by 10px

** No need** to write a page long css keyframes just use a line state the amount & the direction too!

Use

motionia("#div", "slideX" , "10px"); 
Enter fullscreen mode Exit fullscreen mode

Here we specify the direction tp right by 👉 right by slideX and keeping our value to positive just simple css schema.

Isn't it awesome?

Make a element rotate clockwise by 90 degrees!

Use

motionia("div", "rotateX", "90deg");
Enter fullscreen mode Exit fullscreen mode

And the element rotate by 90deg clockwise

There is customization to every listed above anim!

Yeah roughly 20 * 2 * 4 4 *4 *4 = **10240*

ANIMs Just by one line of code!!!

Wanna experiment?

Visit the website!

Motionia tester

At last

Don't forget to give this repo a star & a share!
Thanks

Posted on by:

abhiprojectz profile

abhiprojectz

@abhiprojectz

Developer of Motionia.js .Basically reading in 12th grade. Do follow me on twitter

Discussion

pic
Editor guide