Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript How to play an animation when an element isOnScreen() only once?

  • This topic is empty.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #152155
    pils87
    Participant

    I want to load an animation when a certain element isOnScreen() and only play it once. With the code i got now it keeps running the animations over and over again when i start scrolling.

    I guess $(document).scroll(function(event) has something to do with this but i have no idea how to solve this. Played arround with one() but could not get it to work with it.

    Complete code:

    $(document).scroll(function(event) {
    
    var result = $('.footer').isOnScreen();
    
    if(result == true) {
        jQuery(function($) {
                $('.timer').countTo({
                    from: 0,
                    to: 1975,
                    speed: 2000,
                    refreshInterval: 50,
                    onComplete: function(value) {
                        console.debug(this);
                    }
                });
            });
    
        jQuery(function($) {
                $('.timer-twee').countTo({
                    from: 0,
                    to: 500,
                    speed: 2000,
                    refreshInterval: 50,
                    onComplete: function(value) {
                        console.debug(this);
                    }
                });
            });
    }
    

    });

    #152160
    TheDoc
    Moderator

    You should be able to do this:

    $(document).scroll(function(event) {
    
      var result = $('.footer').isOnScreen();
      var hasBeenSeen = false;
    
      if(result && !hasBeenSeen) {
    
        hasBeenSeen = true;
    
        jQuery(function($) {
          $('.timer').countTo({
            from: 0,
            to: 1975,
            speed: 2000,
            refreshInterval: 50,
            onComplete: function(value) {
              console.debug(this);
            }
          });
        });
    
        jQuery(function($) {
          $('.timer-twee').countTo({
            from: 0,
            to: 500,
            speed: 2000,
            refreshInterval: 50,
            onComplete: function(value) {
              console.debug(this);
            }
          });
        });
      }
    });
    

    Note that you don’t need to do result == true because result itself will either be true or false, so you can just do if( result ).

    All I’m doing in my code is providing a second var to check. When the page loads it’s false and once your function runs once it becomes true. Your timer functions are only allowed to run if hasBeenSeen is false so they’ll only run once.

    I haven’t actually tested this code but it should work just fine.

    #152192
    pils87
    Participant

    Hey Doc,

    This does nothing different from what it is doing with my code. It still keeps playing over and over when i scroll

    I think i have been playing with this idea earlier myself but when you start scrolling the hasBeenSeen var will be set to false so it still runs the stuff inside the if() every time.

    #152196
    pils87
    Participant

    Just noticed something, i use the same function for another element somewhere else on the page and there it’s just playing once. The only difference is that i do a different animation there, this is in my if() there:

    $(‘#fade-test’).animate({‘margin-top’: ‘100px’}, 1500);

    Working perfect.

    edit:
    i guess that is because the value of margin-top in #fade-test is already 100px the second time?

    #152224
    TheDoc
    Moderator

    Oh derp. That’s my fault! var hasBeenSeen = false; should be outside of the scroll event, just before it. /sigh

    My bad!

    #152229
    pils87
    Participant

    Makes so much sense when you see the answer, can not stand it that i didn’t see this myself ^^. Thanks Doc!

    #152231
    pils87
    Participant

    One more question. Why is it that this one does always only runs once without the extra variable?

    $(document).scroll(function(event) {
    var result = $('.portfolio').isOnScreen();
        if(result) {
        $('#fade-test').fadeIn(2000);
        }
    

    });

    #152234
    TheDoc
    Moderator

    It’s probably running multiple times, but if #fade-test is already visible then fadeIn() has nothing to do.

    #152237
    pils87
    Participant

    Is that a problem? Should i always check with that extra variable making sure it always only runs once?

Viewing 9 posts - 1 through 9 (of 9 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.