Motionia - JS animation library
source link: https://github.com/abhiprojectz/motionia
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
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.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK