Animated.css Animation on Window scroll using jQuery

Question

I am trying to add the animation of animated.css ( http://daneden.github.io/animate.css/ ). But when I add the animated class and my desired effects on my page images and other elements, the animation just finish immediately on page load simultaneously everywhere on the page. I can't even see them function. Its so quick.

I know it can be done using jQuery.

Basically what I want is to make the animation function one by one only when the user scroll the window. So that only the element which is currently visible on the screen its animation will function, rest animations will function when the user scrolls the window.

Answer 1

If you want to do animation when the user scoll the window, you need to check the visiblity of particular element using jquery and apply the animation class.

For example, you have image under the div name "disimage". Then you need to write your code like below.

  $(document).ready(function(){

    if($("#disimage").visible())
      {
        $("#disimage").toggleClass("myanimationclass");
      }

    });

myanimationclass should have the animation styles for your element.

Answer 2

You can use these snippets to check the working functionality. You can choose animation styles from animate.css and then use them to animate your elements.

 $(document).ready(function(){ initScrollAnim(); }); function initScrollAnim() { // add this .anim-block class to every block that needs animation var targetBlock = $('.anim-block'); targetBlock.each(function() { var item = $(this); var win = $(window); // make transition when this class is added var activeClass = ('anim-active'); var addOffset = 20; var animate = function() { if ((win.scrollTop() + win.height()/1.5) >= item.offset().top) { item.addClass(activeClass); } }; win.on('load scroll', animate); }); } 

 #wrapper { overflow: hidden; } .anim-block { display: block; width: 100%; height: 100px; background: blue; } .slide-from-right { transform: translate(100%, 0); transition: transform 0.4s ease-in-out; } .anim-active { transform: translate(0, 0); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="wrapper"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, rem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, magnam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, excepturi?</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, rem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, magnam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, excepturi?</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, rem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, magnam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, excepturi?</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, rem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, magnam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, excepturi?</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, rem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, magnam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, excepturi?</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, rem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, magnam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, excepturi?</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, rem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, magnam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, excepturi?</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, rem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, magnam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, excepturi?</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, rem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, magnam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, excepturi?</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, rem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, magnam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, excepturi?</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, rem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, magnam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, excepturi?</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, rem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, magnam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, excepturi?</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, rem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, magnam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, excepturi?</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, rem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, magnam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, excepturi?</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, rem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, magnam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, excepturi?</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, rem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, magnam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, excepturi?</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, rem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, magnam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, excepturi?</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, rem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, magnam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, excepturi?</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, rem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, magnam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, excepturi?</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, rem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, magnam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, excepturi?</p> <div class="anim-block slide-from-right"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed, similique!</p> </div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In omnis possimus saepe! Qui reiciendis deserunt iure, quod magnam mollitia eius?</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In omnis possimus saepe! Qui reiciendis deserunt iure, quod magnam mollitia eius?</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In omnis possimus saepe! Qui reiciendis deserunt iure, quod magnam mollitia eius?</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In omnis possimus saepe! Qui reiciendis deserunt iure, quod magnam mollitia eius?</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In omnis possimus saepe! Qui reiciendis deserunt iure, quod magnam mollitia eius?</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In omnis possimus saepe! Qui reiciendis deserunt iure, quod magnam mollitia eius?</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In omnis possimus saepe! Qui reiciendis deserunt iure, quod magnam mollitia eius?</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In omnis possimus saepe! Qui reiciendis deserunt iure, quod magnam mollitia eius?</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In omnis possimus saepe! Qui reiciendis deserunt iure, quod magnam mollitia eius?</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In omnis possimus saepe! Qui reiciendis deserunt iure, quod magnam mollitia eius?</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In omnis possimus saepe! Qui reiciendis deserunt iure, quod magnam mollitia eius?</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In omnis possimus saepe! Qui reiciendis deserunt iure, quod magnam mollitia eius?</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In omnis possimus saepe! Qui reiciendis deserunt iure, quod magnam mollitia eius?</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In omnis possimus saepe! Qui reiciendis deserunt iure, quod magnam mollitia eius?</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In omnis possimus saepe! Qui reiciendis deserunt iure, quod magnam mollitia eius?</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In omnis possimus saepe! Qui reiciendis deserunt iure, quod magnam mollitia eius?</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In omnis possimus saepe! Qui reiciendis deserunt iure, quod magnam mollitia eius?</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In omnis possimus saepe! Qui reiciendis deserunt iure, quod magnam mollitia eius?</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In omnis possimus saepe! Qui reiciendis deserunt iure, quod magnam mollitia eius?</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In omnis possimus saepe! Qui reiciendis deserunt iure, quod magnam mollitia eius?</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In omnis possimus saepe! Qui reiciendis deserunt iure, quod magnam mollitia eius?</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In omnis possimus saepe! Qui reiciendis deserunt iure, quod magnam mollitia eius?</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In omnis possimus saepe! Qui reiciendis deserunt iure, quod magnam mollitia eius?</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In omnis possimus saepe! Qui reiciendis deserunt iure, quod magnam mollitia eius?</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In omnis possimus saepe! Qui reiciendis deserunt iure, quod magnam mollitia eius?</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In omnis possimus saepe! Qui reiciendis deserunt iure, quod magnam mollitia eius?</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In omnis possimus saepe! Qui reiciendis deserunt iure, quod magnam mollitia eius?</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In omnis possimus saepe! Qui reiciendis deserunt iure, quod magnam mollitia eius?</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In omnis possimus saepe! Qui reiciendis deserunt iure, quod magnam mollitia eius?</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In omnis possimus saepe! Qui reiciendis deserunt iure, quod magnam mollitia eius?</p> </div>