JSFiddle - React, Tailwind, and code Playground

by Jan Paepke

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.13.1/TweenMax.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.13.1/TimelineMax.min.js"></script>
<script src="https://rawgit.com/janpaepke/ScrollMagic/master/js/jquery.scrollmagic.js"></script>
<script src="https://rawgit.com/janpaepke/ScrollMagic/master/js/jquery.scrollmagic.debug.js"></script>
<div class="spacer halfheight"></div>
<div id="testobj" class="square good"></div>
<div class="spacer"></div>
<div class="spacer halfheight"></div>

CSS

html, body {
    height: 100%;
    margin: 0;
}
div.square {
    width: 50px;
    height: 50px;
    margin-bottom: 5px;
    position: relative;
    background-color: black;
}
div.good {
    background-color: green;
}
div.bad {
    background-color: red;
}
div.spacer {
    height: 200px;
}
div.spacer.halfheight {
    height: 50%;
}

JavaScript

console.clear();
// init
var ctrl = new ScrollMagic();

// build tween
var tween = TweenMax.to("div.square:eq(0)", 1, {
    left: 200
});

// create scene
var scene = new ScrollScene({
        triggerElement: "#testobj",
        duration: 100,
        offset: 10
    })
    .setTween(tween)
    .addTo(ctrl)
    .addIndicators();