dipper waypoint

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>


<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.js"></script>


<section>
  <img class="dipper" src="https://image.shutterstock.com/image-vector/great-bear-with-lines-constellation-260nw-420764605.jpg" alt="">
</section>

SCSS

body {
  height: 2000px;
}

.dipper {
  margin-top: 600px;
  width: 400px;
  opacity: 0;
  transition: all 200ms ease-in;
}

.js-dipper-animate {
  opacity: 1;
  animation: dipper-jiggle 250ms linear;
}

@keyframes dipper-jiggle {
  0% {
    transform: rotate(0);
  }
  33% {
    transform: rotate(15deg);
  }
  66% {
    transform: rotate(-15deg);
  }
  100% {
    transform: rotate(0);
  }
}

JavaScript

$(document).ready(function() {
  var $dipper = $('.dipper');
  var $win = $(window);

  $dipper.waypoint(function(direction) {
    if (direction == 'down') {
      $dipper.addClass("js-dipper-animate");
    } else {
      $dipper.removeClass("js-dipper-animate");
    }
  }, {
    offset: '50%'
  });
});