Animate Elements On Scroll By Toggling CSS Classes – AIV

Category: Animation , Javascript | November 27, 2019
Views Total:2,242 views
Official Page:Go to website
Last Update:November 27, 2019


Animate Elements On Scroll By Toggling CSS Classes – AIV


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.


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

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

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>

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:

  cls: 'inView',
  out_cls: 'outView',
  repeat: true,
  delay: 500

9. All default global options:

  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

You Might Be Interested In:

Leave a Reply