jQuery - animate on scroll up and down with easing effect?

Question

I want to animate an element when I scroll down and up the page:

 $(document).ready(function(){ $(window).scroll(function(){ $('p').each(function(r){ var scrolled = $(window).scrollTop(); $(this).css('top', (scrolled * 2.5) + 'px'); }); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> <p style="position:relative">This is a paragraph.</p> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> 

But I want to add the easing effect on top of it. CSS method does not seem to do that so I tried with animate method:

 $(document).ready(function(){ $(window).scroll(function(){ $('p').each(function(r){ var scrolled = $(window).scrollTop(); $(this).animate({top: (scrolled * 10.5) + 'px'}, 600, 'easeOutExpo', function () { // }) }); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> <p style="position:relative">This is a paragraph.</p> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> 

But it seems to be on the infinite animate loop when I just scroll the page slightly.

Any ideas?

Answer 1

One way to help would be to use mod, % , operator condition so that you are not animating every scroll movement.

https://jsfiddle.net/Twisty/Lq73wkpm/2/

JavaScript

$(function() {
  $(window).scroll(function() {
    $('p').each(function(r) {
      var scrolled = $(window).scrollTop();
      console.log("Scroll Top: " + scrolled);
      if (scrolled % 10 == 0) {
        console.log("Animate: " + scrolled);
        $(this).animate({
            top: scrolled + 'px'
          },
          600,
          'easeOutExpo',
          function() {
            //
          });
      }
    });
  });
});

It's still a little clunky.

Your other option is to check for the user to no longer scroll, and jump to that location in the screen: jQuery scroll() detect when user stops scrolling