Element Enter/Exit Animation Plugin - jQuery TriggerOnViewJS

Yet another scroll-triggered animation jQuery plugin that applies corresponding CSS properties (typically CSS based animations) to elements when they're scrolled into and out of the viewport.

How to use it:

1. Include the main script TriggerOnViewJS after loading the latest jQuery library.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/src/triggeronview.js"></script>

2. Apply a fade-in effect to the element as soon as it enters the viewport.

<div id="example">
  Element To Animate
</div>

$('#largeImage').triggerOnView({

  // initial styles
  default: {opacity: 0},

  // CSS applied to the element when scrolled into view
  in: {opacity: 1}
  
});

3. You can also apply CSS animations to multiple elements in the same container.

<div id="example">
  <div id="item1">
    ...
  </div>
  <div id="item2">
    ...
  </div>
  ...
</div>

$('#example').triggerOnView([
  {
    element: $('#item1'),
    default: {left: -100, opacity: 0},
    in: {left: 0, opacity: 1}
  },
  {
    element: $('#item2'),
    default: {left: 100, opacity: 0},
    in: {left: 0, opacity: 1}
  }
]);

4. Trigger a CSS animation as the element is scrolled out of the viewport instead.

$('#largeImage').triggerOnView({

  out: {/* any CSS here */}
  
});

5. Set the initial position and CSS styles of the element.

$('#largeImage').triggerOnView({

  defaultPosition: 'relative',
  default: {opacity: 0},
  
});

6. More configuration options.

$('#largeImage').triggerOnView({

  // top offset to trigger the animation
  triggerOffset: 50,

  // animation speed in seconds
  time: 1,

  // time to wait before triggering the animation
  delay: 0,
  
  // additional easing function
  easing: 'swing',

});

7. Callback functions.

$('#largeImage').triggerOnView({

  callbackPreIn: function(){},
  callbackPreOut: function(){},
  callbackPostIn: function(){},
  callbackPostOut: function(){}

});

---

This awesome jQuery plugin is developed by Zephni. For more Advanced Usages, please check the demo page or visit the official website.