AniJS in Genesis

AniJS is a Javascript library to easily add animations to elements on webpages by setting the value of data-anijs data attribute using the following syntax:

if an event occurs
on this element
do an action/animation
to this element

In this tutorial, I share the steps for loading this library and using it in Genesis.

We shall

• fade in the posts
• fade in the footer widgets from bottom
• rotate the sidebar in from down right

upon scrolling.

Step 1

Upload anicollection.css (the library's preferred CSS animations) or animate.css (Animate.css) to child theme's css directory (create, if not present).

If you would like to use only a few animations like one or two in your site, it is better to just copy (from one of the above) and paste those in the child theme's stylesheet rather than loading all the animations.

Ex.: If using just the fadein animation:

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

In this example, we are using the AniJS's file.

The available animations can be seen here.

Step 2

Upload anijs-min.js to child theme's js directory.

Since we are interested in the scroll event, upload anijs-helper-scrollreveal-min.js to the same location.

Step 3

Add the following in child theme's functions.php: