JSFiddle - React, Tailwind, and code Playground

by oilvier

HTML

<script src="https://cdn.rawgit.com/imakewebthings/waypoints/master/lib/jquery.waypoints.min.js"></script>
<script src="https://cdn.rawgit.com/imakewebthings/waypoints/master/lib/shortcuts/inview.min.js"></script>
<div class="foo">
<img src="//picsum.photos/800/600" alt="">
</div>
<div class="bar ">
  
</div>

SCSS

html,
body {min-height: 100%; height: 100%;}

body {position: relative;}

.foo {position: relative; padding-bottom:50%; height: 0; overflow: hidden; margin-bottom:500px;}
img {position: absolute; top:0; left:0; width:100%; height:100%; transform:scale(1.2); transition:transform 13s;
  .animate & {transform:scale(1);}
}

.bar {background-color:green; height: 300px; transition:background 3s; 
  &.animate {background-color: tomato;}
}

JavaScript

$('.foo').addClass('animate');

var inview = new Waypoint.Inview({
  element: $('.bar'),
  enter: function(direction) {
  	$('.bar').addClass('animate');
    console.log('Enter triggered with direction ' + direction)
  },
  entered: function(direction) {
    console.log('Entered triggered with direction ' + direction)
  },
  exit: function(direction) {
    console.log('Exit triggered with direction ' + direction)
  },
  exited: function(direction) {
    console.log('Exited triggered with direction ' + direction)
  }
});