JSFiddle - React, Tailwind, and code Playground

by greenhulk01

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.2/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.2/plugins/animation.gsap.min.js"></script>
<div class="container" id="js-pinned">
    <div class="cnc" id="js-animation"></div>
</div>

CSS

body {
    text-align: center;
}
.container {
    min-height: 90vh;
}
.cnc {
    margin: auto;
    width: 240px;
    height: 240px;
    background: url('http://www.collection.wealdnet.co.uk/collections/sites/all/themes/mytheme/assets/css/images/section1_sprite.png') no-repeat 0 0%;
    background-size: 100%;
}

JavaScript

// initialise ScrollMagic controller
var controller = new ScrollMagic.Controller();

// create Tween
var tween = TweenMax.to("#js-animation", 1.0, {
    backgroundPosition: "0 100%",
    ease: SteppedEase.config(20)
})

// build scene
var scene = new ScrollMagic.Scene({
    duration: 1500
})
    .triggerHook("onCenter")
    .setPin("#js-pinned")
    .setTween(tween)
    .addTo(controller);