How to create JS animations by just 1 line?


# Welcome!

## How to create JS animations by just 1 line?

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");

```

**Source code** [https://github.com/abhiprojectz/motionia](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.

![](https://raw.githubusercontent.com/abhiprojectz/motionia/master/assest/keyframe-challenge-large.gif)

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?

![](https://raw.githubusercontent.com/abhiprojectz/motionia/master/assest/loader-2.gif)


## To make a elemnt slide right by 10px

![](https://raw.githubusercontent.com/abhiprojectz/motionia/master/react-spring.gif)


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

**Use**

``` 
motionia("#div", "slideX" , "10px"); 
```

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");
```

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](https://abhiprojectz.github.io/motionia/)

# At last

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


**If you liked it then do give it a star_**