DEV Community

loading...
Cover image for Motionia.js - On-demand lightweight animation library!

Motionia.js - On-demand lightweight animation library!

abhiprojectz profile image Abhi Developer Updated on ・5 min read

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

Enter fullscreen mode Exit fullscreen mode

@
@
@----------remember------------------@
@
@

Experiment with it here

http://anicode.in/motionia

@
@
@
@
@---------------IMPORTANT!!!!-------@
@
@

Where to get?

Motionia on github

Experiment with it here

Examples & Demos

Visit my codepen for motionia.js examples and demos and to grasp easily what motionia can actually do.

Abhiprojectz on Codepen

Motionia.js - animating the door

Animating backgrounds

Animating lists

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" defer></script>
Enter fullscreen mode Exit fullscreen mode

Use motionia in inline script as:


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

Enter fullscreen mode Exit fullscreen mode

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

shadowIn
popIn
puffIn
blutIn
expandIn
explodeOut

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

Enter fullscreen mode Exit fullscreen mode

Customize intensity of a anim!

Some anim can be minimized or maximized in order to meet our requirements as sometimes we need to gain more ATTENTION of a user!

Just add Min or Max at the end of a anim!

Create a vibrate anim for a element like a button

use:

motionia("#btn","vibrateMax")
motionia("#btn","vibrateMin")
Enter fullscreen mode Exit fullscreen mode

Following anims support min pr max feature.

blink
vibrate
bounce
shake
jelly
wobble
ripple

Mixing 2 anims together!

Yeah, with motionia you can mix one anim to the other. its very simple just mix anims name which is one & first of a kind ,with each other and hola!

Why to mix? Inorder to get a cool amazing animation no need to wrtie a page long CSS KEYFRAMES only 1,2 words name is ENOUGH!

To mix anim suppose make a element rotate and then scale!

motionia("target", "rotateScaleIn")
Enter fullscreen mode Exit fullscreen mode

This will first make the object rotate and then scale it.

Mixing is amazing!! & its CONVERSE is also possible, now Make a object first scale and then rotate!

motionia("target", "scaleRotateIn")
Enter fullscreen mode Exit fullscreen mode

In this way you can multipy the number of above all anims by just Double

Try out: flipScaleIn ,flipScaleOut , slideRotate etc combinations!

Pre built awesome 3D anims.

Suppose you wanna animate a object that similates anim of a door just like a door opens? Imagine it You can animate element by just its Name!

Animate a element as a door opens in UP , DOWN , LEFT , RIGHT

Just add the directions parameters at the end of the anim name!

use:

motionia("#target", "doorUp")
motionia("#target", "doorDown")
motionia("#target", "doorLeft")
motionia("#target", "doorRight")


Enter fullscreen mode Exit fullscreen mode

Animate background of any element!

visit this codepen demo , in that gradients background is taken.

Animating backgrounds

Animate background of any element by just using some basic parameters as direction parameters.

That is just add direction to Move the background in that direction often usefull in making Landscape anims easily by just ONE LINE OF CODE!!

use:

motionia("#target", "bgDown")
motionia("#target", "bgUp")
motionia("#target", "bgLeft")
motionia("#target", "bgRight")
Enter fullscreen mode Exit fullscreen mode

Animating document background!

Wanna animate background , you can use all the above BASE anims and also can make their combos + too add appearing in or out depends upon you.

Use:

motionia("body", "popZ")

or 

motionia("body", "scaleZ");

Enter fullscreen mode Exit fullscreen mode

Wait....whats Z at the end this will animate body's transformation in z axis and can change upon your body's dimension automatically!

Remember Z parameter only works in anims where transformation in z axis works , that is have its actual meaning as for those anims which it doesn't work then don't worry just change your base anim's name!

Animate color of a element quickly

You can pass your favourite colors upto 3 to motionia's color base anim.

use:

motionia("#target", "color", "red", "#000", "teal")

Enter fullscreen mode Exit fullscreen mode

Color will work in any typo that is hsl, hex , rgba , dex or predefined name etc.

Scale or Slide a element in Z axis

Yeah, with motionia you can even animate elements in 3D
and that's too just by a Line.

Animate a element such that its size becomes big with your desired amount (Also there is a prebuilt anim for it scaleIn) by 2x.

use:

motionia("#target", "scaleZ", "2")
Enter fullscreen mode Exit fullscreen mode

This will animate element by double its size!

Animating shadow of a element

This is very usefull & helpfull in creating dynamic view for links , that will surely increase the viewership into your project.

** This is separately available for both Text or any other html element such as Svg or a image**

To animate shadow of a hyper link

use:

motionia("#text", "shadowIn")
Enter fullscreen mode Exit fullscreen mode

To animate shadow of a div or a button or anything except text.

use:

motionia("#target", "popZ")
Enter fullscreen mode Exit fullscreen mode

Implementing Blur effects.

What if you can just make a blur effect easily? Usefull to make a loading scene

Directly use blurIn or blurOut

Depending on element motionia selects the anim like blur works even on text but is not made to animate text so there is an alternative use focusIn or focusInExpand

As i told above you may generate different anim by just mixing their names!

