ScollMagic Issue Fiddle 2.0

Basic forkable fiddle to showcase ScrollMagic issues.

by Jan Paepke

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/ScrollMagic.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/plugins/debug.addIndicators.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/plugins/animation.gsap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.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();
console.log("ScrollMagic v%s loaded", ScrollMagic.version);

// init
var ctrl = new ScrollMagic.Controller();

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

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