Q:

on scroll up and scroll down event

below is my code ,In this code my number counter is start when i am hovering on button but i want when i am scrolling up than counter reach 1 to 30 and when i am scroll down than counter reach 30 to 1.
please solve this problem.
Note:remove mouseover and mouseout event add scroll event  

            //Instantiate and get the instance from the element's data-spriteClip property
            var instance = $(".awesome-button").spriteClip({
                totalFrames: 30,
                frameRate: 60,
                stops: [1, 30]
            }).data("spriteClip");

            //Equivalent to
            //var instance = new SpriteClip($(".awesome-button").get(0), {
            //    totalFrames: 30,
            //    frameRate: 60,
            //    stops: [1, 30]
            //})
            
            instance.$el
                .on("mouseover", function () {
                    
                    instance.play();
                })
                .on("mouseout", function () {
                    instance.rewind();
                });

            instance.$dispatcher
                .on(SpriteClip.Event.ENTER_FRAME, function (e, clip) {

                    $(".currentFrame span").text(instance.currentFrame);
                });
.awesome-button {
display: block;
width: 60px;
height: 60px;
background: url("http://www.clker.com/cliparts/0/5/7/9/1195435734741708243kuba_arrow_button_set_2.svg.hi.png") no-repeat 0 0;
margin-bottom: 1em;
border: 1px solid #ccc;
}
.currentFrame{
    position: fixed;
    top: 0;
    left:0;
    display: block;
}
body{
    height:5000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.jqueryscript.net/demo/jQuery-Plugin-For-Frame-By-Frame-Sprites-Animations-SpriteClip-js/dist/spriteclip.js"></script>
<a class="awesome-button"></a>
<div class="currentFrame">Current frame: <span>1</span></div>

A:

Is that what was you're looking for?

            //Instantiate and get the instance from the element's data-spriteClip property
            var instance = $(".awesome-button").spriteClip({
                totalFrames: 30,
                frameRate: 60,
                stops: [1, 30]
            }).data("spriteClip");

            //Equivalent to
            //var instance = new SpriteClip($(".awesome-button").get(0), {
            //    totalFrames: 30,
            //    frameRate: 60,
            //    stops: [1, 30]
            //})
            
            instance.$el
                .on("mouseover", function () {
                    
                    instance.play();
                })
                .on("mouseout", function () {
                    instance.rewind();
                });

            instance.$dispatcher
                .on(SpriteClip.Event.ENTER_FRAME, function (e, clip) {

                    $(".currentFrame span").text(instance.currentFrame);
                });(function () {
    var previousScroll = 0;

    $(window).scroll(function(){
       var currentScroll = $(this).scrollTop();
       if (currentScroll > previousScroll){

         $('.Count').each(function () {
  var $this = $(this);
  jQuery({ Counter: 0 }).animate({ Counter: $this.attr('data-stop') }, {
    duration: 1000,
    easing: 'swing',
    step: function (now) {
      $this.text(Math.ceil(now));
    }
  });
});

       } else {
           $('.Count').each(function () {
  var $this = $(this);
  jQuery({ Counter: 30 }).animate({ Counter: $this.attr('data-to') }, {
    duration: 1000,
    easing: 'swing',
    step: function (now) {
      $this.text(Math.ceil(now));
    }
  });
});       
         
      
       }
       previousScroll = currentScroll;
    });
}());
.awesome-button {
display: block;
width: 60px;
height: 60px;
background: url("http://www.clker.com/cliparts/0/5/7/9/1195435734741708243kuba_arrow_button_set_2.svg.hi.png") no-repeat 0 0;
margin-bottom: 1em;
border: 1px solid #ccc;
}
.currentFrame{
    position: fixed;
    top: 0;
    left:0;
    display: block;
}
body{
    height:5000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.jqueryscript.net/demo/jQuery-Plugin-For-Frame-By-Frame-Sprites-Animations-SpriteClip-js/dist/spriteclip.js"></script>
<a class="awesome-button"></a>
<div class="currentFrame">Current frame: <span class="Count" data-stop="30" data-to="0">0</span></div>

