0

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?

Run
  • 54,938
  • 169
  • 450
  • 748
  • What I am observing is that after half a second, the animation completes for each step of the scroll. So when `scrollTop` returns 0, 1, 2, 3.... the animation is triggered each step of the way. With a 10.5 multiplier, this is then 0, 10.5, 21, 31.5.... So the animation could move the `p` off the screen with like 30+ steps. And it will take a while since each step animation has to complete before the next can activate. – Twisty Nov 30 '17 at 16:14
  • If you take the 10.5 out, you can see this a little easier: https://jsfiddle.net/Twisty/Lq73wkpm/1/ – Twisty Nov 30 '17 at 16:16

1 Answers1

0

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

Twisty
  • 30,304
  • 2
  • 26
  • 45