Animation on Scroll

Question

Hello I work on create simple animation on scroll, this animation depend on animate.css Library but there are two problems.

First Problem:

That I need to run the animation on user scroll to bottom only.

Second Problem:

That is there are a strange animation on I scroll, The animation is not work well you can note this if you run the code snippet.

Here my code

$(function () {
    var $animation_elements = $('.myDiv');

    $(window).on('scroll resize', function () {
        var viewportHeight = $(window).height();

        $animation_elements.each(function () {
            var $el = $(this);
            var position = this.getBoundingClientRect(); // This Function Will Return With object Contains top left Width Height
            if (position.top > viewportHeight || position.bottom < 0) {
                this.inView && $el.removeClass('animated bounceIn');
                this.inView = false;
            } else {
                !this.inView && $el.addClass('animated bounceIn');
                this.inView = true;
            }
        });
    });
});

body{
    height:4000px;
    margin-top:800px;
}
.myContainer{
    width:1000px;
    margin:50px auto;
}
.myContainer .myDiv {
    width: 400px;
    height: 200px;
    margin: auto;
    background-color: #00e675;
    -moz-animation-duration: 5s !important;
    -o-animation-duration: 5s !important;
    -webkit-animation-duration: 5s !important;
    animation-duration: 5s !important;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="myContainer">
      <div class="myDiv">
      </div>
  </div>

Note: Please run code snippet in full page.

You can try http://mynameismatthieu.com/WOW/ It works with animate.css too! — Zeus, Mar 05 '17 at 14:13
To detect if scroll down or up you can use this: http://stackoverflow.com/questions/9957860/detect-user-scroll-down-or-scroll-up-in-jquery .. what is bad with animation? that blicking effect? .. if this is problem, you are about to found method that executes after stop scrolling.. — Marek Bernád, Mar 05 '17 at 15:05

score 0 · Answer 1 · edited May 23 '17 at 11:54

This worked for me... tried in firefox and now work well... I used these references:

The problem was that scroll event produced for one scroll a lot of events and for every event animation started. For that I packed your function to another function to create an event only after stopping scrolling and after that animation will start. (you can notice that normal person that come to site and want even see something will stop to scroll for a few seconds, that's the time to show up your animation in order to fulfilling your condition about scrolling down only).

switching = 0

var mousewheelevt = (/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll" : "mousewheel" //FF doesn't recognize mousewheel as of FF3.x
// detect when scroll down and catch it
$('html').bind(mousewheelevt, function(e){

    var evt = window.event || e //equalize event object     
    evt = evt.originalEvent ? evt.originalEvent : evt; //convert to originalEvent if possible               
    var delta = evt.detail ? evt.detail*(-40) : evt.wheelDelta //check for detail first, because it is used by Opera and FF

    if(delta > 0) {
        //scroll up
        switching = 0;
    }
    else{
        switching = 1;
        //scroll down
    }   
});

//create event only after scroll stop
$(window).scroll(function() {
    clearTimeout($.data(this, 'scrollTimer'));
    $.data(this, 'scrollTimer', setTimeout(function() {
        // do your animation
        $(function () {
    var $animation_elements = $('.myDiv');

    $(window).on('scroll resize', function () {
    //console.log(switching);
    if (switching){
        var viewportHeight = $(window).height();

        $animation_elements.each(function () {
            var $el = $(this);
            var position = this.getBoundingClientRect(); // This Function Will Return With object Contains top left Width Height
            if (position.top > viewportHeight || position.bottom < 0) {
                this.inView && $el.removeClass('animated bounceIn');
                this.inView = false;
            } else {
                !this.inView && $el.addClass('animated bounceIn');
                this.inView = true;
            }
        });
 }
    });
});

       // console.log("Haven't scrolled in 250ms!");
      // console.log(switching);
    }, 250));
});

body{
    height:4000px;
    margin-top:800px;
}
.myContainer{
    width:1000px;
    margin:50px auto;
}
.myContainer .myDiv {
    width: 400px;
    height: 200px;
    margin: auto;
    background-color: #00e675;
    -moz-animation-duration: 5s !important;
    -o-animation-duration: 5s !important;
    -webkit-animation-duration: 5s !important;
    animation-duration: 5s !important;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
<div class="myContainer">
      <div class="myDiv" >
      </div>
  </div>
 </body>

Animation on Scroll

First Problem:

Second Problem:

1 Answers1