Its depend on your creativity.

use:

motionia("#target" , "focusIn")
Enter fullscreen mode Exit fullscreen mode

Animate a rotating effects that fits your need.

There is a prebuilt anim for rotate motion that is rotateIn or rotateOut also you may built more by mixing that is scaleRotateIn etc but to make it adjustable just customize it

Suppose you need turn a icon by 90 degrees

You may also use it for fliping

use:

motionia("#icon", "rotate", "90deg")
Enter fullscreen mode Exit fullscreen mode

Just specify the angle that 90deg, 100deg, etc.

Adding blur effects to anim itself!

The above anim is created by mixing bounceMin + Blur

Upto now we can add a blur effect to our elements using focusIn etc but what about adding this to Anims itself!

Just add Blur at the anims name.

use:

motionia("#target", "scaleInBlur")

or 

motionia("#target", "rollInBlur")

Enter fullscreen mode Exit fullscreen mode

Up, Down , left & right parameters example

Selecting above anims correctly for your need is a Art just master it & add customization accordingly.

Swinging a button with a id #btn

motiona("#btn","swingUp")
motionia("#btn","swingRight")

Enter fullscreen mode Exit fullscreen mode

// Animate a element to slide up by 10px

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

// px can be % em vh vw etc.

Enter fullscreen mode Exit fullscreen mode

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

Discussion (20)

pic
Editor guide
Collapse
bayuangora profile image
Bayu Angora

This is interesting.

Collapse
abhiprojectz profile image
Abhi Developer Author

Thanks @Bayu, keep experimenting with motionia.js & don't forget to share it with others too.

Collapse
piotrk profile image
2pi.pl

jQuery based... this makes it kind of outdated and even bigger in size.
I cannot find any real docs for this lib, and the demo page looks really bad.
I think there's still a lot of work ahead of the developer of this lib.

Collapse
lietux profile image
Janne "Lietu" Enberg

Looks pretty interesting. For anyone interested in web animation, Lottie is a pretty neat library too - though it requires you to create the animations first in Adobe After Effects: airbnb.io/lottie/

abhiprojectz profile image
Abhi Developer Author

I don't want to waste more time diving into this as I'm more than sure I could find "your" library in some other place as well.

then i challenge you find it and prove it , that's all!

because they got caught red handed.
haha your level of sense is really not common. There is noting to be caught also we all are here to share our thoughts and taking inspiration from others is not at all copying!

You too used c++ language , then i say you copied c++ syntax hahaa

p5js sketch from March 2019

There is a difference in rendering and allTop syntax in this is missing you can't call that copying! moreover its a very basic program.

now don't say 'i don't have time" or useless comments over here but you have time for commenting things that doesn't help someone instead my library would (had) help(ed) someone.

not like you who have time commenting shit on others stuff ,its easy to do that but sounds a lot hard to even teach someone something and for your kind information its not copying thats an inspiration taken from that code and i earned nothing no credit at all.

Also there is noting written asif written by or anything similar too!

Programming is not a popularity contest.I could buy stars for cheap and increase that to a thousand in literally minutes. What does a star say about a project? Nothing. Am I jealous of high star projects? Absolutely not.

you(a user with 0 post) are commenting a useless shit on a post that earns 0 this proves your jealousy, just written for the community. Obviously its not about popularity there exists a many factors and i may say i haven't bought a single star if so, then you may prove that too!

its clearly a opensource site anyone can contribute to it haha...
I must say you successfully wasted time trying to ruin the post but you can't do that.

abhiprojectz profile image
Abhi Developer Author

There is nothing to be explained in maths part of the code you stated above, the things that actually needs to be explained was explained clearly.

moreover, we can't do anything if you can't get it.
You can't explain anything in numbers that plots a specify graph, so can you do? like so in case of prime numbers forms a spiral. we only can opomose upto it.

AND if you think so anything copied,then give me the resource from where motionia.js is copied?
one step before last i wanna say

For things to be copied off , there exits a original one.
in this case even the idea is original and so as the content.

at last , not every one is professional even i'm a beginner student and i guess every one starts from the step 1 and reach to higher steps one by one,

but, i think you are super intelligent and is capable to make something that can get 290+ stars on github so easily right? like within a week.

so, go ahead show us all!

wish you good-luck :)

Collapse
kiddyxyz profile image
Muhamad Hudya Ramadhana • Edited

seriously this is interesting for having fun with a simple animation web.

Collapse
abhiprojectz profile image
Collapse
alperkasli profile image
Mücahit Alper Kaşlı

this is very cool 🤓 gonna implement immediately

Collapse
abhiprojectz profile image
Abhi Developer Author

Thanks for your feedback. Don't forget to share it with others. 😊

abhiprojectz profile image
Abhi Developer Author

HAHA.....bro exactly!
now this shows , you are caught red-handed posting shits on others post and ruing there time as well as posts via comments.

Collapse
abhiprojectz profile image
Abhi Developer Author

what you actually mean? can you elaborate?

Collapse
ryzorbent profile image
Thabo

Very cool looking!! 😎

Some comments have been hidden by the post's author - find out more