JSFiddle - React, Tailwind, and code Playground

by Theo Sandström

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
The animation will run when you firt open the page,<br> 

and when you hover it,<br> 

and when you scroll out then in. <br>

<div class="anim">
  <img class="logo" 
  src="http://www.lifeofpix.com/wp-content/uploads/2017/05/img-5831.jpg">
</div>

<div class="anim">
<svg class="logo" xmlns="http://www.w3.org/2000/svg" viewBox="-1.5 -1.5 143 43">
<g id="felone-logo">
<path class="square" d="M2 2 h36 v36 H2z"/>
<path class="felone-symbol-one" d="M17 29 h6 M17 10 h3 v18.5"/>
<path class="felone-symbol-x" d="M32 25 h-1 L9 14 H8 M8 25 h1 l22-11 h1"/>
<path class="felone-type" d="M67.1,4V2H48v36 M69,12v-2H56v28h13V26 M48.2,28h0.2l19.7-9h1 M73,2h2v36h11.1v-4.7L82,30.9 M108.2,15.4c0,7.5-6.1,14-14,14S81,22.5,81,15V2h14c7.5,0,13,6,13.2,13V15.4z M95,38h-3V10h3l13,28h6V2h-3 M134,5V2h-14 v36h14V25l-2.4-1.6 M120.4,20h0.2 l12.4-6h1"/>
</g>
</svg>
</div>
<br> Scroll down then back up
<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
scroll up

CSS

.anim {
  top: 50px;
  max-width: 50%;
}

.anim:hover {
  animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
  stroke-dasharray: 0;
  stroke-dashoffset: 1000;
}

.anim .logo {
  animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  -moz-animation-delay: 1s;
  -webkit-animation-delay: 1s;
  -o-animation-delay: 1s;
  animation-delay: 1s;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
  width: 100%;
  stroke: #ff3311;
  stroke-linecap: square;
  stroke-linejoin: square;
  stroke-width: .2em;
  fill: none;
}

.animate {
  animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  -moz-animation-delay: 0.5s;
  -webkit-animation-delay: 0.5s;
  -o-animation-delay: 0.5s;
  animation-delay: 0.5s;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

.animate {
  animation: shake line 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  -moz-animation-delay: 0.5s;
  -webkit-animation-delay: 0.5s;
  -o-animation-delay: 0.5s;
  animation-delay: 0.5s;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
  -moz-animation-delay: 0.5s;
  -webkit-animation-delay: 0.5s;
  -o-animation-delay: 0.5s;
  animation-delay: 0.5s;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
  stroke: #ff3311;
  stroke-linecap: square;
  stroke-linejoin: square;
  stroke-width: .2em;
  fill: none;
  stroke-dasharray: 1000;
  stroke-dashoffset: 0;
}

@keyframes shake {
  10%,
  90% {
    transform: translate3d(-1px, 0, 0);
  }
  20%,
  80% {
    transform: translate3d(2px, 0, 0);
  }
  30%,
  50%,
  70% {
    transform: translate3d(-4px, 0, 0);
  }
  40%,
  60% {
    transform: translate3d(4px, 0, 0);
  }
}

@keyframes line {
  0% {stroke-dashoffset: 1000;}
  100% {stroke-dashoffset: 0;}
}

JavaScript

var $window = $(window);
var $elem = $(".anim");
var $gotOutOfFrame = false;

function isScrolledIntoView($elem, $window) {
  var docViewTop = $window.scrollTop();
  var docViewBottom = docViewTop + $window.height();
  var elemTop = $elem.offset().top;
  var elemBottom = elemTop + $elem.height();

  return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop) && $gotOutOfFrame);
}

function isScrolledOutView($elem, $window) {
  var docViewTop = $window.scrollTop();
  var docViewBottom = docViewTop + $window.height();

  var elemTop = $elem.offset().top;
  var elemBottom = elemTop + $elem.height();

  return ((elemBottom < docViewBottom) && (elemTop < docViewTop));
}
$(document).on("scroll", function() {
  if (isScrolledIntoView($elem, $window)) {
    $gotOutOfFrame = false;
    $elem.addClass("animate");
    $(function() {
      setTimeout(function() {
        $elem.removeClass("animate");

      }, 1500);
    });
  }
  if (isScrolledOutView($elem, $window)) {
     $gotOutOfFrame = true;
    $elem.removeClass("animate");
  }
});