I'm also a bumbling html noob and found the documentation for scrollmagic is pretty poor, so i understand your pain.
Just make sure you're loading the iscroll stuff properly, should be something like this in the head
<script src="js/lib/greensock/TweenMax.min.js"></script>
<script src="js/lib/greensock/plugins/ScrollToPlugin.min.js"></script>
<script src="js/lib/jquery.min.js"></script>
<script src="js/lib/modernizr.custom.min.js"></script>
<script src="js/lib/iscroll-probe.js"></script>
<script src="scrollmagic/minified/ScrollMagic.min.js"></script>
<script src="scrollmagic/minified/plugins/animation.gsap.min.js"></script>
<script src="scrollmagic/minified/plugins/debug.addIndicators.min.js"></script>
then at the end before the closing body tag,
<script>
var controller = new ScrollMagic.Controller({
globalSceneOptions: {
triggerHook: "onCenter"
}
});
new ScrollMagic.Scene({
triggerElement: "#yourImageIDorContainer",
})
.setTween("#yourImageIDorContainer", 0.8, {
x: "-500",
ease: Power2.easeOut
})
.addTo(controller);
</script>
where triggerHook:onCenter means 50% of viewport height is the trigger to start animation. You can also use onEnter (very bottom of viewport) and onLeave (very top). You can also offset by number of pixels from onCenter/onLeave/onEnter with offset: value eg.
new ScrollMagic.Scene({
triggerElement: "#yourImageIDorContainer",
offset: 150
})
.setTween("#yourImageIDorContainer", 0.8, {
x: "-500",
ease: Power2.easeOut
})
.addTo(controller);
.setTween is poorly documented, but it's a shorthand for TweenMax.to I believe. You can also declare your tween or timeline before hand as shown here:
I prefer doing it this way, so i can set the ending position of the element in the stylesheet and then TweenMax.from() rather than declaring the final position in the HTML, and setting the intial position in the stylesheet.
