Animate Elements When They Appear & Disappear - AnimatedH2Divs

AnimatedH2Divs is a jQuery Animate On Scroll plugin that uses CSS to animate elements when they appear on the screen while scrolling.

How to use it:

1. Load the main script AnimatedH2Divs.js after jQuery.

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

2. Add the CSS class animated-h2-div to the elements which should be animated on scroll.

<div class="animated-h2-div">
  Element 2
</div>

<div class="animated-h2-div">
  Element 3
</div>

<div class="animated-h2-div">
  Element 3
</div>

...

3. Animate those elements on scroll using your own CSS. In this example, the elements will fade in & fade out as you scroll down/up the page.

.animated-h2-div {
  color: transparent;
  transition: 5s;
}

.animated-h2-div.already-animated {
  color: black;
}

---

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