Element Enter / Exit Animations On Scroll – AnimusJS

Category: Animation , Javascript , Recommended | February 22, 2017
Views Total:1,828 views
Official Page:Go to website
Last Update:February 22, 2017


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

Initialize the AnimusJS:


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
function active(element, options) {
  if(options.status === 'animate') {
  if(options.status === 'reverse') {

You Might Be Interested In:

One thought on “Element Enter / Exit Animations On Scroll – AnimusJS

Leave a Reply