Author: | abhiprojectz |
---|---|
Views Total: | 93 views |
Official Page: | Go to website |
Last Update: | March 7, 2021 |
License: | MIT |
Preview:

Description:
Motionia is a lightweight, easy-to-use JavaScript animation library that provides 100+ performant animations from which you can pick to animate any elements and even attributes such as color and background.
How to use it:
1. Download the library and insert the JavaScript motionia.js
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. Initialize the library and then apply an animation of your choice to the element. Animation names:
- fadeIn
- slideIn
- slitIn
- puffIn
- swirlIn
- rollIn
- swingIn
- rotateIn
- parosIn
- presentIn
- presIn
- explodeIn
- popIn
- bounceIn
- scaleIn
- flickerIn
- tiltIn
- swapIn
- fadeOut
- slideOut
- slitOut
- puffOut
- swirlOut
- rollOut
- swOutgOut
- rotateOut
- parosOut
- presentOut
- presOut
- explodeOut
- popOut
- bounceOut
- scaleOut
- flickerOut
- tiltOut
- swapOut
- vibrateMin
- shakeMin
- jellyMin
- tiltMin
- blinkMin
- bounceMin
- vibrateMax
- shakeMax
- jellyMax
- tiltMax
- blinkMax
- bounceMax
var myAnim = new motionia()
myAnim.mo({ targets: '#myElement', anim: 'animationName', duration: '3s' // more options })
5. You can also specify the animation and pass other options via HTML data attributes:
<div data-mationia="slide" data-right='200px' data-delay="5s"> Animation </div>
6. Combine 2 or more animations as follows:
myAnim.mo({ targets: '#myElement', anim: 'rotateScaleIn' // more options })
Changelog:
v2 (03/07/2021)
- Added both modes custom utilities classes customizations
- Ability to group the animations
- Trigger either dynamically (using js functions) or statically