Easy Performant JavaScript Animation Engine – Motionia

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