Easy Performant JavaScript Animation Engine – Motionia

Category: Animation , Javascript , Recommended | March 7, 2021
Author:abhiprojectz
Views Total:93 views
Official Page:Go to website
Last Update:March 7, 2021
License:MIT

Preview:

Easy Performant JavaScript Animation Engine – Motionia

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

You Might Be Interested In:


Leave a Reply