[problem is syncing the pin and the animation]

I am animating a ScrollMagic scene by cycling through an array of images. I have an additional ScrollMagic scene to pin the animation.

The problem is syncing the pin and the animation. The animation is glitchy for most of the duration of the pin then going really fast at the end. I want the user to be able to scroll through the animation - so each individual image is called by a single scroll action for the duration of the pin. How can I achieve this effect?

var images = [
"slide1.png","slide2.png","slide3.png","slide4.png","slide5.png",
"slide6.png","slide7.png","slide8.png","slide9.png"
];

// object cycles through the images array
var obj = {
currentImage: 0
};

// create animation tween
var tween = TweenMax.to(obj, .5, {
currentImage: images.length - 1,
roundProps: "currentImage",
immediateRender: true,
backgroundPosition: "0 100%",
ease: SteppedEase.config(9),
onUpdate: function() {
jQuery('#myimg').attr('src', images[obj.currentImage])
}
});

// init animation controller
var controller = new ScrollMagic.Controller({
globalSceneOptions: {
triggerOffset: -200,
offset: -200,
triggerHook: 'onLeave'
}
});

// build animation scene
var animation = new ScrollMagic.Scene({
triggerElement: '#myimg',
duration: 1000,
triggerOffset: -200,
offset: -200
})