Easy Performant Animation Engine - Motionia
| File Size: | 7.06 MB |
|---|---|
| Views Total: | 1039 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
Motionia is a lightweight, easy-to-use JavaScript CSS3 animation library that provides 100+ performant animations from which you can pick to animate any elements and even attributes such as color and background.
Animations Included:
- fadeIn
- rollIn
- scaleIn
- slideIn (Default)
- slitIn
- swirlIn
- flipIn
- bounceIn
- presIn
- presentIn
- parosIn
- flickerIn
- slideOut
- slitOut
- rollOut
- bounceOut
- flickerOut
- rotateIn
- swirlOut
- rotateOut
- flipOut
- swingIn
- swingOut
- tiltIn
- tiltOut
- presIn
- scaleOut
- slideInZ
- puffIn
- puffOut
- slideOutZ
- slideInBlur
- rollInBlur
- swirlOutZ
- slideOutBlur
- rollOutBlur
- flickerOut
- presOut
- presentOut
- rippleIn
- explodeOut
- blinkMin
- blinkMax
- jellyMin
- jellyMax
- shakeMin
- shakeMax
- wobbleMin
- wobbleMax
- vibrateMin
- vibrateMax
- bounceMin
- bounceMax
- blurIn
- blurOut
- flipScaleOut
- flipScaleIn
- rotateScaleIn
- rotateScaleOut
- popIn
- shadowIn
- expandIn
- popZ
- focusIn
- focusInExpand
- focusOut
- doorUp
- doorDown
- doorLeft
- doorRight
- swingUp
- swingDown
- swingLeft
- swingRight
- bgUp
- bgDown
- bgLeft
- bgRight
- slideX
- slideY
- rotate
- flip
- swing
- scale
- swap
- slideZ
- color
How to use it:
1. Download the library and insert the JavaScript motionia.js (jQuery is bundled) into the document.
<script src="./dist/motionia.js" defer></script>
2. Or load the library from a CDN.
<script src="https://cdn.jsdelivr.net/gh/abhiprojectz/motionia/dist/motionia.js" defer></script>
3. Apply an animation of your choice to the element. That's it.
motionia(myElement, animationName);
4. Animate colors of an element.
motionia(myElement, "color", Color1, Color2, Color3);
5. Rotate or flip an element by a specific angle.
motionia(myElement, "rotate", "90deg"); motionia(myElement, "flip", "90deg");
6. Slide the element up or right by a specified distance.
motionia(myElement, "slideY","10px"); motionia(myElement, "slideX","10px");
This awesome jQuery plugin is developed by abhiprojectz. For more Advanced Usages, please check the demo page or visit the official website.
