Animate Elements On Scroll By Toggling CSS Classes – AIV

Preview:

Description:

AIV (Animate In View) is a standalone JavaScript scroll animation library to animate any element on page scroll by toggling certain CSS classes depending on the scroll position.

More features:

• Supports animating child elements with delay.
• Supports both in/out classes.
• Repeat animations on scroll or not.
• Custom visibility percentage to trigger the animation.
• Event handlers.

How to use it:

1. Download and import the minified version of the AIV library into the document.

<script src="aiv.min.js"></script>

2. Initialize the AIV library and you’re ready to go.

aiv.init();

3. Define the CSS classes to toggle when the element is scrolled in and out of view.

<div aiv="cls: inView; out_cls: outView">
  Element
</div>

4. Animate the element using CSS3.

.inView { 
  /* CSS animations here */
}
.outView { 
  /* CSS animations here */
}

5. Hide the element on page load (OPTIONAL).

.inView { 
  display: block;
  /* CSS animations here */
}
.outView { 
  display: none;
  /* CSS animations here */
}

6. It also supports child elements.

<div aiv="cls: inView; out_cls: outView; children: .child; delay: 200;">
  <div class="child">Child 1</div>
  <div class="child">Child 2</div>
  <div class="child">Child 3</div>
  ...
</div>

7. More options to config the animation.

• delay_all: Apply the delay to all the child elements
• offset: Specify the distance from the top to trigger the animation
• in_view: [0.2, 1.2] means 20% below the top of the screen and 120% above the bottom of the screen to trigger the animation
• start_visible: If the element should be visible before toggled

8. You can also apply the scroll-triggered animation to the element using JavaScript:

aiv.add('.element',{
  cls: 'inView',
  out_cls: 'outView',
  repeat: true,
  delay: 500
})

9. All default global options:

aiv.init({
  in_cls: 'in-view',
  out_cls: 'out-of-view',
  throttle: 50,
  context: document.body,
  selector: [aiv]
})

10. Event handlers.

el.addEventListener('aiv/in_view', function(){
  // is in view
});
el.addEventListener('aiv/out_of_view', function(){
  // is out of view
});
el.addEventListener('aiv/class_change', function(){
  // about to toggle CSS classes
});
el.addEventListener('aiv/load', function(){
  // when the element is loaded into AIV
});
el.addEventListener('aiv/before_load', function(){
  // before load
});
el.addEventListener('aiv/remove', function(){
  // when the element is removed from the watch list
});