Element Enter / Exit Animations On Scroll – AnimusJS

AnimusJS is a standalone JS library that allows to animate any elements using either CSS animations or JS functions, when they’re scrolled into and out of the viewport.

Install it via package manager:

$ npm install animusjs

How to use it:

Import the AnimusJS library into your web project.

<script src="src/animus.js"></script>

Specify the CSS classes for enter/exit status using anim- attributes as follows:

<div anim-in="active" anim-out="class">
  Content here
</div>

Initialize the AnimusJS:

animusjs.init();

Then you can animate the element using CSS3 animation properties:

div.active {
  opacity: 1;
  transform: translateX(0);
}
div.class {
  ...
}

By default, the library will animate the element by CSS classes. You’re also allowed to use JavaScript functions as follows:

<div anim-in="active" anim-out="active" anim-type="function">
  Content here
</div>

function active(element, options) {
  if(options.status === 'animate') {
    element.classList.add('active');
  }
  if(options.status === 'reverse') {
    element.classList.remove('active');
  }
}