scrollmagic playground

index.html

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.14.2/TweenMax.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.3/ScrollMagic.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.3/plugins/animation.gsap.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.3/plugins/debug.addIndicators.js"></script>

<div id="container">
    <div id="block">
        Hi there !
    </div>
</div>

<script>
$(window).ready(function() {
  
var blockTween = new TweenMax.to('#block', 1.5, {
    backgroundColor: 'red'
});

var containerScene = new ScrollMagic.Scene({
    triggerElement: '#container'
})
.setTween(blockTween)
.addIndicators()
.addTo(controller);
  
});
</script>

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/debug.addIndicators.min.js"></script>

scrollmagic-playground.markdown

scrollmagic playground

A Pen by James on CodePen.

License.

style.scss

#container {
  margin: 55vh 0;
  padding: 50px;
  outline: 1px dashed orange;
}

#block {
  padding: 10px;
  border: 1px solid black;
  font-family: Helvetica;
}