asemler/index.html

## index.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />

    <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>

    <script>
        window.onload = function() {

            // define images
            var images = [
                "images/steve-left-foot.png",
                "images/steve-right-foot.png"
            ];

            // TweenMax can tween any property of any object. We use this object to cycle through the array
            var obj = {curImg: 0};

            // create tween
            var tween = TweenMax.to(obj, 0.25,
                    {
                        curImg: images.length - 1,	// animate propery curImg to number of images
                        roundProps: "curImg",		// only integers so it can be used as an array index
                        repeat: -1,				    // repeat infinitely
                        immediateRender: true,		// load first image automatically
                        ease: Linear.easeNone,		// show every image the same amount of time
                        onUpdate: function () {

                            var element = document.getElementById('myimg');
                            console.log(element);
                            element.setAttribute("src", images[obj.curImg]); // set the image source
                        }
                    }
            );

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

            // build scene
            var scene = new ScrollMagic.Scene({triggerElement: "#trigger", duration: 700})
                    .setTween(tween)
                    .addIndicators() // add indicators (requires plugin)
                    .addTo(controller);

        };

    </script>

</head>

<body>

    <div id="trigger"></div>
    <div id="imagesequence">
        <img id="myimg" src="images/steve-right-foot.png" />
    </div>

</body>
</html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<meta name="viewport" content="width=device-width,initial-scale=1" />

	<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>

	<script>
	window.onload = function() {

	// define images
	var images = [
	"images/steve-left-foot.png",
	"images/steve-right-foot.png"
	];

	// TweenMax can tween any property of any object. We use this object to cycle through the array
	var obj = {curImg: 0};

	// create tween
	var tween = TweenMax.to(obj, 0.25,
	{
	curImg: images.length - 1, // animate propery curImg to number of images
	roundProps: "curImg", // only integers so it can be used as an array index
	repeat: -1, // repeat infinitely
	immediateRender: true, // load first image automatically
	ease: Linear.easeNone, // show every image the same amount of time
	onUpdate: function () {

	var element = document.getElementById('myimg');
	console.log(element);
	element.setAttribute("src", images[obj.curImg]); // set the image source
	}
	}
	);

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

	// build scene
	var scene = new ScrollMagic.Scene({triggerElement: "#trigger", duration: 700})
	.setTween(tween)
	.addIndicators() // add indicators (requires plugin)
	.addTo(controller);

	};

	</script>

	</head>

	<body>

	<div id="trigger"></div>
	<div id="imagesequence">
	<img id="myimg" src="images/steve-right-foot.png" />
	</div>

	</body>
	</html>