CSS Animations

We use a (heavily pared-down) version of animate.css to add simple css animations.

Basic Usage

1. Include the stylesheet in the head of your layout file.

<head>
  <link href="/includes/animate/animate.css" rel="stylesheet">
</head>

2. Add the class animate to the element you want to animate. 

3. Finally, add one of the following classes:

  • fadeIn
  • fadeInDown
  • fadeInLeft
  • fadeInRight
  • fadeInUp
  • fadeOut
  • fadeOutDown
  • fadeOutLeft
  • fadeOutRight
  • fadeOutUp
<div class="animate fadeInUp">
  Content to Reveal Here
</div>
 

Reveal animations as you scroll down the page.

Use wow.js to trigger the CSS animations on page scroll. 

1. Include the animate.css stylesheet in the head of your layout file just as above.

<head>
  <link href="/includes/animate/animate.css" rel="stylesheet">
</head>

2. Link and activate wow.js.

<script src="/includes/wow.min.js"></script>
<script>
  var wow = new WOW().init();
</script>

3. Make an element revealable by adding the class wow to the element; it will be invisible until the user scrolls to it.

4. Choose and animation style and add the class from the list above.

<div class="wow fadeInUp">
  Content to Reveal Here
</div>