How It Works

The animations themselves are done entirely with CSS. JavaScript is not required to run the animations. However, with CSS alone, there is no way to delay the start of an element's animation until the element becomes visible the viewport. To initiate the animation only after an element becomes visible in the viewport, the bnl-animate.js file contains a function that watches the window-scroll and browser-resize events and adds an .in-view class to all animatable elements when they become visible in the viewport. It is the addition of this .in-view class that cause the CSS animation to trigger.

Implementation

To animate any HTML element, you have to:

1. Add the .bnl-animate class to the element.
2. Add one of the following animation trigger classes to the element:
   • .bnl-animate-trigger-top
     animation triggered when the top of the element enters the viewport
   • .bnl-animate-trigger-middle
     animation triggered when the middle of the element enters the viewport
   • .bnl-animate-trigger-bottom
     animation triggered when the bottom of the element enters the viewport
   • .bnl-animate-trigger-full
     animation triggered when the whole element enters the viewport
     If the element is taller than the viewport, then this class will trigger the animation when the top of the element enters the viewport.
3. Add one of the following animation type classes to the element:
   • Fade In
     .bnl-animate.fade-in-Xs
     where X is an integer from 1 to 5 that sets the duration (in seconds) of the fade-in effect
   • Fade In and Slide Up
     .bnl-animate.fade-in-slide-up-Xs-5em
     where X can be "1", "1p5", "2", "2p5", or "3" that sets the duration, in seconds, (the "p5" indicate half-second intervals) of the animation effect
     The slide-up effect will start with the element moving up from 5em below its final position
     
   • Fade In and Slide Up With Delay
     .bnl-animate.fade-in-slide-up-3s-5em-delay
     The animation duration is 3 seconds, but the animation effect doesn't start until the 50% keyframe (1.5 second delay)
   • Fade In and Slide Down
     .bnl-animate.fade-in-slide-down-Xs-5em
     where X can be "1", "1p5", "2", "2p5", or "3" that sets the duration, in seconds, (the "p5" indicate half-second intervals) of the animation effect
     The slide-down effect will start with the element moving down from 5em above its final position
     
   • Fade In and Slide Right
     .bnl-animate.fade-in-slide-right-Xs-5em
     where X can be "1", "1p5", "2", "2p5", or "3" that sets the duration, in seconds, (the "p5" indicate half-second intervals) of the animation effect
     The slide-right effect will start with the element moving right from 5em left of its final position
     
   • Fade In and Slide Left
     .bnl-animate.fade-in-slide-left-Xs-5em
     where X can be "1", "1p5", "2", "2p5", or "3" that sets the duration, in seconds, (the "p5" indicate half-second intervals) of the animation effect
     The slide-left effect will start with the element moving left from 5em right of its final position
     

We will likely add additional animation options to this list as new needs arise.